import { useState } from "react"
import * as LucideIcons from "lucide-react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Paintbrush, X, LucideIcon } from "lucide-react"

type IconPickerProps = {
    value?: string;
    disabled?: boolean;
    onChange?: (iconName: string) => void
}

export default function IconPicker({ value = "", disabled, onChange }: IconPickerProps) {

    const [open, setopen] = useState(false)
    const [search, setSearch] = useState(value)
    const [selected, setSelected] = useState('')


    const iconNames = Object.keys(LucideIcons).filter(name =>
        name.toLowerCase().includes(search.toLowerCase())
    )

    const handleSelect = (name: string) => {
        setSelected(name)
        setSearch(name)
    }

    const handleUse = () => {
        if (onChange && selected) {
            onChange(selected)
        }
        setopen(false)
    }

    const Icon = LucideIcons[value as keyof typeof LucideIcons] as LucideIcon
    const SelectedIcon = LucideIcons[selected as keyof typeof LucideIcons] as LucideIcon

    return (
        <Dialog open={open} onOpenChange={setopen}>
            <DialogTrigger disabled={disabled} className='relative border hover:ring-2 ring-blue-200 hover:bg-blue-50 group rounded-sm justify-center items-center flex flex-col gap-2  h-20 w-fit px-4'>
                {value ? <Icon className="w-8 h-8 text-neutral-400 group-hover:text-blue-400" /> : <Paintbrush className="w-8 h-8 text-neutral-400 group-hover:text-blue-400" />}
                <span className="text-xs text-neutral-600"> {value ? value : 'Select Icon'}</span>
            </DialogTrigger>

            <DialogContent className="sm:max-w-4xl w-full flex flex-col ">
                <DialogHeader>
                    <DialogTitle className="flex gap-2 justify-start items-center"> <Paintbrush className="w-4 h-4 text-blue-600" /> Select an Icon</DialogTitle>
                </DialogHeader>

                <div className="flex-1 flex flex-col gap-4 mt-2 max-h-[70vh] min-h-[70vh]">
                    {/* Preview + Search */}
                    <div className="flex flex-col md:flex-row gap-4 items-start md:items-center">
                        {selected && SelectedIcon && (
                            <div className="flex items-center gap-3 bg-gray-50 border rounded-sm p-2  w-full md:w-auto">
                                <SelectedIcon className="w-12 h-12 text-blue-600" />
                                <span className="font-mono text-sm text-gray-700">{selected}</span>
                            </div>
                        )}

                        <div className="flex-1 space-y-2">
                            <Label>Search Icon</Label>
                            <Input
                                type="text"
                                value={search}
                                onChange={e => setSearch(e.target.value)}
                                placeholder="Type icon name..."
                                className="mt-1"
                            />
                        </div>
                    </div>

                    {/* Icon Grid */}
                    <div className="grid grid-cols-7 gap-3 flex-1 overflow-auto border rounded-sm p-2 bg-white">
                        {iconNames.length > 0 ? (
                            iconNames.slice(0, 300).map(name => {
                                const Icon = LucideIcons[name as keyof typeof LucideIcons] as any
                                return (
                                    <div
                                        key={name}
                                        className={`flex flex-col gap-1 items-center justify-center cursor-pointer p-2 max-h-20 rounded-sm transition  ${selected === name ? 'bg-blue-200' : 'hover:bg-blue-100'}`}
                                        onClick={() => handleSelect(name)}
                                    >
                                        <Icon className="w-6 h-6 text-gray-700" />
                                        <span className="text-xs mt-1 truncate w-full text-center">{name}</span>
                                    </div>
                                )
                            })
                        ) : (
                            <div className="col-span-6 text-center text-gray-400 py-4">No icons found</div>
                        )}
                    </div>
                </div>

                <DialogFooter>
                    <DialogClose><Button variant='outline'>Close</Button></DialogClose>
                    <Button disabled={!selected || disabled} onClick={handleUse}>Use Icon</Button>
                </DialogFooter>
            </DialogContent>

        </Dialog>
    )
}
