"use client";

import { useState, useRef, useEffect } from "react";
import { ChevronDown, X } from "lucide-react";

interface AutocompleteItem {
  value: string;
  label: string;
}

interface AutocompleteProps {
  items: AutocompleteItem[];
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  label?: string;
  dir?: "rtl" | "ltr";
}

export function Autocomplete({
  items,
  value,
  onChange,
  placeholder = "جستجو...",
  label,
  dir = "rtl",
}: AutocompleteProps) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const containerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  const selectedItem = items.find((i) => i.value === value);
  const [inputValue, setInputValue] = useState(selectedItem?.label || "");

  useEffect(() => {
    setInputValue(selectedItem?.label || "");
  }, [selectedItem]);

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setOpen(false);
        setInputValue(selectedItem?.label || "");
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [selectedItem]);

  const filtered = items.filter((i) =>
    i.label.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div className="relative" ref={containerRef} dir={dir}>
      {label && (
        <label className="block text-sm font-medium text-gray-700 mb-1">
          {label}
        </label>
      )}
      <div className="relative">
        <input
          ref={inputRef}
          type="text"
          className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 focus:border-[#2563EB] focus:ring-1 focus:ring-[#2563EB]/20 outline-none transition-colors"
          placeholder={placeholder}
          dir={dir}
          value={open ? query : inputValue}
          onChange={(e) => {
            setQuery(e.target.value);
            if (!open) setOpen(true);
          }}
          onFocus={() => {
            setOpen(true);
            setQuery("");
          }}
        />
        <div className="absolute top-1/2 -translate-y-1/2 start-2 flex items-center gap-1">
          {value && (
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                onChange("");
                setInputValue("");
                setQuery("");
              }}
              className="text-gray-400 hover:text-gray-600"
            >
              <X className="h-3.5 w-3.5" />
            </button>
          )}
          <button
            type="button"
            onClick={() => {
              setOpen(!open);
              if (!open) {
                setQuery("");
                inputRef.current?.focus();
              }
            }}
            className="text-gray-400 hover:text-gray-600"
          >
            <ChevronDown className="h-4 w-4" />
          </button>
        </div>
      </div>

      {open && filtered.length > 0 && (
        <div className="absolute z-50 mt-1 w-full max-h-60 overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg">
          {filtered.map((item) => (
            <button
              key={item.value}
              type="button"
              className={`w-full text-right px-3 py-2 text-sm hover:bg-blue-50 transition-colors ${
                item.value === value ? "bg-blue-50 text-[#2563EB] font-medium" : "text-gray-700"
              }`}
              onClick={() => {
                onChange(item.value);
                setInputValue(item.label);
                setOpen(false);
                setQuery("");
              }}
            >
              {item.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}