
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { getNoticeColor } from '@/lib/ViolationNoticeProgressionHelper';
import { Calendar, MapPin, AlertCircle, FileText, Download } from 'lucide-react';
import jsPDF from 'jspdf';
import 'jspdf-autotable';
import { getHighQualityPdfSettings } from '@/lib/pdfQualityUtils';

export function ViolationNoticeProgressionReport({ violations, propertyAddress, ownerName, onExport }) {
  
  const handleExportPdf = () => {
    if (onExport) {
        onExport();
        return;
    }

    const doc = new jsPDF(getHighQualityPdfSettings());
    const pageWidth = doc.internal.pageSize.getWidth();
    
    doc.setFontSize(20);
    doc.setTextColor(33, 33, 33);
    doc.text('Violation Notice Report', 14, 20);
    
    doc.setFontSize(10);
    doc.setTextColor(100, 100, 100);
    doc.text(`Generated on ${new Date().toLocaleDateString()}`, 14, 26);

    doc.setFillColor(245, 247, 250);
    doc.rect(14, 32, pageWidth - 28, 24, 'F');
    doc.setFontSize(12);
    doc.setTextColor(0, 0, 0);
    doc.text(`Property: ${propertyAddress || 'N/A'}`, 20, 42);
    doc.text(`Owner: ${ownerName || 'N/A'}`, 20, 50);

    const tableData = violations.map(v => [
        new Date(v.created_at).toLocaleDateString(),
        v.notice_level || 'First Notice',
        v.violation_type,
        v.status,
        v.notes || '-'
    ]);

    doc.autoTable({
        startY: 65,
        head: [['Date', 'Notice Level', 'Violation Type', 'Status', 'Notes']],
        body: tableData,
        theme: 'grid',
        headStyles: { fillColor: [41, 128, 185], textColor: 255 },
        styles: { fontSize: 9, cellPadding: 3 },
        columnStyles: {
            0: { cellWidth: 25 },
            1: { cellWidth: 30 },
            4: { cellWidth: 'auto' }
        }
    });

    doc.save(`Violation_Report_${propertyAddress?.replace(/\s+/g, '_') || 'Export'}.pdf`);
  };

  return (
    <div className="space-y-6">
       <div className="flex justify-between items-center bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
         <div>
            <h3 className="font-semibold text-lg text-slate-800">Notice Progression Report</h3>
            <p className="text-sm text-slate-500">{violations?.length || 0} violations recorded for this property</p>
         </div>
         <Button onClick={handleExportPdf} variant="outline" className="flex items-center gap-2">
            <Download className="w-4 h-4" /> Export PDF
         </Button>
       </div>

       <div className="relative border-l-2 border-slate-200 ml-4 space-y-8 py-4">
          {violations?.map((violation, index) => (
             <div key={violation.id} className="relative pl-8">
                <div className={`absolute -left-[9px] top-0 w-4 h-4 rounded-full border-2 border-white ring-1 ring-slate-200 ${
                    violation.status === 'resolved' ? 'bg-green-500' : 'bg-blue-500'
                }`} />
                
                <Card className="hover:shadow-md transition-shadow">
                   <CardHeader className="pb-2">
                      <div className="flex justify-between items-start">
                         <div>
                            <CardTitle className="text-base font-bold flex items-center gap-2">
                               {violation.violation_type}
                            </CardTitle>
                            <div className="flex items-center gap-2 mt-1 text-sm text-slate-500">
                               <Calendar className="w-3.5 h-3.5" />
                               {new Date(violation.created_at).toLocaleDateString()}
                            </div>
                         </div>
                         <Badge className={getNoticeColor(violation.notice_level)}>
                            {violation.notice_level || 'First Notice'}
                         </Badge>
                      </div>
                   </CardHeader>
                   <CardContent className="text-sm space-y-2">
                      <div className="flex items-start gap-2">
                         <AlertCircle className="w-4 h-4 text-slate-400 mt-0.5 shrink-0" />
                         <span className="text-slate-700">{violation.notes || 'No specific notes recorded.'}</span>
                      </div>
                      <div className="flex gap-2 mt-2">
                         <Badge variant="outline">{violation.status}</Badge>
                         {violation.priority && <Badge variant="outline" className="capitalize">{violation.priority} Priority</Badge>}
                      </div>
                   </CardContent>
                </Card>
             </div>
          ))}
       </div>
    </div>
  );
}
