"use client";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/app/shadcn_components/ui/dropdown-menu";
import {
  ChevronDownIcon,
  DocumentArrowUpIcon,
  PlusIcon,
  MinusIcon,
  TagIcon,
} from "@heroicons/react/24/outline";

/**
 * The single Tags entry point in the property-table toolbar (ADR-0013): a
 * dropdown offering the three bulk-tag paths. Upload opens the file modal;
 * Assign / Remove enter a contextual mode (TagActionBar) that operates on the
 * row selection or the active filter. Consolidates what was an isolated button.
 */
export function TagsMenu({
  onUpload,
  onAssign,
  onRemove,
}: {
  onUpload: () => void;
  onAssign: () => void;
  onRemove: () => void;
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="flex items-center gap-1.5 h-8 px-3 rounded-lg border border-slate-200 bg-white text-xs font-semibold text-primary hover:bg-slate-50 transition">
          <TagIcon className="h-3.5 w-3.5" />
          Tags
          <ChevronDownIcon className="h-3.5 w-3.5 opacity-70" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-72 p-1.5">
        <Item
          icon={<DocumentArrowUpIcon className="h-[18px] w-[18px]" />}
          title="Upload tags from file"
          desc="Match a spreadsheet of IDs to a tag"
          onSelect={onUpload}
        />
        <Item
          icon={<PlusIcon className="h-[18px] w-[18px]" />}
          title="Assign a tag"
          desc="Apply a tag to selected rows or your filtered results"
          onSelect={onAssign}
        />
        <Item
          icon={<MinusIcon className="h-[18px] w-[18px]" />}
          title="Remove a tag"
          desc="Take a tag off selected rows or your filtered results"
          onSelect={onRemove}
        />
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

function Item({
  icon,
  title,
  desc,
  onSelect,
}: {
  icon: React.ReactNode;
  title: string;
  desc: string;
  onSelect: () => void;
}) {
  return (
    <DropdownMenuItem
      className="flex items-start gap-3 cursor-pointer rounded-lg p-3"
      onSelect={onSelect}
    >
      <span className="mt-0.5 shrink-0 text-gray-700">{icon}</span>
      <span className="flex-1">
        <span className="block text-sm font-semibold text-gray-900">{title}</span>
        <span className="block text-xs text-slate-400">{desc}</span>
      </span>
    </DropdownMenuItem>
  );
}
