pfm/PostFundManagement.ConsoleUI/src/components/ui/ExportButton.tsx

import React, { useState, useRef, useEffect, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { Download, FileSpreadsheet, FileText, ChevronDown } from 'lucide-react';
import { ExportColumn, exportToSpreadsheet, exportToPdf } from '../../utils/exportUtils';
import { useAuth } from '../../auth/AuthProvider';
import { useRbac, RoleClaim } from '../../auth/rbac';

export interface ExportButtonProps<T = any> {
  title: string;
  subtitle?: string;
  filename: string;
  columns: ExportColumn<T>[];
  data: T[];
  label?: string;
  size?: 'sm' | 'md';
  className?: string;
  claim?: RoleClaim;
}

export function ExportButton<T>({
  title,
  subtitle,
  filename,
  columns,
  data,
  label = 'Export',
  size = 'md',
  className = '',
  claim,
}: ExportButtonProps<T>) {
  const [isOpen, setIsOpen] = useState(false);
  const [menuPosition, setMenuPosition] = useState<{ top: number; right: number } | null>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  const { user, claims, tenantId } = useAuth();
  const { canExport } = useRbac();

  const isClaimAllowed = claim ? canExport(claim) : true;
  const isDisabled = !data || data.length === 0 || !isClaimAllowed;

  const updatePosition = useCallback(() => {
    if (!dropdownRef.current) return;
    const rect = dropdownRef.current.getBoundingClientRect();
    setMenuPosition({
      top: rect.bottom + 8,
      right: Math.max(16, window.innerWidth - rect.right),
    });
  }, []);

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      const target = event.target as Node;
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(target) &&
        (!menuRef.current || !menuRef.current.contains(target))
      ) {
        setIsOpen(false);
      }
    }

    if (isOpen) {
      updatePosition();
      document.addEventListener('mousedown', handleClickOutside);
      window.addEventListener('resize', updatePosition);
      window.addEventListener('scroll', updatePosition, true);
    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      window.removeEventListener('resize', updatePosition);
      window.removeEventListener('scroll', updatePosition, true);
    };
  }, [isOpen, updatePosition]);

  const handleExportSpreadsheet = async () => {
    if (isDisabled) return;
    setIsOpen(false);
    await exportToSpreadsheet({
      title,
      subtitle,
      filename,
      columns,
      data,
      tenantName: (claims as any)?.tenant_name || (claims as any)?.tenant || `Tenant #${tenantId || 1}`,
      userEmail: (user as any)?.profile?.email || user?.email || (claims as any)?.email || '',
    });
  };

  const handleExportPdf = async () => {
    if (isDisabled) return;
    setIsOpen(false);
    await exportToPdf({
      title,
      subtitle,
      filename,
      columns,
      data,
      tenantName: (claims as any)?.tenant_name || (claims as any)?.tenant || `Tenant #${tenantId || 1}`,
      userEmail: (user as any)?.profile?.email || user?.email || (claims as any)?.email || '',
    });
  };

  return (
    <div className={`relative inline-block ${isOpen ? 'z-[9999]' : 'z-30'} ${className}`} ref={dropdownRef}>
      <button
        type="button"
        onClick={() => !isDisabled && setIsOpen(!isOpen)}
        disabled={isDisabled}
        title={
          isDisabled
            ? 'No data available to export in current view'
            : `Export ${data.length} records to Spreadsheet or PDF`
        }
        className={`inline-flex items-center justify-center gap-1.5 font-semibold rounded-xl border transition cursor-pointer shadow-xs ${
          size === 'sm' ? 'px-3 py-1.5 text-xs' : 'px-3.5 py-2 text-xs'
        } ${
          isDisabled
            ? 'text-slate-600 bg-slate-900/40 border-slate-800/80 cursor-not-allowed opacity-60'
            : 'text-slate-300 bg-[#0d121f] hover:bg-slate-800 border-slate-700/80 hover:text-white'
        }`}
      >
        <Download className={`w-3.5 h-3.5 ${isDisabled ? 'text-slate-600' : 'text-emerald-400'}`} />
        <span>{label}</span>
        <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
      </button>

      {isOpen && !isDisabled && menuPosition && typeof document !== 'undefined' &&
        createPortal(
          <div
            ref={menuRef}
            style={{
              position: 'fixed',
              top: `${menuPosition.top}px`,
              right: `${menuPosition.right}px`,
              zIndex: 999999,
            }}
            className="w-56 bg-[#0d121f] border border-slate-700/90 rounded-xl shadow-2xl overflow-hidden backdrop-blur-md animate-in fade-in-50 zoom-in-95 ring-1 ring-black/40"
          >
            <div className="p-2 border-b border-slate-800/80">
              <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 px-2 block">
                Export Format ({data.length} items)
              </span>
            </div>
            <div className="p-1 space-y-0.5">
              <button
                type="button"
                onClick={handleExportSpreadsheet}
                className="w-full flex items-center gap-2.5 px-3 py-2 text-xs text-left text-slate-200 hover:text-white hover:bg-emerald-500/15 rounded-lg transition-colors cursor-pointer group"
              >
                <div className="w-6 h-6 rounded-md bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center shrink-0 group-hover:bg-emerald-500/20">
                  <FileSpreadsheet className="w-3.5 h-3.5 text-emerald-400" />
                </div>
                <div>
                  <span className="font-semibold block leading-tight">Spreadsheet (.xlsx)</span>
                  <span className="text-[10px] text-slate-400">Excel / Google Sheets</span>
                </div>
              </button>

              <button
                type="button"
                onClick={handleExportPdf}
                className="w-full flex items-center gap-2.5 px-3 py-2 text-xs text-left text-slate-200 hover:text-white hover:bg-blue-500/15 rounded-lg transition-colors cursor-pointer group"
              >
                <div className="w-6 h-6 rounded-md bg-blue-500/10 border border-blue-500/20 flex items-center justify-center shrink-0 group-hover:bg-blue-500/20">
                  <FileText className="w-3.5 h-3.5 text-blue-400" />
                </div>
                <div>
                  <span className="font-semibold block leading-tight">PDF Document (.pdf)</span>
                  <span className="text-[10px] text-slate-400">Landscape with PFM Logo</span>
                </div>
              </button>
            </div>
          </div>,
          document.body
        )
      }
    </div>
  );
}