import {
    Award,
    BarChart3,
    Briefcase,
    Building2,
    Cherry,
    Code2,
    Cloud,
    Cpu,
    Database,
    ExternalLink,
    Flame,
    Globe,
    Headphones,
    Heart,
    Layers,
    Leaf,
    Lightbulb,
    Megaphone,
    Palette,
    PenTool,
    Phone,
    Rocket,
    Scale,
    Server,
    Shield,
    Ship,
    Smartphone,
    Sprout,
    Sun,
    Target,
    Users,
    Wrench,
} from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { useMemo, useState } from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';

export const COMMON_ICONS: { name: string; icon: LucideIcon }[] = [
    { name: 'code', icon: Code2 },
    { name: 'palette', icon: Palette },
    { name: 'server', icon: Server },
    { name: 'rocket', icon: Rocket },
    { name: 'wrench', icon: Wrench },
    { name: 'briefcase', icon: Briefcase },
    { name: 'shield', icon: Shield },
    { name: 'smartphone', icon: Smartphone },
    { name: 'globe', icon: Globe },
    { name: 'database', icon: Database },
    { name: 'cloud', icon: Cloud },
    { name: 'cpu', icon: Cpu },
    { name: 'layers', icon: Layers },
    { name: 'lightbulb', icon: Lightbulb },
    { name: 'megaphone', icon: Megaphone },
    { name: 'pen-tool', icon: PenTool },
    { name: 'bar-chart', icon: BarChart3 },
    { name: 'target', icon: Target },
    { name: 'users', icon: Users },
    { name: 'building', icon: Building2 },
    { name: 'award', icon: Award },
    { name: 'headphones', icon: Headphones },
    { name: 'phone', icon: Phone },
    { name: 'heart', icon: Heart },
    { name: 'sprout', icon: Sprout },
    { name: 'cherry', icon: Cherry },
    { name: 'sun', icon: Sun },
    { name: 'scale', icon: Scale },
    { name: 'ship', icon: Ship },
    { name: 'flame', icon: Flame },
    { name: 'leaf', icon: Leaf },
];

type Props = {
    value: string;
    onChange: (icon: string) => void;
};

/**
 * Pilih ikon lucide untuk layanan — grid ikon umum + pencarian. Nilai ikon
 * disimpan di `value`; query pencarian terpisah agar grid tidak menyusut
 * setelah satu ikon dipilih.
 */
export default function IconPicker({ value, onChange }: Props) {
    const [query, setQuery] = useState('');

    const filtered = useMemo(() => {
        const q = query.trim().toLowerCase();

        return q === '' ? COMMON_ICONS : COMMON_ICONS.filter((item) => item.name.includes(q));
    }, [query]);

    const ResolvedIcon = useMemo(() => {
        const match = COMMON_ICONS.find((item) => item.name === value);

        return match?.icon ?? null;
    }, [value]);

    return (
        <div className="space-y-3">
            <div className="space-y-2">
                <Label htmlFor="icon-picker">Ikon</Label>
                <div className="flex items-center gap-3">
                    <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border bg-muted">
                        {ResolvedIcon ? <ResolvedIcon className="size-5 text-primary" /> : <span className="text-xs text-muted-foreground">?</span>}
                    </div>
                    <Input
                        id="icon-picker"
                        value={value}
                        onChange={(e) => onChange(e.target.value)}
                        placeholder="Nama ikon (mis. code, server)"
                    />
                </div>
            </div>

            <div>
                <Input
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="Cari ikon..."
                    className="mb-2"
                />
                <div className="grid grid-cols-6 gap-1.5 sm:grid-cols-8">
                    {filtered.map((item) => (
                        <button
                            key={item.name}
                            type="button"
                            title={item.name}
                            aria-label={item.name}
                            aria-pressed={value === item.name}
                            onClick={() => {
                                onChange(item.name);
                                setQuery('');
                            }}
                            className={cn(
                                'flex h-10 items-center justify-center rounded-md border transition-colors',
                                value === item.name
                                    ? 'border-primary bg-primary/10 text-primary'
                                    : 'border-border text-muted-foreground hover:bg-muted hover:text-foreground',
                            )}
                        >
                            <item.icon className="size-5" />
                        </button>
                    ))}
                </div>

                {/* Link ke katalog lengkap Lucide — dibuka di tab baru. */}
                <div className="mt-3 flex items-center justify-between border-t pt-3">
                    <span className="text-xs text-muted-foreground">Butuh ikon lain?</span>
                    <a
                        href="https://lucide.dev/icons/"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center gap-1 text-xs font-medium text-primary underline-offset-4 hover:underline"
                    >
                        Lebih banyak ikon
                        <ExternalLink className="size-3" aria-hidden="true" />
                    </a>
                </div>
            </div>
        </div>
    );
}