import React, { useEffect, useMemo, useState, useCallback } from "react";
import { Check, ChevronsUpDown, Search } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
    Popover, PopoverContent, PopoverTrigger,
} from "@/components/ui/popover";
import { api } from "@/lib/api";
import { useCompany } from "@/context/CompanyContext";

/**
 * Searchable, keyboard-navigable unit picker.
 * Stores the unit's `short_name` (e.g., "PCS", "KG") in `value`.
 */
export function UnitSelect({
    value,
    onChange,
    placeholder = "Select unit",
    disabled = false,
    allowClear = false,
    testid = "unit-select",
    triggerClassName = "",
}) {
    const { activeId } = useCompany();
    const [open, setOpen] = useState(false);
    const [units, setUnits] = useState([]);
    const [q, setQ] = useState("");

    const load = useCallback(async () => {
        try {
            const params = activeId ? { company_id: activeId } : {};
            const { data } = await api.get("/units", { params });
            setUnits(data || []);
        } catch {
            setUnits([]);
        }
    }, [activeId]);

    useEffect(() => {
        if (open) load();
    }, [open, load]);

    const filtered = useMemo(() => {
        if (!q) return units;
        const s = q.toLowerCase();
        return units.filter(
            (u) =>
                (u.short_name || "").toLowerCase().includes(s) ||
                (u.name || "").toLowerCase().includes(s),
        );
    }, [units, q]);

    const selected = units.find((u) => u.short_name === value);

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    type="button"
                    variant="outline"
                    role="combobox"
                    disabled={disabled}
                    className={cn(
                        "w-full justify-between font-normal",
                        !value && "text-muted-foreground",
                        triggerClassName,
                    )}
                    data-testid={testid}
                >
                    <span className="truncate">
                        {value ? (
                            <span className="font-mono font-semibold">{value}</span>
                        ) : (
                            placeholder
                        )}
                        {selected?.name && (
                            <span className="text-xs text-muted-foreground ml-2">
                                {selected.name}
                            </span>
                        )}
                    </span>
                    <ChevronsUpDown className="h-3.5 w-3.5 ml-2 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent className="p-0 w-[280px]" align="start">
                <div className="p-2 border-b">
                    <div className="relative">
                        <Search className="h-3.5 w-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
                        <Input
                            placeholder="Search unit…"
                            value={q}
                            onChange={(e) => setQ(e.target.value)}
                            className="pl-7 h-8 text-sm"
                            autoFocus
                            data-testid={`${testid}-search`}
                        />
                    </div>
                </div>
                <div className="max-h-64 overflow-y-auto py-1">
                    {allowClear && (
                        <button
                            type="button"
                            onClick={() => {
                                onChange?.("");
                                setOpen(false);
                            }}
                            className="w-full text-left px-3 py-1.5 text-xs italic text-muted-foreground hover:bg-muted/50"
                        >
                            Clear selection
                        </button>
                    )}
                    {filtered.length === 0 ? (
                        <div className="px-3 py-6 text-center text-xs text-muted-foreground">
                            No unit found.
                        </div>
                    ) : (
                        filtered.map((u) => (
                            <button
                                type="button"
                                key={u.id}
                                onClick={() => {
                                    onChange?.(u.short_name);
                                    setOpen(false);
                                    setQ("");
                                }}
                                className={cn(
                                    "flex items-center justify-between w-full px-3 py-1.5 text-sm hover:bg-muted/60",
                                    value === u.short_name && "bg-muted",
                                )}
                                data-testid={`${testid}-opt-${u.short_name}`}
                            >
                                <span className="flex items-center gap-2">
                                    <Check
                                        className={cn(
                                            "h-3.5 w-3.5",
                                            value === u.short_name ? "opacity-100" : "opacity-0",
                                        )}
                                    />
                                    <span className="font-mono font-semibold">
                                        {u.short_name}
                                    </span>
                                    <span className="text-xs text-muted-foreground">
                                        {u.name}
                                    </span>
                                </span>
                                <span className="flex items-center gap-1">
                                    {u.allow_decimal && (
                                        <Badge variant="outline" className="text-[9px] py-0 px-1">
                                            decimal
                                        </Badge>
                                    )}
                                    {!u.is_predefined && (
                                        <Badge variant="secondary" className="text-[9px] py-0 px-1">
                                            custom
                                        </Badge>
                                    )}
                                </span>
                            </button>
                        ))
                    )}
                </div>
            </PopoverContent>
        </Popover>
    );
}