"use client";

import { useEffect, useRef, useState } from "react";
import { FOCUS_RING_CLASSES, FOCUS_RING_TIGHT_CLASSES, cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

const FORMATS = [
  { format: "xlsx", label: "Excel (.xlsx)" },
  { format: "csv", label: "CSV" },
  { format: "pdf", label: "PDF" },
];

export function ExportDropdown({ baseUrl, query = "" }: { baseUrl: string; query?: string }) {
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    function handlePointerDown(e: MouseEvent) {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
    }
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    document.addEventListener("mousedown", handlePointerDown);
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("mousedown", handlePointerDown);
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [open]);

  const suffix = query ? `&${query}` : "";

  return (
    <div ref={rootRef} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-haspopup="menu"
        aria-expanded={open}
        aria-controls="export-dropdown-menu"
        className={cn(
          "flex items-center gap-2 rounded-full bg-kolabora-primary px-4 py-2 text-sm font-medium text-kolabora-neutral-white transition-opacity hover:opacity-90",
          FOCUS_RING_CLASSES,
        )}
      >
        Download
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
          className={`shrink-0 transition-transform duration-150 ${open ? "rotate-180" : ""}`}
        >
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>

      {open && (
        <div
          id="export-dropdown-menu"
          role="menu"
          className={cn(
            "absolute right-0 top-full z-20 mt-2 w-44 bg-kolabora-neutral-white text-sm shadow-lg",
            cardClasses("p-1.5"),
          )}
        >
          {FORMATS.map((f) => (
            <a
              key={f.format}
              href={`${baseUrl}?format=${f.format}${suffix}`}
              role="menuitem"
              onClick={() => setOpen(false)}
              className={cn(
                "block rounded-lg px-3 py-2 font-medium transition-colors hover:bg-kolabora-neutral-dark/5",
                FOCUS_RING_TIGHT_CLASSES,
              )}
            >
              {f.label}
            </a>
          ))}
        </div>
      )}
    </div>
  );
}