import { useState } from "react";
import { Smile } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EMOJI_CATEGORIES } from "../lib/emojiCatalog";
import { cn } from "@/lib/utils";

type EmojiPickerFieldProps = {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
    /** Narrow layout for inline card editors */
    compact?: boolean;
    className?: string;
};

export function EmojiPickerField({
    value,
    onChange,
    placeholder = "Pick or type emoji",
    compact = false,
    className,
}: EmojiPickerFieldProps) {
    const [open, setOpen] = useState(false);

    const selectEmoji = (emoji: string) => {
        onChange(emoji);
        setOpen(false);
    };

    return (
        <div className={cn("flex items-start gap-2", className)}>
            <div
                className={cn(
                    "flex shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-slate-50 text-2xl leading-none",
                    compact ? "h-9 w-9" : "h-10 w-10"
                )}
                title="Preview"
                aria-hidden
            >
                {value.trim() || "—"}
            </div>

            <div className="flex min-w-0 flex-1 gap-2">
                <Input
                    value={value}
                    onChange={(e) => onChange(e.target.value)}
                    placeholder={placeholder}
                    className={cn(compact ? "w-full" : "flex-1", compact && "text-center")}
                />
                <Popover open={open} onOpenChange={setOpen}>
                    <PopoverTrigger asChild>
                        <button
                            type="button"
                            className={cn(
                                "inline-flex shrink-0 items-center justify-center gap-1 rounded-md border border-slate-300 bg-white px-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50",
                                compact ? "h-9" : "h-10"
                            )}
                            title="Choose emoji"
                        >
                            <Smile size={16} />
                            {!compact && <span className="hidden sm:inline">Pick</span>}
                        </button>
                    </PopoverTrigger>
                    <PopoverContent className="w-80 p-3" align="start">
                        <p className="mb-2 text-xs font-medium text-slate-600">Choose an emoji</p>
                        <Tabs defaultValue={EMOJI_CATEGORIES[0]?.id} className="w-full">
                            <TabsList className="mb-2 flex h-auto w-full flex-wrap gap-0.5 p-0.5">
                                {EMOJI_CATEGORIES.map((cat) => (
                                    <TabsTrigger
                                        key={cat.id}
                                        value={cat.id}
                                        className="flex-1 px-1.5 py-1 text-[10px] sm:text-xs"
                                    >
                                        {cat.label}
                                    </TabsTrigger>
                                ))}
                            </TabsList>
                            {EMOJI_CATEGORIES.map((cat) => (
                                <TabsContent key={cat.id} value={cat.id} className="mt-0">
                                    <div className="grid max-h-44 grid-cols-8 gap-0.5 overflow-y-auto">
                                        {cat.emojis.map((emoji) => (
                                            <button
                                                key={`${cat.id}-${emoji}`}
                                                type="button"
                                                onClick={() => selectEmoji(emoji)}
                                                className={cn(
                                                    "flex h-8 w-8 items-center justify-center rounded-md text-lg hover:bg-slate-100",
                                                    value === emoji && "bg-slate-200 ring-1 ring-slate-400"
                                                )}
                                                title={emoji}
                                            >
                                                {emoji}
                                            </button>
                                        ))}
                                    </div>
                                </TabsContent>
                            ))}
                        </Tabs>
                    </PopoverContent>
                </Popover>
            </div>
        </div>
    );
}