import React, { useEffect } from "react"
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
import { Button } from "../ui/button"
import { ChevronsUpDown, Check, ImageOff, Image } from "lucide-react"
import { Command, CommandInput, CommandEmpty, CommandGroup, CommandItem } from "../ui/command"
import Icon, { ImageIcon } from "./Icon"
import { SystemCurrencyType } from "@/types/dashboard/currency"
import DisplayPrice from "../(dashboard)/DisplayPrice"

type Item = {
    id: number
    name?: string
    title?: string
    is_icon: boolean
    icon_value: string
    price?: number,
}

type Props = {
    title: string,
    description?: string,
    items: Item[],
    edit?: boolean,
    disabled?: boolean,

    card?: boolean,
    selected: number[],
    onSelected: (select: number[]) => void,
    system_currency: SystemCurrencyType
}

export default function FeatureSelector({ title, description, items, edit, disabled, card, selected, onSelected, system_currency }: Props) {
    const [open, setOpen] = React.useState(false)

    const toggleItem = (id: number) => {
        onSelected(selected.includes(id) ? selected.filter((i) => i !== id) : [...selected, id])
    }

    return (
        <div className="flex-1 flex flex-col gap-2">
            <label className="text-sm font-medium">{title}</label>
            {description && <p className="text-xs text-muted-foreground">{description}</p>}

            {/* Selected Items as Cards */}
            {selected.length > 0 ? (
                <div className="flex flex-wrap gap-2 max-w-lg ">
                    {items
                        .filter((item) => selected.includes(item.id))
                        .map((item) => (
                            card ? <div
                                key={item.id}
                                className="flex items-center justify-between gap-4 px-3 py-2 border rounded-sm text-sm min-w-sm w-fit"
                            >
                                <div className="flex justify-start gap-4 items-center">
                                    <ImageIcon is_icon={item.is_icon} value={item.icon_value} />
                                    <span >{item.name || item.title}</span>
                                </div>
                                <DisplayPrice price={item.price} currency={system_currency} />
                            </div>
                                : <div
                                    key={item.id}
                                    className="flex items-center gap-4 px-3 py-2 border rounded-sm  bg-card w-fit"
                                >
                                    <ImageIcon is_icon={item.is_icon} value={item.icon_value} />
                                    <span className="text-sm">{item.name || item.title}</span>
                                </div>
                        ))}
                </div>
            ) : (
                <div className="flex items-center justify-center p-2 w-fit gap-4 border border-dashed rounded-sm text-center text-muted-foreground">
                    {/* <ImageOff className="mx-auto h-6 w-6 opacity-50" /> */}
                    <p className="text-sm">No {title.toLowerCase()} selected yet.</p>
                </div>
            )}

            {/* Selector Popover */}
            {edit && <Popover open={open} onOpenChange={setOpen}>
                <PopoverTrigger asChild>
                    <Button disabled={disabled} size='sm' variant="outline" role="combobox" className="w-fit justify-between">
                        Select <ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
                    </Button>
                </PopoverTrigger>

                <PopoverContent className="p-0">
                    <Command>
                        <CommandInput placeholder={`Search ${title.toLowerCase()}...`} />
                        <CommandEmpty>No results found.</CommandEmpty>

                        <CommandGroup>
                            {items.map((item) => {
                                const isActive = selected.includes(item.id)
                                return (
                                    <CommandItem
                                        key={item.id}
                                        onSelect={() => toggleItem(item.id)}
                                        className="flex items-center gap-3 p-2 hover:bg-muted cursor-pointer"
                                    >
                                        <ImageIcon is_icon={item.is_icon} value={item.icon_value} />

                                        <div className="flex flex-col flex-1">
                                            <span className="font-medium">{item.name || item.title}</span>
                                            {/* {card && (
                                                <span className="text-xs text-muted-foreground">{item.currency} {item.price} </span>
                                            )} */}
                                        </div>

                                        <Check className={`h-5 w-5 ml-auto ${isActive ? "opacity-100" : "opacity-0"}`} />
                                    </CommandItem>
                                )
                            })}
                        </CommandGroup>
                    </Command>
                </PopoverContent>
            </Popover>}


        </div>
    )
}