'use client';

import { useState, useRef } from 'react';
import { Download, FileText, Loader2 } from 'lucide-react';
import { Button } from './button';
import { cn } from '../../lib/utils';

export interface ExportDropdownProps {
  onExportCSV: () => void;
  onExportPDF: () => void;
  isExporting?: boolean;
  className?: string;
}

export function ExportDropdown({
  onExportCSV,
  onExportPDF,
  isExporting = false,
  className
}: ExportDropdownProps) {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const handleClickOutside = (e: React.MouseEvent) => {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
      setIsOpen(false);
    }
  };

  return (
    <div className={cn("relative", className)} ref={dropdownRef}>
      <Button
        variant="primary"
        size="sm"
        onClick={() => setIsOpen(!isOpen)}
        disabled={isExporting}
        className="flex items-center gap-2 bg-brand hover:bg-emerald-700"
      >
        {isExporting ? (
          <Loader2 className="h-4 w-4 animate-spin" />
        ) : (
          <Download className="h-4 w-4" />
        )}
        Export
      </Button>
      
      {isOpen && !isExporting && (
        <>
          <div 
            className="fixed inset-0 z-40" 
            onClick={() => setIsOpen(false)}
          />
          <div className="absolute right-0 top-full mt-2 w-48 rounded-lg border border-slate-200 bg-white shadow-lg z-50 overflow-hidden">
            <button
              onClick={() => {
                onExportCSV();
                setIsOpen(false);
              }}
              className="flex w-full items-center gap-3 px-4 py-3 text-sm text-slate-700 hover:bg-slate-50 transition-colors"
            >
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
                <FileText className="h-4 w-4" />
              </div>
              <div className="text-left">
                <div className="font-medium">Export CSV</div>
                <div className="text-xs text-slate-500">Spreadsheet format</div>
              </div>
            </button>
            <button
              onClick={() => {
                onExportPDF();
                setIsOpen(false);
              }}
              className="flex w-full items-center gap-3 px-4 py-3 text-sm text-slate-700 hover:bg-slate-50 transition-colors border-t border-slate-100"
            >
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-red-100 text-red-600">
                <FileText className="h-4 w-4" />
              </div>
              <div className="text-left">
                <div className="font-medium">Export PDF</div>
                <div className="text-xs text-slate-500">Professional report</div>
              </div>
            </button>
          </div>
        </>
      )}
    </div>
  );
}