import { useState } from 'react';
import { Download, FileText, Table, BarChart } from 'lucide-react';
import { exportTradesToCSV, exportPortfolioSummary, exportAnalyticsReport } from '@/utils/export';
import type { Portfolio } from '@/types';

interface ExportMenuProps {
  portfolio: Portfolio;
  analytics: any;
}

export default function ExportMenu({ portfolio, analytics }: ExportMenuProps) {
  const [isOpen, setIsOpen] = useState(false);

  const handleExportCSV = () => {
    exportTradesToCSV(portfolio.trades, portfolio);
    setIsOpen(false);
  };

  const handleExportJSON = () => {
    exportPortfolioSummary(portfolio);
    setIsOpen(false);
  };

  const handleExportReport = () => {
    exportAnalyticsReport(portfolio, analytics);
    setIsOpen(false);
  };

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-3 py-2 bg-dark-surface rounded-md hover:bg-dark-hover transition-colors"
      >
        <Download className="w-4 h-4" />
        <span className="text-sm">Export</span>
      </button>

      {isOpen && (
        <>
          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />

          <div className="absolute top-full mt-2 right-0 w-64 bg-dark-surface border border-dark-border rounded-lg shadow-xl z-50">
            <div className="p-2">
              <button
                onClick={handleExportCSV}
                className="w-full flex items-center gap-3 px-3 py-2 hover:bg-dark-hover rounded transition-colors text-left"
              >
                <Table className="w-4 h-4 text-green-500" />
                <div>
                  <p className="text-sm font-medium">Export to CSV</p>
                  <p className="text-xs text-gray-400">All trades data</p>
                </div>
              </button>

              <button
                onClick={handleExportJSON}
                className="w-full flex items-center gap-3 px-3 py-2 hover:bg-dark-hover rounded transition-colors text-left mt-1"
              >
                <FileText className="w-4 h-4 text-blue-500" />
                <div>
                  <p className="text-sm font-medium">Export to JSON</p>
                  <p className="text-xs text-gray-400">Portfolio summary</p>
                </div>
              </button>

              <button
                onClick={handleExportReport}
                className="w-full flex items-center gap-3 px-3 py-2 hover:bg-dark-hover rounded transition-colors text-left mt-1"
              >
                <BarChart className="w-4 h-4 text-purple-500" />
                <div>
                  <p className="text-sm font-medium">Analytics Report</p>
                  <p className="text-xs text-gray-400">Full text report</p>
                </div>
              </button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}
