"use client";

import { useRef } from "react";
import { useClickOutside } from "@/hooks/useClickOutside";
import { DocumentIcon } from "../dashboard/icons";
import { exportRowsToCsv, exportRowsToPdf, type ExportColumn } from "./export-utils";

export default function ExportDropdown<T>({
  open,
  onClose,
  allRows,
  selectedRows,
  columns,
  fileName,
  title,
}: {
  open: boolean;
  onClose: () => void;
  allRows: T[];
  selectedRows: T[];
  columns: ExportColumn<T>[];
  fileName: string;
  title: string;
}) {
  const ref = useRef<HTMLDivElement | null>(null);

  useClickOutside(ref, onClose, open);

  if (!open) return null;

  const rowsToExport = selectedRows.length > 0 ? selectedRows : allRows;

  return (
    <div
      ref={ref}
      className="absolute right-0 top-[calc(100%+8px)] z-50 w-[140px] rounded-xl border border-[#E4E7EC] bg-white p-3 shadow-[0_12px_28px_rgba(15,23,42,0.14)]"
    >
      <p className="text-[12px] font-medium text-[#667085]">Export as</p>
      <div className="mt-2 space-y-1">
        <button
          type="button"
          onClick={() => {
            exportRowsToPdf(rowsToExport, columns, fileName, title);
            onClose();
          }}
          className="flex w-full items-center gap-2 rounded-lg px-1.5 py-1.5 text-left text-[14px] font-medium text-[#101828] transition-colors hover:bg-[#F5F7F9]"
        >
          <span className="relative flex h-4 w-4 items-center justify-center text-[#DC2626]">
            <DocumentIcon className="h-4 w-4" />
            <span className="absolute bottom-[-2px] text-[5px] font-bold leading-none">PDF</span>
          </span>
          PDF
        </button>
        <button
          type="button"
          onClick={() => {
            exportRowsToCsv(rowsToExport, columns, fileName);
            onClose();
          }}
          className="flex w-full items-center gap-2 rounded-lg px-1.5 py-1.5 text-left text-[14px] font-medium text-[#101828] transition-colors hover:bg-[#F5F7F9]"
        >
          <span className="relative flex h-4 w-4 items-center justify-center text-[#16A34A]">
            <DocumentIcon className="h-4 w-4" />
            <span className="absolute bottom-[-2px] text-[5px] font-bold leading-none">CSV</span>
          </span>
          CSV
        </button>
      </div>
    </div>
  );
}