import { useRef, useState } from "react";
import { ImageIcon, Link2, Upload } 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 { ICON_CATEGORIES } from "../lib/iconCatalog";
import { looksLikeImageUrl } from "@/lib/contentFormUtils";
import { cn } from "@/lib/utils";

const MAX_UPLOAD_BYTES = 512 * 1024;

type ImageIconFieldProps = {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
    className?: string;
};

export function ImageIconField({
    value,
    onChange,
    placeholder = "https://… or pick an icon",
    className,
}: ImageIconFieldProps) {
    const [open, setOpen] = useState(false);
    const [uploadError, setUploadError] = useState<string | null>(null);
    const fileRef = useRef<HTMLInputElement>(null);

    const hasPreview = looksLikeImageUrl(value);

    const selectIcon = (src: string) => {
        onChange(src);
        setOpen(false);
        setUploadError(null);
    };

    const handleUpload = (file: File | undefined) => {
        setUploadError(null);
        if (!file) return;
        if (!file.type.startsWith("image/")) {
            setUploadError("Please choose an image file.");
            return;
        }
        if (file.size > MAX_UPLOAD_BYTES) {
            setUploadError("Image must be 512 KB or smaller.");
            return;
        }
        const reader = new FileReader();
        reader.onload = () => {
            if (typeof reader.result === "string") {
                onChange(reader.result);
                setOpen(false);
            }
        };
        reader.readAsDataURL(file);
    };

    return (
        <div className={cn("space-y-2", className)}>
            <div className="flex items-start gap-2">
                <div
                    className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-slate-200 bg-slate-50"
                    title="Preview"
                >
                    {hasPreview ? (
                        <img src={value} alt="" className="h-full w-full object-contain p-1" />
                    ) : (
                        <ImageIcon size={20} className="text-slate-400" />
                    )}
                </div>

                <div className="min-w-0 flex-1 space-y-2">
                    <Input
                        value={value}
                        onChange={(e) => onChange(e.target.value)}
                        placeholder={placeholder}
                    />
                    <div className="flex flex-wrap gap-2">
                        <Popover open={open} onOpenChange={setOpen}>
                            <PopoverTrigger asChild>
                                <button
                                    type="button"
                                    className="inline-flex items-center gap-1.5 rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50"
                                >
                                    <ImageIcon size={14} />
                                    Icon library
                                </button>
                            </PopoverTrigger>
                            <PopoverContent className="w-80 p-3" align="start">
                                <Tabs defaultValue={ICON_CATEGORIES[0]?.id}>
                                    <TabsList className="mb-2 flex h-auto w-full flex-wrap gap-0.5 p-0.5">
                                        {ICON_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>
                                    {ICON_CATEGORIES.map((cat) => (
                                        <TabsContent key={cat.id} value={cat.id} className="mt-0">
                                            <div className="grid max-h-48 grid-cols-4 gap-2 overflow-y-auto">
                                                {cat.icons.map((icon) => (
                                                    <button
                                                        key={icon.id}
                                                        type="button"
                                                        onClick={() => selectIcon(icon.src)}
                                                        className={cn(
                                                            "flex flex-col items-center gap-1 rounded-lg border border-slate-200 p-2 hover:bg-slate-50",
                                                            value === icon.src && "bg-slate-100 ring-1 ring-slate-400"
                                                        )}
                                                        title={icon.label}
                                                    >
                                                        <img src={icon.src} alt="" className="h-6 w-6" />
                                                        <span className="text-[10px] text-slate-600 leading-tight text-center">
                                                            {icon.label}
                                                        </span>
                                                    </button>
                                                ))}
                                            </div>
                                        </TabsContent>
                                    ))}
                                </Tabs>
                            </PopoverContent>
                        </Popover>

                        <button
                            type="button"
                            onClick={() => fileRef.current?.click()}
                            className="inline-flex items-center gap-1.5 rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50"
                        >
                            <Upload size={14} />
                            Upload
                        </button>
                        <input
                            ref={fileRef}
                            type="file"
                            accept="image/*"
                            className="hidden"
                            onChange={(e) => {
                                handleUpload(e.target.files?.[0]);
                                e.target.value = "";
                            }}
                        />

                        <span className="inline-flex items-center gap-1 text-[11px] text-slate-500">
                            <Link2 size={12} />
                            Or paste a URL above
                        </span>
                    </div>
                    {uploadError ? (
                        <p className="text-xs text-red-600">{uploadError}</p>
                    ) : null}
                </div>
            </div>
        </div>
    );
}