'use client';

import React, { useState, useEffect, useRef } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { Card } from 'primereact/card';
import { Toast } from 'primereact/toast';
import { Toolbar } from 'primereact/toolbar';
import { Tag } from 'primereact/tag';
import { Dialog } from 'primereact/dialog';
import { Calendar } from 'primereact/calendar';
import { InputTextarea } from 'primereact/inputtextarea';
import { Dropdown } from 'primereact/dropdown';
import { Chip } from 'primereact/chip';
import { Divider } from 'primereact/divider';
import { factureService } from '../../../../services/api';
import { formatDate, formatCurrency } from '../../../../utils/formatters';
import type { Facture } from '../../../../types/btp';

const FacturesPayeesPage = () => {
    const [factures, setFactures] = useState<Facture[]>([]);
    const [loading, setLoading] = useState(true);
    const [globalFilter, setGlobalFilter] = useState('');
    const [selectedFactures, setSelectedFactures] = useState<Facture[]>([]);
    const [detailDialog, setDetailDialog] = useState(false);
    const [selectedFacture, setSelectedFacture] = useState<Facture | null>(null);
    const [filterPeriod, setFilterPeriod] = useState('ALL');
    const [dateRange, setDateRange] = useState<Date[]>([]);
    const toast = useRef<Toast>(null);
    const dt = useRef<DataTable<Facture[]>>(null);

    const periodOptions = [
        { label: 'Toutes les factures', value: 'ALL' },
        { label: 'Ce mois-ci', value: 'THIS_MONTH' },
        { label: 'Mois dernier', value: 'LAST_MONTH' },
        { label: 'Ce trimestre', value: 'THIS_QUARTER' },
        { label: 'Cette année', value: 'THIS_YEAR' },
        { label: 'Période personnalisée', value: 'CUSTOM' }
    ];

    useEffect(() => {
        loadFactures();
    }, [filterPeriod, dateRange]);

    const loadFactures = async () => {
        try {
            setLoading(true);
            const data = await factureService.getAll();
            // Filtrer les factures payées
            let facturesPayees = data.filter(facture => 
                facture.statut === 'PAYEE' && facture.datePaiement
            );

            // Appliquer le filtre de période
            facturesPayees = applyPeriodFilter(facturesPayees);
            
            setFactures(facturesPayees);
        } catch (error) {
            console.error('Erreur lors du chargement des factures:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Impossible de charger les factures payées',
                life: 3000
            });
        } finally {
            setLoading(false);
        }
    };

    const applyPeriodFilter = (facturesList: Facture[]) => {
        const now = new Date();
        
        switch (filterPeriod) {
            case 'THIS_MONTH':
                return facturesList.filter(f => {
                    const paymentDate = new Date(f.datePaiement!);
                    return paymentDate.getMonth() === now.getMonth() && 
                           paymentDate.getFullYear() === now.getFullYear();
                });
                
            case 'LAST_MONTH':
                const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1);
                return facturesList.filter(f => {
                    const paymentDate = new Date(f.datePaiement!);
                    return paymentDate.getMonth() === lastMonth.getMonth() && 
                           paymentDate.getFullYear() === lastMonth.getFullYear();
                });
                
            case 'THIS_QUARTER':
                const quarterStart = new Date(now.getFullYear(), Math.floor(now.getMonth() / 3) * 3, 1);
                return facturesList.filter(f => {
                    const paymentDate = new Date(f.datePaiement!);
                    return paymentDate >= quarterStart && paymentDate <= now;
                });
                
            case 'THIS_YEAR':
                return facturesList.filter(f => {
                    const paymentDate = new Date(f.datePaiement!);
                    return paymentDate.getFullYear() === now.getFullYear();
                });
                
            case 'CUSTOM':
                if (dateRange.length === 2) {
                    return facturesList.filter(f => {
                        const paymentDate = new Date(f.datePaiement!);
                        return paymentDate >= dateRange[0] && paymentDate <= dateRange[1];
                    });
                }
                return facturesList;
                
            default:
                return facturesList;
        }
    };

    const getDaysToPayment = (dateEmission: string | Date, datePaiement: string | Date) => {
        const emissionDate = new Date(dateEmission);
        const paymentDate = new Date(datePaiement);
        const diffTime = paymentDate.getTime() - emissionDate.getTime();
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        return diffDays;
    };

    const getPaymentPerformance = (dateEcheance: string | Date, datePaiement: string | Date) => {
        const dueDate = new Date(dateEcheance);
        const paymentDate = new Date(datePaiement);
        const diffTime = paymentDate.getTime() - dueDate.getTime();
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        
        if (diffDays < 0) return { status: 'EN AVANCE', days: Math.abs(diffDays), severity: 'success' as const };
        if (diffDays === 0) return { status: 'À L\'ÉCHÉANCE', days: 0, severity: 'info' as const };
        return { status: 'EN RETARD', days: diffDays, severity: 'warning' as const };
    };

    const viewDetails = (facture: Facture) => {
        setSelectedFacture(facture);
        setDetailDialog(true);
    };

    const exportCSV = () => {
        dt.current?.exportCSV();
    };

    const generatePaymentReport = () => {
        const totalReceived = factures.reduce((sum, f) => sum + (f.montantTTC || 0), 0);
        const avgPaymentTime = factures.length > 0 ? 
            factures.reduce((sum, f) => sum + getDaysToPayment(f.dateEmission, f.datePaiement!), 0) / factures.length : 0;
        
        const onTimePayments = factures.filter(f => {
            const perf = getPaymentPerformance(f.dateEcheance, f.datePaiement!);
            return perf.status !== 'EN RETARD';
        });
        
        const earlyPayments = factures.filter(f => {
            const perf = getPaymentPerformance(f.dateEcheance, f.datePaiement!);
            return perf.status === 'EN AVANCE';
        });
        
        const report = `
=== RAPPORT ENCAISSEMENTS ===
Période: ${getPeriodLabel()}
Date du rapport: ${new Date().toLocaleDateString('fr-FR')}

STATISTIQUES GÉNÉRALES:
- Nombre de factures payées: ${factures.length}
- Montant total encaissé: ${formatCurrency(totalReceived)}
- Montant moyen par facture: ${formatCurrency(totalReceived / (factures.length || 1))}
- Délai moyen de paiement: ${Math.round(avgPaymentTime)} jours

PERFORMANCE DE PAIEMENT:
- Paiements à l'heure: ${onTimePayments.length} (${Math.round((onTimePayments.length / factures.length) * 100)}%)
- Paiements en avance: ${earlyPayments.length} (${Math.round((earlyPayments.length / factures.length) * 100)}%)
- Taux de ponctualité: ${Math.round((onTimePayments.length / factures.length) * 100)}%

RÉPARTITION PAR MOIS:
${getMonthlyBreakdown()}

ANALYSE PAR CLIENT:
${getClientPaymentAnalysis()}

TOP 5 PLUS GROSSES FACTURES:
${factures
    .sort((a, b) => (b.montantTTC || 0) - (a.montantTTC || 0))
    .slice(0, 5)
    .map(f => `- ${f.numero}: ${formatCurrency(f.montantTTC || 0)} - ${f.client ? `${f.client.prenom} ${f.client.nom}` : 'N/A'} - ${formatDate(f.datePaiement!)}`)
    .join('\n')}

CLIENTS LES PLUS PONCTUELS:
${getBestPayingClients()}

RECOMMANDATIONS:
- Maintenir les bonnes relations avec les clients ponctuels
- Analyser les facteurs de succès pour améliorer les délais globaux
- Proposer des remises pour paiement anticipé
- Utiliser cette base pour évaluer la solvabilité des clients
        `;
        
        const blob = new Blob([report], { type: 'text/plain;charset=utf-8;' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = `rapport_encaissements_${new Date().toISOString().split('T')[0]}.txt`;
        link.click();
        
        toast.current?.show({
            severity: 'success',
            summary: 'Rapport généré',
            detail: 'Le rapport d\'encaissements a été téléchargé',
            life: 3000
        });
    };

    const getPeriodLabel = () => {
        switch (filterPeriod) {
            case 'THIS_MONTH': return 'Ce mois-ci';
            case 'LAST_MONTH': return 'Mois dernier';
            case 'THIS_QUARTER': return 'Ce trimestre';
            case 'THIS_YEAR': return 'Cette année';
            case 'CUSTOM': 
                return dateRange.length === 2 ? 
                    `Du ${formatDate(dateRange[0])} au ${formatDate(dateRange[1])}` : 
                    'Période personnalisée';
            default: return 'Toutes les factures';
        }
    };

    const getMonthlyBreakdown = () => {
        const months = {};
        factures.forEach(f => {
            const month = new Date(f.datePaiement!).toLocaleDateString('fr-FR', { year: 'numeric', month: 'long' });
            if (!months[month]) {
                months[month] = { count: 0, value: 0 };
            }
            months[month].count++;
            months[month].value += f.montantTTC || 0;
        });
        
        return Object.entries(months)
            .sort((a, b) => new Date(a[0]).getTime() - new Date(b[0]).getTime())
            .map(([month, data]: [string, any]) => `- ${month}: ${data.count} factures, ${formatCurrency(data.value)}`)
            .join('\n');
    };

    const getClientPaymentAnalysis = () => {
        const clientStats = {};
        factures.forEach(f => {
            if (f.client) {
                const clientKey = `${f.client.prenom} ${f.client.nom}`;
                if (!clientStats[clientKey]) {
                    clientStats[clientKey] = { count: 0, value: 0, totalDays: 0 };
                }
                clientStats[clientKey].count++;
                clientStats[clientKey].value += f.montantTTC || 0;
                clientStats[clientKey].totalDays += getDaysToPayment(f.dateEmission, f.datePaiement!);
            }
        });
        
        return Object.entries(clientStats)
            .sort((a: [string, any], b: [string, any]) => b[1].value - a[1].value)
            .slice(0, 5)
            .map(([client, data]: [string, any]) => `- ${client}: ${data.count} factures, ${formatCurrency(data.value)}, délai moyen: ${Math.round(data.totalDays / data.count)} jours`)
            .join('\n');
    };

    const getBestPayingClients = () => {
        const clientStats = {};
        factures.forEach(f => {
            if (f.client) {
                const clientKey = `${f.client.prenom} ${f.client.nom}`;
                if (!clientStats[clientKey]) {
                    clientStats[clientKey] = { onTime: 0, total: 0 };
                }
                clientStats[clientKey].total++;
                const perf = getPaymentPerformance(f.dateEcheance, f.datePaiement!);
                if (perf.status !== 'EN RETARD') {
                    clientStats[clientKey].onTime++;
                }
            }
        });
        
        return Object.entries(clientStats)
            .filter(([_, data]: [string, any]) => data.total >= 2) // Au moins 2 factures
            .sort((a: [string, any], b: [string, any]) => (b[1].onTime / b[1].total) - (a[1].onTime / a[1].total))
            .slice(0, 5)
            .map(([client, data]: [string, any]) => `- ${client}: ${Math.round((data.onTime / data.total) * 100)}% ponctuel (${data.onTime}/${data.total})`)
            .join('\n');
    };

    const leftToolbarTemplate = () => {
        return (
            <div className="my-2 flex gap-2 align-items-center">
                <h5 className="m-0 flex align-items-center text-green-600">
                    <i className="pi pi-check-circle mr-2"></i>
                    Factures payées ({factures.length})
                </h5>
                <Chip 
                    label={`Total encaissé: ${formatCurrency(factures.reduce((sum, f) => sum + (f.montantTTC || 0), 0))}`} 
                    className="bg-green-100 text-green-800"
                />
                <Dropdown 
                    value={filterPeriod} 
                    options={periodOptions} 
                    onChange={(e) => setFilterPeriod(e.value)} 
                    className="w-12rem"
                />
                {filterPeriod === 'CUSTOM' && (
                    <Calendar 
                        value={dateRange} 
                        onChange={(e) => setDateRange(e.value as Date[])} 
                        selectionMode="range" 
                        placeholder="Sélectionner la période"
                        className="w-15rem"
                    />
                )}
                <Button 
                    label="Rapport d'encaissements" 
                    icon="pi pi-chart-bar" 
                    severity="success" 
                    size="small"
                    onClick={generatePaymentReport}
                />
            </div>
        );
    };

    const rightToolbarTemplate = () => {
        return (
            <Button 
                label="Exporter" 
                icon="pi pi-upload" 
                severity="help" 
                onClick={exportCSV} 
            />
        );
    };

    const actionBodyTemplate = (rowData: Facture) => {
        return (
            <div className="flex gap-1">
                <Button 
                    icon="pi pi-eye" 
                    rounded 
                    severity="info" 
                    size="small"
                    tooltip="Voir détails du paiement"
                    onClick={() => viewDetails(rowData)}
                />
                <Button 
                    icon="pi pi-print" 
                    rounded 
                    severity="help" 
                    size="small"
                    tooltip="Imprimer reçu"
                    onClick={() => {
                        toast.current?.show({
                            severity: 'info',
                            summary: 'Impression',
                            detail: `Impression du reçu pour ${rowData.numero}`,
                            life: 3000
                        });
                    }}
                />
                <Button 
                    icon="pi pi-file-pdf" 
                    rounded 
                    severity={"secondary" as any} 
                    size="small"
                    tooltip="Générer attestation de paiement"
                    onClick={() => {
                        toast.current?.show({
                            severity: 'success',
                            summary: 'Attestation',
                            detail: `Attestation générée pour ${rowData.numero}`,
                            life: 3000
                        });
                    }}
                />
            </div>
        );
    };

    const statusBodyTemplate = (rowData: Facture) => {
        const performance = getPaymentPerformance(rowData.dateEcheance, rowData.datePaiement!);
        
        return (
            <div className="flex align-items-center gap-2">
                <Tag value="Payée" severity="success" />
                <Tag 
                    value={performance.status} 
                    severity={performance.severity}
                    className="text-xs"
                />
            </div>
        );
    };

    const paymentBodyTemplate = (rowData: Facture) => {
        const performance = getPaymentPerformance(rowData.dateEcheance, rowData.datePaiement!);
        const paymentDays = getDaysToPayment(rowData.dateEmission, rowData.datePaiement!);
        
        return (
            <div>
                <div className="font-bold text-green-600">{formatDate(rowData.datePaiement!)}</div>
                <small className="text-600">
                    Payée en {paymentDays} jour{paymentDays > 1 ? 's' : ''}
                </small>
                {performance.status === 'EN AVANCE' && (
                    <div className="text-green-600 text-xs">
                        <i className="pi pi-check mr-1"></i>
                        {performance.days} jour{performance.days > 1 ? 's' : ''} en avance
                    </div>
                )}
                {performance.status === 'EN RETARD' && (
                    <div className="text-orange-600 text-xs">
                        <i className="pi pi-clock mr-1"></i>
                        {performance.days} jour{performance.days > 1 ? 's' : ''} de retard
                    </div>
                )}
            </div>
        );
    };

    const clientBodyTemplate = (rowData: Facture) => {
        if (!rowData.client) return '';
        return `${rowData.client.prenom} ${rowData.client.nom}`;
    };

    const performanceBodyTemplate = (rowData: Facture) => {
        const performance = getPaymentPerformance(rowData.dateEcheance, rowData.datePaiement!);
        const paymentDays = getDaysToPayment(rowData.dateEmission, rowData.datePaiement!);
        
        // Score de performance (0-100)
        let score = 100;
        if (performance.status === 'EN RETARD') {
            score = Math.max(0, 100 - (performance.days * 5)); // -5 points par jour de retard
        } else if (performance.status === 'EN AVANCE') {
            score = 100 + Math.min(20, performance.days * 2); // +2 points par jour d'avance (max +20)
        }
        
        let scoreColor = '#22c55e'; // green
        if (score < 70) scoreColor = '#ef4444'; // red
        else if (score < 85) scoreColor = '#f59e0b'; // orange
        
        return (
            <div className="text-center">
                <div className="text-2xl font-bold mb-1" style={{ color: scoreColor }}>
                    {Math.round(score)}
                </div>
                <small className="text-600">Score de ponctualité</small>
            </div>
        );
    };

    const header = (
        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
            <h5 className="m-0">Factures payées - Suivi des encaissements</h5>
            <span className="block mt-2 md:mt-0 p-input-icon-left">
                <i className="pi pi-search" />
                <InputText 
                    type="search" 
                    placeholder="Rechercher..." 
                    onInput={(e) => setGlobalFilter(e.currentTarget.value)} 
                />
            </span>
        </div>
    );

    const detailDialogFooter = (
        <Button 
            label="Fermer" 
            icon="pi pi-times" 
            text 
            onClick={() => setDetailDialog(false)} 
        />
    );

    return (
        <div className="grid">
            <div className="col-12">
                <Card>
                    <Toast ref={toast} />
                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />

                    <DataTable
                        ref={dt}
                        value={factures}
                        selection={selectedFactures}
                        onSelectionChange={(e) => setSelectedFactures(e.value)}
                        selectionMode="checkbox"
                        dataKey="id"
                        paginator
                        rows={10}
                        rowsPerPageOptions={[5, 10, 25]}
                        className="datatable-responsive"
                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                        currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} factures"
                        globalFilter={globalFilter}
                        emptyMessage="Aucune facture payée trouvée."
                        header={header}
                        responsiveLayout="scroll"
                        loading={loading}
                        sortField="datePaiement"
                        sortOrder={-1}
                    >
                        <Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
                        <Column field="numero" header="Numéro" sortable headerStyle={{ minWidth: '10rem' }} />
                        <Column field="objet" header="Objet" sortable headerStyle={{ minWidth: '15rem' }} />
                        <Column field="client" header="Client" body={clientBodyTemplate} sortable headerStyle={{ minWidth: '12rem' }} />
                        <Column field="dateEmission" header="Date émission" body={(rowData) => formatDate(rowData.dateEmission)} sortable headerStyle={{ minWidth: '10rem' }} />
                        <Column field="dateEcheance" header="Échéance" body={(rowData) => formatDate(rowData.dateEcheance)} sortable headerStyle={{ minWidth: '10rem' }} />
                        <Column field="datePaiement" header="Paiement" body={paymentBodyTemplate} sortable headerStyle={{ minWidth: '12rem' }} />
                        <Column field="montantTTC" header="Montant TTC" body={(rowData) => formatCurrency(rowData.montantTTC)} sortable headerStyle={{ minWidth: '10rem' }} />
                        <Column field="performance" header="Performance" body={performanceBodyTemplate} headerStyle={{ minWidth: '10rem' }} />
                        <Column field="statut" header="Statut" body={statusBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
                        <Column body={actionBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
                    </DataTable>

                    <Dialog 
                        visible={detailDialog} 
                        style={{ width: '600px' }} 
                        header="Détails du paiement"
                        modal 
                        className="p-fluid" 
                        footer={detailDialogFooter} 
                        onHide={() => setDetailDialog(false)}
                    >
                        {selectedFacture && (
                            <div className="formgrid grid">
                                <div className="field col-12">
                                    <h6>Informations de la facture</h6>
                                    <p><strong>Numéro:</strong> {selectedFacture.numero}</p>
                                    <p><strong>Objet:</strong> {selectedFacture.objet}</p>
                                    <p><strong>Client:</strong> {selectedFacture.client ? `${selectedFacture.client.prenom} ${selectedFacture.client.nom}` : 'N/A'}</p>
                                    <p><strong>Date d'émission:</strong> {formatDate(selectedFacture.dateEmission)}</p>
                                    <p><strong>Date d'échéance:</strong> {formatDate(selectedFacture.dateEcheance)}</p>
                                </div>

                                <Divider />

                                <div className="field col-12">
                                    <h6>Détails du paiement</h6>
                                    <p><strong>Date de paiement:</strong> {formatDate(selectedFacture.datePaiement!)}</p>
                                    <p><strong>Montant payé:</strong> {formatCurrency(selectedFacture.montantTTC || 0)}</p>
                                    <p><strong>Délai de paiement:</strong> {getDaysToPayment(selectedFacture.dateEmission, selectedFacture.datePaiement!)} jours</p>
                                    
                                    {(() => {
                                        const perf = getPaymentPerformance(selectedFacture.dateEcheance, selectedFacture.datePaiement!);
                                        return (
                                            <p>
                                                <strong>Performance:</strong> 
                                                <Tag 
                                                    value={perf.status} 
                                                    severity={perf.severity}
                                                    className="ml-2"
                                                />
                                                {perf.days > 0 && (
                                                    <span className="ml-2">
                                                        ({perf.days} jour{perf.days > 1 ? 's' : ''})
                                                    </span>
                                                )}
                                            </p>
                                        );
                                    })()}
                                </div>

                                <Divider />

                                <div className="field col-12">
                                    <h6>Actions disponibles</h6>
                                    <div className="flex gap-2">
                                        <Button 
                                            label="Imprimer reçu" 
                                            icon="pi pi-print" 
                                            size="small"
                                            onClick={() => {
                                                toast.current?.show({
                                                    severity: 'info',
                                                    summary: 'Impression',
                                                    detail: `Impression du reçu pour ${selectedFacture.numero}`,
                                                    life: 3000
                                                });
                                            }}
                                        />
                                        <Button 
                                            label="Attestation" 
                                            icon="pi pi-file-pdf" 
                                            severity={"secondary" as any}
                                            size="small"
                                            onClick={() => {
                                                toast.current?.show({
                                                    severity: 'success',
                                                    summary: 'Attestation',
                                                    detail: `Attestation générée pour ${selectedFacture.numero}`,
                                                    life: 3000
                                                });
                                            }}
                                        />
                                    </div>
                                </div>
                            </div>
                        )}
                    </Dialog>
                </Card>
            </div>
        </div>
    );
};

export default FacturesPayeesPage;