"use client";

import { useState, useEffect, useRef } from "react";
import { useTags, useAddTransactionTag, useRemoveTransactionTag } from "@/lib/hooks";
import type { TagRow } from "@/lib/queries";

interface Props {
  transactionId: number;
  currentTags: TagRow[];
}

export function TagPicker({ transactionId, currentTags }: Props) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const { data: allTags } = useTags();
  const addTag = useAddTransactionTag();
  const removeTag = useRemoveTransactionTag();

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

  const currentIds = new Set(currentTags.map((t) => t.id));

  const toggle = (tag: TagRow) => {
    if (currentIds.has(tag.id)) {
      removeTag.mutate({ transactionId, tagId: tag.id });
    } else {
      addTag.mutate({ transactionId, tagId: tag.id });
    }
  };

  return (
    <div ref={ref} className="relative inline-block">
      <button
        onClick={() => setOpen((o) => !o)}
        className="text-zinc-600 hover:text-zinc-300 transition-colors text-xs px-1"
        title="Add tag"
      >
        +
      </button>
      {open && (
        <div className="absolute right-0 top-full mt-1 z-50 bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl w-44 py-1">
          {!allTags?.length ? (
            <p className="px-3 py-2 text-xs text-zinc-500">No tags yet — create on Tags page</p>
          ) : (
            allTags.map((tag) => {
              const active = currentIds.has(tag.id);
              return (
                <button
                  key={tag.id}
                  onClick={() => toggle(tag)}
                  className="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-zinc-800 transition-colors"
                >
                  <span
                    className="w-2.5 h-2.5 rounded-full flex-shrink-0"
                    style={{ backgroundColor: tag.color }}
                  />
                  <span className={active ? "text-white" : "text-zinc-400"}>{tag.name}</span>
                  {active && <span className="ml-auto text-zinc-500">✓</span>}
                </button>
              );
            })
          )}
        </div>
      )}
    </div>
  );
}
