import React from "react"
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
import { Button } from "../ui/button"
import { ChevronsUpDown, Check } from "lucide-react"
import {
    Command,
    CommandInput,
    CommandEmpty,
    CommandGroup,
    CommandItem
} from "../ui/command"
import { CurrencyType } from "@/types/dashboard/currency"


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

    selected: CurrencyType[]
    onSelected: (select: CurrencyType[]) => void

    defaultCurrency?: string
}

export default function CurrencyTypesSelector({
    title,
    description,
    items,
    edit,
    disabled,
    selected,
    onSelected,
    defaultCurrency
}: Props) {

    const [open, setOpen] = React.useState(false)

    const toggleItem = (item: CurrencyType) => {

        // ❌ Prevent removing default currency
        if (item.code === defaultCurrency) return

        const exists = selected.some(i => i.code === item.code)

        onSelected(
            exists
                ? selected.filter(i => i.code !== item.code)
                : [...selected, item]
        )
    }

    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 */}
            {selected.length > 0 ? (
                <div className="flex flex-wrap gap-2">
                    {items
                        .filter((item) =>
                            selected.some((s) => s.code === item.code)
                        )
                        .map((item) => (
                            <div
                                key={item.code}
                                className="flex items-center gap-3 px-3 py-1.5 border rounded-sm text-sm bg-card"
                            >
                                {/* <span className="text-lg">{item.flag}</span> */}

                                <div className="flex flex-col">
                                    <span className="font-medium">
                                        {item.code} (
                                        <span className="text-muted-foreground">
                                            {item.symbol}
                                        </span>
                                        )
                                    </span>
                                    <span className="text-xs text-muted-foreground">
                                        {item.name}
                                    </span>
                                </div>
                            </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">
                    <p className="text-sm">
                        No {title.toLowerCase()} selected yet.
                    </p>
                </div>
            )}

            {/* Selector */}
            {edit && (
                <Popover open={open} onOpenChange={setOpen}>
                    <PopoverTrigger asChild>
                        <Button
                            disabled={disabled}
                            size="sm"
                            variant="outline"
                            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 currency..." />
                            <CommandEmpty>No results found.</CommandEmpty>

                            <CommandGroup>
                                {items.map((item) => {
                                    const isActive = selected.some(
                                        (i) => i.code === item.code
                                    )

                                    return (
                                        <CommandItem
                                            key={item.code}
                                            onSelect={() => toggleItem(item)}
                                            className="flex items-center gap-3 p-2 cursor-pointer"
                                        >

                                            <div className="flex flex-1 justify-between items-center">
                                                <span className="font-medium">
                                                    {item.code}
                                                </span>
                                                <span className="text-muted-foreground">
                                                    {item.name}
                                                </span>
                                            </div>

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