"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";

export function ResourceTagPicker({
  value,
  onChange,
  suggestions,
  placeholder = "تگ جدید بنویسید یا از لیست انتخاب کنید…",
}: {
  value: string[];
  onChange: (tags: string[]) => void;
  suggestions: string[];
  placeholder?: string;
}) {
  const [input, setInput] = useState("");
  const [open, setOpen] = useState(false);
  const wrapRef = useRef<HTMLDivElement>(null);

  const normalized = useMemo(
    () => value.map((t) => t.trim()).filter(Boolean),
    [value],
  );

  const filteredSuggestions = useMemo(() => {
    const q = input.trim().toLowerCase();
    return suggestions.filter(
      (s) => !normalized.includes(s) && (!q || s.toLowerCase().includes(q)),
    );
  }, [input, normalized, suggestions]);

  const addTag = useCallback(
    (raw: string) => {
      const tag = raw.trim();
      if (!tag || normalized.includes(tag)) return;
      onChange([...normalized, tag]);
      setInput("");
      setOpen(false);
    },
    [normalized, onChange],
  );

  const removeTag = (tag: string) => {
    onChange(normalized.filter((t) => t !== tag));
  };

  useEffect(() => {
    const onDocClick = (e: MouseEvent) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", onDocClick);
    return () => document.removeEventListener("mousedown", onDocClick);
  }, []);

  return (
    <div ref={wrapRef} className="relative">
      <div
        className="flex min-h-10 flex-wrap items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-2 py-1.5 focus-within:border-teal-500 focus-within:ring-2 focus-within:ring-teal-100"
        onClick={() => setOpen(true)}
      >
        {normalized.map((tag) => (
          <span
            key={tag}
            className="inline-flex items-center gap-1 rounded-lg bg-teal-50 px-2 py-0.5 text-xs font-medium text-teal-800"
          >
            {tag}
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                removeTag(tag);
              }}
              className="rounded p-0.5 text-teal-600 hover:bg-teal-100"
              aria-label={`حذف ${tag}`}
            >
              ×
            </button>
          </span>
        ))}
        <input
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              addTag(input);
            } else if (e.key === "Backspace" && !input && normalized.length) {
              removeTag(normalized[normalized.length - 1]);
            }
          }}
          placeholder={normalized.length ? "" : placeholder}
          className="min-w-[120px] flex-1 border-0 bg-transparent px-1 py-1 text-sm outline-none placeholder:text-slate-400"
        />
      </div>

      {open && (filteredSuggestions.length > 0 || input.trim()) ? (
        <ul className="absolute z-20 mt-1 max-h-40 w-full overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-lg">
          {filteredSuggestions.map((s) => (
            <li key={s}>
              <button
                type="button"
                onClick={() => addTag(s)}
                className="block w-full px-3 py-2 text-right text-sm text-slate-700 hover:bg-slate-50"
              >
                {s}
              </button>
            </li>
          ))}
          {input.trim() && !normalized.includes(input.trim()) && !suggestions.includes(input.trim()) ? (
            <li>
              <button
                type="button"
                onClick={() => addTag(input)}
                className="block w-full px-3 py-2 text-right text-sm text-teal-700 hover:bg-teal-50"
              >
                + ساخت تگ «{input.trim()}»
              </button>
            </li>
          ) : null}
        </ul>
      ) : null}
    </div>
  );
}