'use client';

import React, { useState, useEffect, useRef } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { Calendar } from 'primereact/calendar';
import { Dropdown } from 'primereact/dropdown';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Toast } from 'primereact/toast';
import { ProgressSpinner } from 'primereact/progressspinner';
import { Toolbar } from 'primereact/toolbar';
import { Message } from 'primereact/message';
import { Checkbox } from 'primereact/checkbox';
import { InputNumber } from 'primereact/inputnumber';
import { devisService, factureService } from '../../../../../services/api';
import { formatCurrency, formatDate } from '../../../../../utils/formatters';
import type { Devis, Facture } from '../../../../../types/btp';
import { StatutFacture, TypeFacture } from '../../../../../types/btp';

const ConvertDevisPage = () => {
    const params = useParams();
    const router = useRouter();
    const toast = useRef<Toast>(null);
    
    const [devis, setDevis] = useState<Devis | null>(null);
    const [facture, setFacture] = useState<Partial<Facture>>({
        numero: '',
        dateEmission: new Date().toISOString(),
        dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
        objet: '',
        description: '',
        montantHT: 0,
        montantTTC: 0,
        tauxTVA: 20,
        statut: StatutFacture.BROUILLON,
        typeFacture: TypeFacture.FACTURE,
        actif: true,
        lignes: []
    });
    
    const [loading, setLoading] = useState(true);
    const [converting, setConverting] = useState(false);
    const [selectedLignes, setSelectedLignes] = useState<boolean[]>([]);
    const [acomptePercentage, setAcomptePercentage] = useState<number>(0);
    const [createAcompte, setCreateAcompte] = useState(false);

    const devisId = params.id as string;

    const typeFactureOptions = [
        { label: 'Facture', value: 'FACTURE' },
        { label: 'Facture d\'acompte', value: 'ACOMPTE' },
        { label: 'Facture de situation', value: 'SITUATION' },
        { label: 'Facture de solde', value: 'SOLDE' }
    ];

    useEffect(() => {
        loadDevis();
    }, [devisId]);

    const loadDevis = async () => {
        try {
            setLoading(true);
            const devisData = await devisService.getById(devisId);

            if (devisData.statut !== 'ACCEPTE') {
                toast.current?.show({
                    severity: 'warn',
                    summary: 'Attention',
                    detail: 'Seuls les devis acceptés peuvent être convertis en facture'
                });
            }
            
            setDevis(devisData);
            
            // Générer un nouveau numéro de facture
            const newNumero = await generateNewNumero();
            
            // Initialiser la facture avec les données du devis
            setFacture({
                numero: newNumero,
                dateEmission: new Date().toISOString(),
                dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
                objet: devisData.objet,
                description: devisData.description,
                montantHT: devisData.montantHT,
                montantTTC: devisData.montantTTC,
                tauxTVA: devisData.tauxTVA,
                statut: StatutFacture.BROUILLON,
                typeFacture: TypeFacture.FACTURE,
                actif: true,
                client: devisData.client
            });
            
            // Initialiser toutes les lignes comme sélectionnées
            setSelectedLignes(new Array(devisData.lignes?.length || 0).fill(true));
            
        } catch (error) {
            console.error('Erreur lors du chargement:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Impossible de charger le devis'
            });
        } finally {
            setLoading(false);
        }
    };

    const generateNewNumero = async (): Promise<string> => {
        try {
            // TODO: Implémenter la génération automatique de numéro
            const year = new Date().getFullYear();
            const timestamp = Date.now().toString().slice(-6);
            return `FAC-${year}-${timestamp}`;
        } catch (error) {
            console.error('Erreur génération numéro:', error);
            return `FAC-${Date.now()}`;
        }
    };

    const calculateMontants = () => {
        if (!facture.lignes) return;
        
        const lignesSelectionnees = facture.lignes?.filter((_, index) => selectedLignes[index]) || [];
        let montantHT = lignesSelectionnees.reduce((sum, ligne) => sum + (ligne.montantLigne || 0), 0);
        
        // Appliquer le pourcentage d'acompte si nécessaire
        if (createAcompte && acomptePercentage > 0) {
            montantHT = montantHT * (acomptePercentage / 100);
        }
        
        const montantTTC = montantHT * (1 + (facture.tauxTVA || 0) / 100);
        
        setFacture(prev => ({
            ...prev,
            montantHT,
            montantTTC
        }));
    };

    useEffect(() => {
        calculateMontants();
    }, [selectedLignes, facture.lignes, facture.tauxTVA, createAcompte, acomptePercentage]);

    const handleConvert = async () => {
        try {
            setConverting(true);
            
            // Validation
            if (!facture.numero || !facture.objet) {
                toast.current?.show({
                    severity: 'warn',
                    summary: 'Attention',
                    detail: 'Veuillez remplir tous les champs obligatoires'
                });
                return;
            }
            
            if (!selectedLignes.some(selected => selected)) {
                toast.current?.show({
                    severity: 'warn',
                    summary: 'Attention',
                    detail: 'Veuillez sélectionner au moins une ligne à facturer'
                });
                return;
            }
            
            // Préparer les lignes sélectionnées
            const lignesFacture = facture.lignes?.filter((_, index) => selectedLignes[index]) || [];
            
            // Ajuster les montants si c'est un acompte
            if (createAcompte && acomptePercentage > 0) {
                lignesFacture.forEach(ligne => {
                    ligne.montantLigne = (ligne.montantLigne || 0) * (acomptePercentage / 100);
                    ligne.prixUnitaire = ligne.montantLigne / (ligne.quantite || 1);
                });
            }
            
            const factureData = {
                ...facture,
                lignes: lignesFacture,
                typeFacture: createAcompte ? TypeFacture.ACOMPTE : facture.typeFacture
            };
            
            const createdFacture = await factureService.create(factureData);

            toast.current?.show({
                severity: 'success',
                summary: 'Succès',
                detail: 'Facture créée avec succès'
            });

            router.push(`/factures/${createdFacture.id}`);
            
        } catch (error) {
            console.error('Erreur lors de la conversion:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Erreur lors de la conversion en facture'
            });
        } finally {
            setConverting(false);
        }
    };

    const handleLigneSelection = (index: number, checked: boolean) => {
        const newSelection = [...selectedLignes];
        newSelection[index] = checked;
        setSelectedLignes(newSelection);
    };

    const handleSelectAll = (checked: boolean) => {
        setSelectedLignes(new Array(facture.lignes?.length || 0).fill(checked));
    };

    const toolbarStartTemplate = () => (
        <div className="flex align-items-center gap-2">
            <Button
                icon="pi pi-arrow-left"
                label="Retour"
                className="p-button-outlined"
                onClick={() => router.push(`/devis/${devisId}`)}
            />
        </div>
    );

    const toolbarEndTemplate = () => (
        <div className="flex align-items-center gap-2">
            <Button
                label="Annuler"
                icon="pi pi-times"
                className="p-button-outlined"
                onClick={() => router.push(`/devis/${devisId}`)}
            />
            <Button
                label="Créer la facture"
                icon="pi pi-arrow-right"
                loading={converting}
                onClick={handleConvert}
                disabled={!devis || devis.statut !== 'ACCEPTE'}
            />
        </div>
    );

    const selectionBodyTemplate = (rowData: any, options: any) => (
        <Checkbox
            checked={selectedLignes[options.rowIndex] || false}
            onChange={(e) => handleLigneSelection(options.rowIndex, e.checked || false)}
        />
    );

    if (loading) {
        return (
            <div className="flex justify-content-center align-items-center min-h-screen">
                <ProgressSpinner />
            </div>
        );
    }

    if (!devis) {
        return (
            <div className="flex justify-content-center align-items-center min-h-screen">
                <div className="text-center">
                    <i className="pi pi-exclamation-triangle text-6xl text-orange-500 mb-3"></i>
                    <h3>Devis introuvable</h3>
                    <p className="text-600 mb-4">Le devis à convertir n'existe pas</p>
                    <Button
                        label="Retour à la liste"
                        icon="pi pi-arrow-left"
                        onClick={() => router.push('/devis')}
                    />
                </div>
            </div>
        );
    }

    return (
        <div className="grid">
            <Toast ref={toast} />
            
            <div className="col-12">
                <Toolbar start={toolbarStartTemplate} end={toolbarEndTemplate} />
            </div>

            {/* Message d'information */}
            <div className="col-12">
                {devis.statut !== 'ACCEPTE' ? (
                    <Message 
                        severity="warn" 
                        text="Ce devis n'est pas accepté. Seuls les devis acceptés peuvent être convertis en facture."
                        className="w-full"
                    />
                ) : (
                    <Message 
                        severity="info" 
                        text={`Conversion du devis #${devis.numero} en facture. Sélectionnez les prestations à facturer.`}
                        className="w-full"
                    />
                )}
            </div>

            {/* Informations du devis source */}
            <div className="col-12 md:col-6">
                <Card title="Devis source" className="h-full">
                    <div className="field">
                        <label className="font-semibold">Numéro:</label>
                        <p>{devis.numero}</p>
                    </div>
                    <div className="field">
                        <label className="font-semibold">Objet:</label>
                        <p>{devis.objet}</p>
                    </div>
                    <div className="field">
                        <label className="font-semibold">Client:</label>
                        <p>{typeof devis.client === 'string' ? devis.client : devis.client?.nom}</p>
                    </div>
                    <div className="field">
                        <label className="font-semibold">Date d'émission:</label>
                        <p>{formatDate(devis.dateEmission)}</p>
                    </div>
                    <div className="field">
                        <label className="font-semibold">Montant TTC:</label>
                        <p className="text-xl font-bold text-primary">{formatCurrency(devis.montantTTC)}</p>
                    </div>
                </Card>
            </div>

            {/* Informations de la facture */}
            <div className="col-12 md:col-6">
                <Card title="Nouvelle facture" className="h-full">
                    <div className="field">
                        <label htmlFor="numero" className="font-semibold">Numéro *</label>
                        <InputText
                            id="numero"
                            value={facture.numero}
                            onChange={(e) => setFacture(prev => ({ ...prev, numero: e.target.value }))}
                            className="w-full"
                            required
                        />
                    </div>
                    
                    <div className="field">
                        <label htmlFor="dateEmission" className="font-semibold">Date d'émission *</label>
                        <Calendar
                            id="dateEmission"
                            value={facture.dateEmission ? new Date(facture.dateEmission) : new Date()}
                            onChange={(e) => setFacture(prev => ({ ...prev, dateEmission: e.value?.toISOString() || new Date().toISOString() }))}
                            className="w-full"
                            dateFormat="dd/mm/yy"
                        />
                    </div>
                    
                    <div className="field">
                        <label htmlFor="dateEcheance" className="font-semibold">Date d'échéance *</label>
                        <Calendar
                            id="dateEcheance"
                            value={facture.dateEcheance ? new Date(facture.dateEcheance) : new Date()}
                            onChange={(e) => setFacture(prev => ({ ...prev, dateEcheance: e.value || new Date() }))}
                            className="w-full"
                            dateFormat="dd/mm/yy"
                        />
                    </div>
                    
                    <div className="field">
                        <label htmlFor="type" className="font-semibold">Type de facture</label>
                        <Dropdown
                            id="type"
                            value={facture.typeFacture}
                            options={typeFactureOptions}
                            onChange={(e) => setFacture(prev => ({ ...prev, typeFacture: e.value }))}
                            className="w-full"
                        />
                    </div>
                    
                    <div className="field">
                        <label className="font-semibold">Montant TTC:</label>
                        <p className="text-xl font-bold text-green-600">{formatCurrency(facture.montantTTC || 0)}</p>
                    </div>
                </Card>
            </div>

            {/* Options d'acompte */}
            <div className="col-12">
                <Card title="Options de facturation">
                    <div className="field-checkbox mb-3">
                        <Checkbox
                            id="createAcompte"
                            checked={createAcompte}
                            onChange={(e) => setCreateAcompte(e.checked || false)}
                        />
                        <label htmlFor="createAcompte" className="ml-2 font-semibold">
                            Créer une facture d'acompte
                        </label>
                    </div>
                    
                    {createAcompte && (
                        <div className="field">
                            <label htmlFor="acomptePercentage" className="font-semibold">
                                Pourcentage d'acompte (%)
                            </label>
                            <InputNumber
                                id="acomptePercentage"
                                value={acomptePercentage}
                                onValueChange={(e) => setAcomptePercentage(e.value || 0)}
                                className="w-full md:w-3"
                                suffix="%"
                                min={0}
                                max={100}
                            />
                            <small className="text-600 block mt-1">
                                Le montant de la facture sera calculé en fonction de ce pourcentage
                            </small>
                        </div>
                    )}
                </Card>
            </div>

            {/* Sélection des prestations */}
            <div className="col-12">
                <Card 
                    title="Prestations à facturer"
                    subTitle={`${selectedLignes.filter(s => s).length}/${facture.lignes?.length || 0} sélectionnée(s) | Total: ${formatCurrency(facture.montantTTC || 0)}`}
                >
                    <div className="mb-3">
                        <Button
                            label="Tout sélectionner"
                            icon="pi pi-check"
                            className="p-button-outlined p-button-sm mr-2"
                            onClick={() => handleSelectAll(true)}
                        />
                        <Button
                            label="Tout désélectionner"
                            icon="pi pi-times"
                            className="p-button-outlined p-button-sm"
                            onClick={() => handleSelectAll(false)}
                        />
                    </div>
                    
                    <DataTable 
                        value={facture.lignes || []} 
                        responsiveLayout="scroll"
                        emptyMessage="Aucune prestation disponible"
                    >
                        <Column 
                            header="Sélection" 
                            style={{ width: '80px' }}
                            body={selectionBodyTemplate}
                        />
                        <Column field="designation" header="Désignation" />
                        <Column 
                            field="quantite" 
                            header="Quantité" 
                            style={{ width: '100px' }}
                            body={(rowData) => rowData.quantite?.toLocaleString('fr-FR')}
                        />
                        <Column field="unite" header="Unité" style={{ width: '80px' }} />
                        <Column 
                            field="prixUnitaire" 
                            header="Prix unitaire" 
                            style={{ width: '120px' }}
                            body={(rowData) => formatCurrency(rowData.prixUnitaire)}
                        />
                        <Column 
                            field="montantHT" 
                            header="Montant HT" 
                            style={{ width: '120px' }}
                            body={(rowData, options) => {
                                let montant = rowData.montantHT;
                                if (createAcompte && acomptePercentage > 0 && selectedLignes[options.rowIndex]) {
                                    montant = montant * (acomptePercentage / 100);
                                }
                                return formatCurrency(montant);
                            }}
                        />
                    </DataTable>
                    
                    <div className="mt-3 p-3 bg-green-50 border-round">
                        <div className="flex justify-content-between align-items-center">
                            <span className="font-semibold">Total HT: {formatCurrency(facture.montantHT || 0)}</span>
                            <span className="font-semibold text-primary">Total TTC: {formatCurrency(facture.montantTTC || 0)}</span>
                        </div>
                        {createAcompte && acomptePercentage > 0 && (
                            <p className="text-sm text-600 mt-2 mb-0">
                                <i className="pi pi-info-circle mr-2"></i>
                                Acompte de {acomptePercentage}% appliqué sur les prestations sélectionnées
                            </p>
                        )}
                    </div>
                </Card>
            </div>
        </div>
    );
};

export default ConvertDevisPage;