import { useMemo, useRef, useState } from "react";
import { X } from "lucide-react";
import { normalize } from "../lib/normalize";
import { cn } from "../lib/utils";
import { useClickOutside } from "./useClickOutside";

export interface ProjectOption {
  id: string;
  name: string;
}

// چند-انتخابیِ جست‌وجوپذیرِ پروژه‌ها (1:N — مدیر پروژه ↔ پروژه‌ها):
//  - چیپ‌های پروژه با دکمه‌ی × (جداسازی فوری مدیر از پروژه)
//  - جست‌وجوی زنده‌ی فارسی (normalize: ی/ك عربی، نیم‌فاصله و فاصله‌ها)
//  - پروژه‌های انتخاب‌شده از فهرست پنهان می‌شوند تا انتخاب تکراری رخ ندهد
export function ProjectMultiSelect({
  options,
  values,
  onChange,
  placeholder = "انتخاب پروژه(ها)...",
  disabled = false,
}: {
  options: ProjectOption[];
  values: string[];
  onChange: (ids: string[]) => void;
  placeholder?: string;
  disabled?: boolean;
}) {
  const [text, setText] = useState("");
  const [open, setOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const ref = useClickOutside<HTMLDivElement>(() => {
    setOpen(false);
    setText("");
  });

  const byId = useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
  const selected = values.map((id) => byId.get(id)).filter(Boolean) as ProjectOption[];
  const q = normalize(text);
  const available = useMemo(
    () =>
      options.filter((o) => !values.includes(o.id) && (!q || normalize(o.name).includes(q))),
    [options, values, q],
  );

  const add = (id: string) => {
    onChange([...values, id]);
    setText("");
    inputRef.current?.focus();
  };
  const remove = (id: string) => onChange(values.filter((v) => v !== id));

  return (
    <div ref={ref} className="relative min-w-52">
      <div
        className={cn(
          "flex min-h-9 flex-wrap items-center gap-1 rounded-lg border border-line bg-panel px-2 py-1 text-[12px]",
          disabled ? "opacity-60" : "cursor-text",
        )}
        onClick={() => {
          if (!disabled) {
            setOpen(true);
            inputRef.current?.focus();
          }
        }}
      >
        {selected.map((p) => (
          <span
            key={p.id}
            className="inline-flex max-w-full items-center gap-1 rounded-md bg-accent-bg px-2 py-0.5 font-semibold text-accent"
          >
            <span className="truncate">{p.name}</span>
            {!disabled && (
              <button
                type="button"
                aria-label={`جدا کردن ${p.name}`}
                onClick={(e) => {
                  e.stopPropagation();
                  remove(p.id);
                }}
                className="cursor-pointer rounded p-0.5 hover:bg-accent/10"
              >
                <X className="h-3 w-3" />
              </button>
            )}
          </span>
        ))}
        <input
          ref={inputRef}
          type="text"
          dir="rtl"
          disabled={disabled}
          value={text}
          onChange={(e) => {
            setText(e.target.value);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          placeholder={selected.length ? "" : placeholder}
          className="h-7 min-w-24 flex-1 border-0 bg-transparent px-1 text-[12px] outline-none placeholder:text-muted/70"
        />
      </div>
      {open && !disabled && (
        <div className="absolute z-40 mt-1 max-h-56 w-full min-w-52 overflow-auto rounded-xl border border-line bg-panel p-1 shadow-lg">
          {available.length ? (
            available.map((o) => (
              <button
                key={o.id}
                type="button"
                onClick={() => add(o.id)}
                className="flex w-full cursor-pointer items-center rounded-lg px-2.5 py-1.5 text-start text-[12.5px] text-ink hover:bg-slate-bg"
              >
                {o.name}
              </button>
            ))
          ) : (
            <div className="px-2.5 py-2 text-[11.5px] text-muted">
              {options.length === 0
                ? "پروژه‌ای وجود ندارد"
                : q
                  ? "پروژه‌ای یافت نشد"
                  : "همه‌ی پروژه‌ها متصل شده‌اند"}
            </div>
          )}
        </div>
      )}
    </div>
  );
}