import { Loader2, Plus, Search } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { useImportSkill, useSkills } from "../hooks/useSkills";

interface SkillMultiSelectProps {
  selected: string[];
  onChange: (skills: string[]) => void;
}

export function SkillMultiSelect({ selected, onChange }: SkillMultiSelectProps) {
  const { skills, loading: skillsLoading, refresh } = useSkills();
  const importSkill = useImportSkill();
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");
  const containerRef = useRef<HTMLDivElement>(null);

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

  const filtered = skills.filter(
    (skill) => skill.name.toLowerCase().includes(search.toLowerCase()) || skill.id.toLowerCase().includes(search.toLowerCase()),
  );

  const available = filtered.filter((skill) => !selected.includes(skill.id));

  const isGitHubRef = search.includes("@") && search.includes("/");

  const handleToggle = (id: string) => {
    if (selected.includes(id)) {
      onChange(selected.filter((x) => x !== id));
    } else {
      onChange([...selected, id]);
    }
  };

  const handleImportAndAdd = async () => {
    const ref = search.trim();
    if (!ref) return;
    try {
      const newSkill = await importSkill.mutateAsync(ref);
      toast.success(`Imported skill: ${newSkill.name}`);
      setSearch("");
      refresh();
      onChange([...selected, newSkill.id]);
    } catch (err: any) {
      toast.error(err.message || "Failed to import skill");
    }
  };

  return (
    <div ref={containerRef} className="relative w-full">
      <div
        onClick={() => setOpen(!open)}
        className="flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-1.5 text-sm cursor-pointer shadow-xs focus-within:ring-1 focus-within:ring-ring"
      >
        {selected.map((id) => {
          const skill = skills.find((s) => s.id === id);
          const displayName = skill ? skill.name : id.includes("@") ? id.split("@")[1] : id;
          return (
            <span key={id} className="inline-flex items-center gap-1 bg-accent/10 text-accent font-mono text-xs px-2 py-0.5 rounded">
              {displayName}
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  handleToggle(id);
                }}
                className="hover:opacity-70"
              >
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                  <path d="M18 6 6 18M6 6l12 12" />
                </svg>
              </button>
            </span>
          );
        })}
        {selected.length === 0 && <span className="text-muted-foreground text-sm">Select skills...</span>}
      </div>

      {open && (
        <div className="absolute z-50 mt-1 w-full bg-popover border border-border rounded-md shadow-lg py-1.5 flex flex-col max-h-64">
          <div className="px-3 pb-2 pt-1 border-b border-border flex items-center gap-2">
            <Search className="size-3.5 text-content-tertiary shrink-0" />
            <input
              type="text"
              placeholder="Search or enter GitHub ref..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="flex-1 bg-transparent text-xs outline-none border-none text-content-primary placeholder:text-content-tertiary"
            />
          </div>

          <div className="flex-1 overflow-y-auto min-h-[50px] max-h-48 py-1">
            {skillsLoading ? (
              <div className="px-3 py-2 flex items-center justify-center gap-2 text-xs text-content-tertiary">
                <Loader2 className="size-3 animate-spin text-accent" />
                Loading...
              </div>
            ) : available.length === 0 && !isGitHubRef ? (
              <div className="px-3 py-2 text-xs text-content-tertiary text-center">No matching skills.</div>
            ) : (
              available.map((skill) => (
                <button
                  type="button"
                  key={skill.id}
                  onClick={() => handleToggle(skill.id)}
                  className="w-full text-left px-3 py-2 text-xs font-mono hover:bg-surface-tertiary transition-colors flex justify-between items-center text-content-primary"
                >
                  <span>{skill.name}</span>
                  <span className="text-[9px] text-content-tertiary bg-surface-secondary px-1 py-0.5 rounded truncate max-w-[150px]">
                    {skill.id.includes("@") ? skill.id.split("@")[1] : skill.id}
                  </span>
                </button>
              ))
            )}
          </div>

          {isGitHubRef && (
            <div className="p-2 border-t border-border bg-surface-secondary/40">
              <button
                type="button"
                onClick={handleImportAndAdd}
                disabled={importSkill.isPending}
                className="w-full h-8 flex items-center justify-center gap-1.5 rounded bg-accent hover:opacity-90 text-surface-primary text-xs font-medium"
              >
                {importSkill.isPending ? (
                  <>
                    <Loader2 className="size-3.5 animate-spin" />
                    Importing...
                  </>
                ) : (
                  <>
                    <Plus className="size-3.5" />
                    Import & Add ref
                  </>
                )}
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}