import React, { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from '@/components/ui/button';
import { FileDown, Loader2 } from 'lucide-react';

export default function CollectionReportDialog({ open, onOpenChange, collections, clientName, statusFilter }) {
  const [isGenerating, setIsGenerating] = useState(false);

  const formatDate = (date) => {
    return new Date(date).toLocaleDateString('en-US', { timeZone: 'America/New_York' });
  };

  const handleExport = async () => {
    setIsGenerating(true);
    try {
      await new Promise(resolve => setTimeout(resolve, 100));
      
      // Placeholder: In production, use generateCollectionReport
      console.log('Generating report for', collections.length, 'collections');
      
      onOpenChange(false);
    } catch (error) {
      console.error("Export failed", error);
    } finally {
      setIsGenerating(false);
    }
  };

  const getStatusLabel = () => {
    if (statusFilter === 'active') return 'Active';
    if (statusFilter === 'resolved') return 'Resolved';
    return 'All';
  };

  const todayEST = formatDate(new Date());

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Export {getStatusLabel()} Financial Report</DialogTitle>
          <DialogDescription>
            Generate a detailed financial breakdown PDF for your {getStatusLabel().toLowerCase()} collections.
          </DialogDescription>
        </DialogHeader>
        
        <div className="py-4 space-y-2 text-sm text-slate-500">
          <p>This report includes financial details for {collections?.length || 0} visible records.</p>
          <div className="bg-slate-50 p-3 rounded border text-xs">
            <strong>Included Columns:</strong>
            <ul className="list-disc pl-4 mt-1 space-y-0.5">
              <li>Owner Name</li>
              <li>Total Amount Owed</li>
              <li>Last Notice Date</li>
              <li>Status</li>
            </ul>
            <p className="mt-2 text-slate-400 italic">Report Date: {todayEST} (EST)</p>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button onClick={handleExport} disabled={isGenerating}>
            {isGenerating ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Generating...
              </>
            ) : (
              <>
                <FileDown className="mr-2 h-4 w-4" />
                Download Report
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}