"use client";
import * as React from "react";
import * as Popover from "@radix-ui/react-popover";
import { Check, ChevronDown, Globe, Search } from "lucide-react";
import { cn } from "@/lib/utils";
import type { CountryOption } from "./types";

/**
 * Searchable country combobox (Radix Popover + listbox). Value "" means "Any country".
 * Keyboard: type to filter, ArrowUp/Down to move, Enter to select, Escape to close.
 */
export function CountrySelect({ value, onChange, countries, id, disabled }: { value: string; onChange: (code: string) => void; countries: CountryOption[]; id?: string; disabled?: boolean }) {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const [active, setActive] = React.useState(0);
  const listRef = React.useRef<HTMLUListElement | null>(null);
  const listboxId = React.useId();

  const handleOpenChange = (next: boolean) => {
    setOpen(next);
    if (!next) {
      setQuery("");
      setActive(0);
    }
  };

  const options = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    const all: CountryOption[] = [{ code: "", name: "Any country" }, ...countries];
    if (!q) return all;
    return all.filter((c) => c.code === "" || c.name.toLowerCase().includes(q) || c.code.toLowerCase() === q || c.code.toLowerCase().startsWith(q));
  }, [countries, query]);

  React.useEffect(() => {
    const node = listRef.current?.children[active] as HTMLElement | undefined;
    node?.scrollIntoView({ block: "nearest" });
  }, [active]);

  const selected = countries.find((c) => c.code === value);
  const select = (code: string) => {
    onChange(code);
    setOpen(false);
  };

  return (
    <Popover.Root open={open} onOpenChange={handleOpenChange}>
      <Popover.Trigger asChild>
        <button
          type="button"
          id={id}
          role="combobox"
          aria-expanded={open}
          aria-haspopup="listbox"
          aria-controls={listboxId}
          disabled={disabled}
          className={cn(
            "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-border bg-bg px-3 py-1 text-sm shadow-xs transition-colors hover:border-border-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/25 disabled:cursor-not-allowed disabled:opacity-50",
          )}
        >
          <span className="flex min-w-0 items-center gap-2 truncate">
            <Globe className="size-3.5 shrink-0 text-fg-subtle" aria-hidden />
            {selected ? (
              <>
                <span className="font-mono text-[12.5px] text-fg-muted">{selected.code}</span>
                <span className="truncate">{selected.name}</span>
              </>
            ) : (
              <span className="text-fg-muted">Any country</span>
            )}
          </span>
          <ChevronDown className="size-4 shrink-0 text-fg-subtle" aria-hidden />
        </button>
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content align="start" sideOffset={4} className="z-50 w-[var(--radix-popover-trigger-width)] min-w-[16rem] overflow-hidden rounded-md border border-border bg-bg-elevated text-fg shadow-md data-[state=open]:animate-fade-in" onOpenAutoFocus={(e) => e.preventDefault()}>
          <div className="flex items-center gap-2 border-b border-border px-2.5">
            <Search className="size-3.5 shrink-0 text-fg-subtle" aria-hidden />
            <input
              autoFocus
              value={query}
              onChange={(e) => {
                setQuery(e.target.value);
                setActive(0);
              }}
              placeholder="Search countries…"
              aria-label="Search countries"
              aria-controls={listboxId}
              aria-activedescendant={options[active] ? `country-opt-${options[active].code || "any"}` : undefined}
              className="h-9 w-full bg-transparent text-sm outline-none placeholder:text-fg-subtle"
              onKeyDown={(e) => {
                if (e.key === "ArrowDown") {
                  e.preventDefault();
                  setActive((a) => Math.min(a + 1, options.length - 1));
                } else if (e.key === "ArrowUp") {
                  e.preventDefault();
                  setActive((a) => Math.max(a - 1, 0));
                } else if (e.key === "Enter") {
                  e.preventDefault();
                  const o = options[active];
                  if (o) select(o.code);
                }
              }}
            />
          </div>
          <ul ref={listRef} id={listboxId} role="listbox" aria-label="Countries" className="max-h-64 overflow-y-auto p-1 scrollbar-thin">
            {options.length === 0 ? <li className="px-2 py-3 text-center text-xs text-fg-subtle">No match.</li> : null}
            {options.map((c, i) => {
              const isSel = c.code === value;
              return (
                <li
                  key={c.code || "any"}
                  id={`country-opt-${c.code || "any"}`}
                  role="option"
                  aria-selected={isSel}
                  onMouseEnter={() => setActive(i)}
                  onMouseDown={(e) => e.preventDefault()}
                  onClick={() => select(c.code)}
                  className={cn("relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm", i === active && "bg-bg-muted")}
                >
                  <span className="w-7 shrink-0 font-mono text-[12px] text-fg-subtle">{c.code || "—"}</span>
                  <span className="truncate">{c.name}</span>
                  {isSel ? <Check className="absolute right-2 size-3.5" aria-hidden /> : null}
                </li>
              );
            })}
          </ul>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}