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

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

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

  const isDisabled = !data || data.length === 0;

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    }
    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen]);

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

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

  return (
    <div className={`relative inline-block ${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 && (
        <div className="absolute right-0 mt-1.5 w-52 bg-[#0d121f] border border-slate-700/90 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-md animate-in fade-in-50 zoom-in-95">
          <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>
      )}
    </div>
  );
}