"use client";

import { useState, useRef, useEffect } from "react";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Check, Plus, Pencil, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { getOptionColor } from "@/components/ui/option-colors";

export interface OptionSelectProps {
  value: string | null;
  options: string[];
  onChange: (value: string | null) => void;
  onRename?: (oldValue: string, newValue: string) => void;
  placeholder?: string;
  disabled?: boolean;
}

export function OptionSelect({
  value,
  options,
  onChange,
  onRename,
  placeholder = "Cerca o crea...",
  disabled,
}: OptionSelectProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [renaming, setRenaming] = useState<string | null>(null);
  const [renameValue, setRenameValue] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setIsOpen(false);
        setRenaming(null);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  useEffect(() => {
    if (isOpen && inputRef.current) inputRef.current.focus();
  }, [isOpen]);

  const pool = Array.from(new Set([...options, ...(value ? [value] : [])])).sort((a, b) =>
    a.localeCompare(b, "it")
  );
  const q = query.trim().toLowerCase();
  const filtered = q ? pool.filter((o) => o.toLowerCase().includes(q)) : pool;
  const exactMatch = pool.some((o) => o.toLowerCase() === q);

  function select(v: string) {
    onChange(v);
    setQuery("");
    setIsOpen(false);
  }

  function createFromQuery() {
    const trimmed = query.trim();
    if (!trimmed) return;
    select(trimmed);
  }

  function commitRename(oldValue: string) {
    const next = renameValue.trim();
    setRenaming(null);
    if (next && next !== oldValue) onRename?.(oldValue, next);
  }

  return (
    <div ref={containerRef} className="relative w-full min-w-[120px]">
      <div
        onClick={() => !disabled && setIsOpen((v) => !v)}
        className={cn(
          "flex items-center gap-1 px-2 py-1 rounded transition-colors duration-150 min-h-[28px]",
          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-muted"
        )}
      >
        {value ? (
          <Badge
            variant="outline"
            className={cn(
              getOptionColor(value),
              "border-transparent text-xs px-2 py-0.5 font-medium truncate"
            )}
          >
            {value}
          </Badge>
        ) : (
          <span className="text-xs text-muted-foreground">—</span>
        )}
      </div>

      {isOpen && (
        <div className="absolute top-full left-0 mt-1 bg-popover border border-border rounded-md shadow-md p-1.5 z-20 min-w-[200px] max-h-[280px] overflow-y-auto">
          <Input
            ref={inputRef}
            type="text"
            placeholder={placeholder}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                if (!exactMatch) createFromQuery();
                else if (filtered.length === 1) select(filtered[0]);
              }
              if (e.key === "Escape") {
                e.preventDefault();
                setIsOpen(false);
              }
            }}
            className="text-sm h-8 mb-1.5 ring-1 ring-primary"
          />

          <div className="flex flex-col gap-0.5">
            {value && (
              <button
                type="button"
                onClick={() => {
                  onChange(null);
                  setIsOpen(false);
                }}
                className="flex items-center gap-2 rounded px-1.5 py-1 hover:bg-muted text-left text-xs text-muted-foreground"
              >
                <X className="h-3.5 w-3.5" /> Rimuovi
              </button>
            )}

            {filtered.map((opt) =>
              renaming === opt ? (
                <Input
                  key={opt}
                  autoFocus
                  value={renameValue}
                  onChange={(e) => setRenameValue(e.target.value)}
                  onBlur={() => commitRename(opt)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault();
                      commitRename(opt);
                    }
                    if (e.key === "Escape") {
                      e.preventDefault();
                      setRenaming(null);
                    }
                  }}
                  className="text-sm h-7"
                />
              ) : (
                <div
                  key={opt}
                  className="flex items-center justify-between gap-1 rounded px-1.5 py-1 hover:bg-muted group"
                >
                  <button
                    type="button"
                    onClick={() => select(opt)}
                    className="flex items-center gap-2 flex-1 min-w-0 text-left"
                  >
                    <span className="w-3.5 flex-shrink-0">
                      {value === opt && <Check className="h-3.5 w-3.5 text-primary" />}
                    </span>
                    <Badge
                      variant="outline"
                      className={cn(
                        getOptionColor(opt),
                        "border-transparent text-xs px-2 py-0.5 font-medium truncate"
                      )}
                    >
                      {opt}
                    </Badge>
                  </button>
                  {onRename && (
                    <button
                      type="button"
                      onClick={() => {
                        setRenameValue(opt);
                        setRenaming(opt);
                      }}
                      className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5"
                      aria-label={`Rinomina ${opt}`}
                    >
                      <Pencil className="h-3 w-3" />
                    </button>
                  )}
                </div>
              )
            )}

            {q && !exactMatch && (
              <button
                type="button"
                onClick={createFromQuery}
                className="flex items-center gap-2 rounded px-1.5 py-1.5 hover:bg-muted text-left text-sm"
              >
                <Plus className="h-3.5 w-3.5 text-primary" />
                Crea <span className="font-medium">«{query.trim()}»</span>
              </button>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
