"use client";
import { useEffect, useRef, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Plus, Minus, X, Loader2, Sparkles } from "lucide-react";
import { CategoryIcon } from "./CategoryIcon";
import { useActressSelection } from "./ActressSelectionProvider";
import {
  bulkAddCategory,
  bulkRemoveCategory,
  createActressCategory,
} from "@/app/actions/actressCategories";
import type { ActressCategory } from "@/lib/db/queries";

const PALETTE = ["#fbbf24", "#22d3ee", "#a78bfa", "#f472b6", "#34d399", "#fb7185", "#f97316", "#60a5fa"];

export function ActressBulkBar({ categories }: { categories: ActressCategory[] }) {
  const sel = useActressSelection();
  const router = useRouter();
  const [, start] = useTransition();
  const [busy, setBusy] = useState(false);
  const [openMenu, setOpenMenu] = useState<"add" | "remove" | null>(null);
  const [creating, setCreating] = useState(false);
  const [newName, setNewName] = useState("");
  const [newColor, setNewColor] = useState(PALETTE[0]);
  const ref = useRef<HTMLDivElement>(null);

  // Click outside to close menus.
  useEffect(() => {
    const onDoc = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpenMenu(null);
        setCreating(false);
      }
    };
    if (openMenu || creating) document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [openMenu, creating]);

  const empty = sel.ids.size === 0;
  const selectedIds = Array.from(sel.ids);

  function runAdd(categoryId: number) {
    setBusy(true);
    setOpenMenu(null);
    start(async () => {
      try {
        await bulkAddCategory(selectedIds, categoryId);
        router.refresh();
      } finally {
        setBusy(false);
      }
    });
  }

  function runRemove(categoryId: number) {
    setBusy(true);
    setOpenMenu(null);
    start(async () => {
      try {
        await bulkRemoveCategory(selectedIds, categoryId);
        router.refresh();
      } finally {
        setBusy(false);
      }
    });
  }

  async function createAndAdd() {
    if (busy) return;
    const name = newName.trim();
    if (!name) return;
    setBusy(true);
    try {
      const created = await createActressCategory({ name, color: newColor, icon: "tag", priority: 50 });
      if (created) {
        await bulkAddCategory(selectedIds, created.id);
        router.refresh();
      }
      setCreating(false);
      setNewName("");
      setOpenMenu(null);
    } catch (err) {
      console.error("[createAndAdd] failed:", err);
    } finally {
      setBusy(false);
    }
  }

  return (
    <div
      ref={ref}
      aria-hidden={empty}
      className={`flex items-center gap-2 px-2.5 py-1 rounded-full border border-[var(--color-cyan)]/40 bg-[var(--color-cyan)]/5 transition-opacity ${empty ? "invisible" : ""}`}
    >
      <div className="flex items-center gap-1.5 px-1">
        <Sparkles className="w-3.5 h-3.5 text-[var(--color-cyan)]" />
        <span className="text-xs font-medium tabular-nums">{sel.ids.size}</span>
        <span className="text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)]">selected</span>
      </div>

      <div className="relative">
        <button
          type="button"
          onClick={() => { setOpenMenu(openMenu === "add" ? null : "add"); setCreating(false); }}
          disabled={busy}
          className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-full glass glass-hover disabled:opacity-50"
        >
          {busy && openMenu !== "remove" ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Plus className="w-3.5 h-3.5" />}
          Add
        </button>
        {openMenu === "add" && (
          <Menu>
            {categories.map((c) => (
              <MenuItem key={c.id} onClick={() => runAdd(c.id)} icon={<CategoryIcon name={c.icon} className="w-3.5 h-3.5" />} color={c.color}>
                {c.name}
              </MenuItem>
            ))}
            <div className="border-t border-[var(--color-glass-border)] my-1" />
            {creating ? (
              <div className="px-2 py-2 space-y-2">
                <input
                  autoFocus
                  value={newName}
                  onChange={(e) => setNewName(e.target.value)}
                  onKeyDown={(e) => { if (e.key === "Enter") createAndAdd(); if (e.key === "Escape") setCreating(false); }}
                  placeholder="Category name"
                  maxLength={32}
                  className="w-full glass rounded-md px-2 py-1.5 text-sm outline-none focus:border-[var(--color-cyan)]"
                />
                <div className="flex flex-wrap gap-1">
                  {PALETTE.map((p) => (
                    <button
                      key={p}
                      type="button"
                      onClick={() => setNewColor(p)}
                      className={`w-5 h-5 rounded-full border-2 ${newColor === p ? "border-white" : "border-transparent"}`}
                      style={{ background: p }}
                      aria-label={`Color ${p}`}
                    />
                  ))}
                </div>
                <div className="flex items-center gap-1.5">
                  <button
                    type="button"
                    onClick={() => setCreating(false)}
                    className="flex-1 text-xs px-2 py-1.5 rounded-md glass glass-hover"
                  >
                    Cancel
                  </button>
                  <button
                    type="button"
                    onClick={createAndAdd}
                    disabled={!newName.trim() || busy}
                    className="flex-1 text-xs px-2 py-1.5 rounded-md bg-[var(--color-cyan)] text-black font-medium disabled:opacity-50"
                  >
                    Create & Assign
                  </button>
                </div>
              </div>
            ) : (
              <button
                type="button"
                onClick={() => setCreating(true)}
                className="w-full flex items-center gap-2 text-xs px-3 py-2 hover:bg-[var(--color-glass)] text-[var(--color-cyan)]"
              >
                <Plus className="w-3.5 h-3.5" /> New Category…
              </button>
            )}
          </Menu>
        )}
      </div>

      <div className="relative">
        <button
          type="button"
          onClick={() => { setOpenMenu(openMenu === "remove" ? null : "remove"); setCreating(false); }}
          disabled={busy}
          className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-full glass glass-hover disabled:opacity-50"
        >
          {busy && openMenu === "remove" ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Minus className="w-3.5 h-3.5" />}
          Remove
        </button>
        {openMenu === "remove" && (
          <Menu>
            {categories.map((c) => (
              <MenuItem key={c.id} onClick={() => runRemove(c.id)} icon={<CategoryIcon name={c.icon} className="w-3.5 h-3.5" />} color={c.color}>
                {c.name}
              </MenuItem>
            ))}
          </Menu>
        )}
      </div>

      <button
        type="button"
        onClick={() => sel.clear()}
        title="Clear selection"
        className="flex items-center gap-1 text-xs px-2 py-1 rounded-full text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
      >
        <X className="w-3.5 h-3.5" />
      </button>
    </div>
  );
}

function Menu({ children }: { children: React.ReactNode }) {
  return (
    <div className="absolute top-full mt-2 left-0 min-w-[220px] rounded-xl border border-[var(--color-glass-border)] bg-[var(--color-bg-0)] shadow-2xl py-1 overflow-hidden max-h-[60vh] overflow-y-auto">
      {children}
    </div>
  );
}

function MenuItem({
  icon, color, children, onClick,
}: { icon?: React.ReactNode; color?: string | null; children: React.ReactNode; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="w-full flex items-center gap-2 text-sm px-3 py-2 hover:bg-[var(--color-glass)] text-left"
      style={color ? { color } : undefined}
    >
      <span className="shrink-0">{icon}</span>
      <span className="truncate">{children}</span>
    </button>
  );
}