'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 { Dialog } from 'primereact/dialog';
import { Toast } from 'primereact/toast';
import { Toolbar } from 'primereact/toolbar';
import { Tag } from 'primereact/tag';
import { ConfirmDialog } from 'primereact/confirmdialog';
import { InputTextarea } from 'primereact/inputtextarea';
import { Dropdown } from 'primereact/dropdown';
import clientService from '../../../services/clientService';
import chantierService from '../../../services/chantierService';
import type { Client } from '../../../types/btp';
import RoleProtectedPage from '@/components/RoleProtectedPage';
import { 
    ActionButtonGroup, 
    ViewButton, 
    EditButton, 
    DeleteButton,
    ActionButton
} from '../../../components/ui/ActionButton';

const ClientsPageContent = () => {
    const [clients, setClients] = useState<Client[]>([]);
    const [loading, setLoading] = useState(true);
    const [globalFilter, setGlobalFilter] = useState('');
    const [selectedClients, setSelectedClients] = useState<Client[]>([]);
    const [clientDialog, setClientDialog] = useState(false);
    const [deleteClientDialog, setDeleteClientDialog] = useState(false);
    const [deleteClientsDialog, setDeleteClientsDialog] = useState(false);
    const [chantiersDialog, setChantiersDialog] = useState(false);
    const [selectedClientChantiers, setSelectedClientChantiers] = useState<any[]>([]);
    const [currentClient, setCurrentClient] = useState<Client | null>(null);
    const [client, setClient] = useState<Client>({
        id: '',
        nom: '',
        prenom: '',
        entreprise: '',
        email: '',
        telephone: '',
        adresse: '',
        codePostal: '',
        ville: '',
        numeroTVA: '',
        siret: '',
        actif: true,
        dateCreation: new Date().toISOString(),
        dateModification: new Date().toISOString()
    });
    const [submitted, setSubmitted] = useState(false);
    const toast = useRef<Toast>(null);
    const dt = useRef<DataTable<Client[]>>(null);

    const typesClient = [
        { label: 'Particulier', value: 'PARTICULIER' },
        { label: 'Professionnel', value: 'PROFESSIONNEL' }
    ];

    useEffect(() => {
        loadClients();
    }, []);

    const loadClients = async () => {
        try {
            setLoading(true);
            const data = await clientService.getAll();
            setClients(data);
        } catch (error) {
            console.error('Erreur lors du chargement des clients:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Impossible de charger les clients',
                life: 3000
            });
        } finally {
            setLoading(false);
        }
    };

    const openNew = () => {
        setClient({
            id: '',
            nom: '',
            prenom: '',
            entreprise: '',
            email: '',
            telephone: '',
            adresse: '',
            codePostal: '',
            ville: '',
            numeroTVA: '',
            siret: '',
            actif: true,
            dateCreation: new Date().toISOString(),
            dateModification: new Date().toISOString()
        });
        setSubmitted(false);
        setClientDialog(true);
    };

    const hideDialog = () => {
        setSubmitted(false);
        setClientDialog(false);
    };

    const hideDeleteClientDialog = () => {
        setDeleteClientDialog(false);
    };

    const hideDeleteClientsDialog = () => {
        setDeleteClientsDialog(false);
    };

    const saveClient = async () => {
        setSubmitted(true);

        if (client.nom.trim() && client.prenom.trim()) {
            try {
                let updatedClients = [...clients];

                if (client.id) {
                    // Mise à jour
                    const updatedClient = await clientService.update(client.id, client);
                    const index = clients.findIndex(c => c.id === client.id);
                    updatedClients[index] = updatedClient;
                    
                    toast.current?.show({
                        severity: 'success',
                        summary: 'Succès',
                        detail: 'Client mis à jour',
                        life: 3000
                    });
                } else {
                    // Création
                    const newClient = await clientService.create(client);
                    updatedClients.push(newClient);
                    
                    toast.current?.show({
                        severity: 'success',
                        summary: 'Succès',
                        detail: 'Client créé',
                        life: 3000
                    });
                }

                setClients(updatedClients);
                setClientDialog(false);
                setClient({
                    id: '',
                    nom: '',
                    prenom: '',
                    entreprise: '',
                    email: '',
                    telephone: '',
                    adresse: '',
                    codePostal: '',
                    ville: '',
                    numeroTVA: '',
                    siret: '',
                    actif: true,
            dateCreation: new Date().toISOString(),
            dateModification: new Date().toISOString()
                });
            } catch (error: any) {
                console.error('Erreur lors de la sauvegarde:', error);
                
                // Extraire le message d'erreur du backend
                let errorMessage = 'Impossible de sauvegarder le client';
                if (error.response?.data?.message) {
                    errorMessage = error.response.data.message;
                } else if (error.response?.data?.error) {
                    errorMessage = error.response.data.error;
                } else if (error.response?.data) {
                    errorMessage = JSON.stringify(error.response.data);
                } else if (error.response?.status === 400) {
                    errorMessage = 'Données invalides. Vérifiez que tous les champs obligatoires sont remplis correctement.';
                }
                
                toast.current?.show({
                    severity: 'error',
                    summary: 'Erreur',
                    detail: errorMessage,
                    life: 5000
                });
            }
        }
    };

    const editClient = (client: Client) => {
        setClient({ ...client });
        setClientDialog(true);
    };

    const confirmDeleteClient = (client: Client) => {
        setClient(client);
        setDeleteClientDialog(true);
    };

    const deleteClient = async () => {
        try {
            await clientService.delete(client.id);
            let updatedClients = clients.filter(c => c.id !== client.id);
            setClients(updatedClients);
            setDeleteClientDialog(false);
            setClient({
                id: '',
                nom: '',
                prenom: '',
                entreprise: '',
                email: '',
                telephone: '',
                adresse: '',
                codePostal: '',
                ville: '',
                numeroTVA: '',
                siret: '',
                actif: true,
            dateCreation: new Date().toISOString(),
            dateModification: new Date().toISOString()
            });
            toast.current?.show({
                severity: 'success',
                summary: 'Succès',
                detail: 'Client supprimé',
                life: 3000
            });
        } catch (error) {
            console.error('Erreur lors de la suppression:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Impossible de supprimer le client',
                life: 3000
            });
        }
    };

    const confirmDeleteSelected = () => {
        setDeleteClientsDialog(true);
    };

    const deleteSelectedClients = async () => {
        try {
            await Promise.all(selectedClients.map(c => clientService.delete(c.id)));
            let updatedClients = clients.filter(c => !selectedClients.includes(c));
            setClients(updatedClients);
            setDeleteClientsDialog(false);
            setSelectedClients([]);
            toast.current?.show({
                severity: 'success',
                summary: 'Succès',
                detail: 'Clients supprimés',
                life: 3000
            });
        } catch (error) {
            console.error('Erreur lors de la suppression:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Impossible de supprimer les clients',
                life: 3000
            });
        }
    };

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

    const voirChantiersClient = async (client: Client) => {
        try {
            setCurrentClient(client);
            const chantiers = await chantierService.getByClient(client.id!);
            setSelectedClientChantiers(chantiers || []);
            
            // Si pas de chantiers, afficher seulement un message informatif sans ouvrir le dialog
            if (!chantiers || chantiers.length === 0) {
                toast.current?.show({
                    severity: 'info',
                    summary: 'Information',
                    detail: `Le client ${client.nom} n'a pas encore de chantiers`,
                    life: 4000
                });
                return; // Sortir sans ouvrir le dialog
            }
            
            // Ouvrir le dialog seulement s'il y a des chantiers à afficher
            setChantiersDialog(true);
            
        } catch (error: any) {
            console.error('Erreur lors du chargement des chantiers:', error);
            
            // Si c'est une erreur réseau ou serveur, afficher un message approprié
            let errorMessage = 'Erreur technique lors du chargement des chantiers';
            if (error.code === 'NETWORK_ERROR' || error.message?.includes('Network Error')) {
                errorMessage = 'Impossible de contacter le serveur. Vérifiez votre connexion.';
            } else if (error.response?.status === 500) {
                errorMessage = 'Erreur interne du serveur lors de la récupération des chantiers';
            }
            
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: errorMessage,
                life: 4000
            });
            
            // En cas d'erreur technique, ne pas ouvrir le dialog non plus
        }
    };

    const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
        const val = (e.target && e.target.value) || '';
        let _client = { ...client };
        (_client as any)[name] = val;
        setClient(_client);
    };

    const onDropdownChange = (e: any, name: string) => {
        let _client = { ...client };
        (_client as any)[name] = e.value;
        setClient(_client);
    };

    const leftToolbarTemplate = () => {
        return (
            <div className="my-2">
                <Button 
                    label="Nouveau" 
                    icon="pi pi-plus" 
                    severity="success" 
                    className="mr-2 p-button-text p-button-rounded" 
                    onClick={openNew} 
                />
                <Button 
                    label="Supprimer" 
                    icon="pi pi-trash" 
                    severity="danger" 
                    className="p-button-text p-button-rounded"
                    onClick={confirmDeleteSelected} 
                    disabled={!selectedClients || selectedClients.length === 0} 
                />
            </div>
        );
    };

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

    const actionBodyTemplate = (rowData: Client) => {
        return (
            <ActionButtonGroup>
                <ActionButton 
                    icon="pi pi-map" 
                    tooltip="Voir les chantiers"
                    onClick={() => voirChantiersClient(rowData)}
                    color="blue"
                />
                <EditButton 
                    tooltip="Modifier"
                    onClick={() => editClient(rowData)} 
                />
                <DeleteButton 
                    tooltip="Supprimer"
                    onClick={() => confirmDeleteClient(rowData)}
                />
            </ActionButtonGroup>
        );
    };

    const statusBodyTemplate = (rowData: Client) => {
        return (
            <Tag 
                value={rowData.actif ? 'Actif' : 'Inactif'} 
                severity={rowData.actif ? 'success' : 'danger'} 
            />
        );
    };



    const contactBodyTemplate = (rowData: Client) => {
        return (
            <div className="flex flex-column">
                {rowData.email && (
                    <div className="flex align-items-center mb-1">
                        <i className="pi pi-envelope mr-2 text-color-secondary"></i>
                        <span className="text-sm">{rowData.email}</span>
                    </div>
                )}
                {rowData.telephone && (
                    <div className="flex align-items-center">
                        <i className="pi pi-phone mr-2 text-color-secondary"></i>
                        <span className="text-sm">{rowData.telephone}</span>
                    </div>
                )}
            </div>
        );
    };

    const nomCompletBodyTemplate = (rowData: Client) => {
        return (
            <div className="flex flex-column">
                <span className="font-medium">{`${rowData.prenom} ${rowData.nom}`}</span>
                {rowData.entreprise && (
                    <span className="text-sm text-color-secondary">{rowData.entreprise}</span>
                )}
            </div>
        );
    };

    const header = (
        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
            <h5 className="m-0">Gestion des Clients</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 clientDialogFooter = (
        <>
            <Button 
                label="Annuler" 
                icon="pi pi-times" 
                text 
                onClick={hideDialog} 
            />
            <Button 
                label="Sauvegarder" 
                icon="pi pi-check" 
                text 
                onClick={saveClient} 
            />
        </>
    );

    const deleteClientDialogFooter = (
        <>
            <Button 
                label="Non" 
                icon="pi pi-times" 
                text 
                onClick={hideDeleteClientDialog} 
            />
            <Button 
                label="Oui" 
                icon="pi pi-check" 
                text 
                onClick={deleteClient} 
            />
        </>
    );

    const deleteClientsDialogFooter = (
        <>
            <Button 
                label="Non" 
                icon="pi pi-times" 
                text 
                onClick={hideDeleteClientsDialog} 
            />
            <Button 
                label="Oui" 
                icon="pi pi-check" 
                text 
                onClick={deleteSelectedClients} 
            />
        </>
    );

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

                    <DataTable
                        ref={dt}
                        value={clients}
                        selection={selectedClients}
                        onSelectionChange={(e) => setSelectedClients(e.value)}
                        selectionMode="multiple"
                        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} clients"
                        globalFilter={globalFilter}
                        emptyMessage="Aucun client trouvé."
                        header={header}
                        responsiveLayout="scroll"
                        loading={loading}
                    >
                        <Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
                        <Column header="Nom complet" body={nomCompletBodyTemplate} sortable headerStyle={{ minWidth: '12rem' }} />
                        <Column header="Contact" body={contactBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
                        <Column field="ville" header="Ville" sortable headerStyle={{ minWidth: '10rem' }} />
                        <Column field="actif" header="Statut" body={statusBodyTemplate} sortable headerStyle={{ minWidth: '8rem' }} />
                        <Column body={actionBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
                    </DataTable>

                    <Dialog 
                        visible={clientDialog} 
                        style={{ width: '600px' }} 
                        header="Détails du Client" 
                        modal 
                        className="p-fluid" 
                        footer={clientDialogFooter} 
                        onHide={hideDialog}
                    >
                        <div className="formgrid grid">
                            <div className="field col-12 md:col-6">
                                <label htmlFor="prenom">Prénom</label>
                                <InputText 
                                    id="prenom" 
                                    value={client.prenom} 
                                    onChange={(e) => onInputChange(e, 'prenom')} 
                                    required 
                                    className={submitted && !client.prenom ? 'p-invalid' : ''} 
                                />
                                {submitted && !client.prenom && <small className="p-invalid">Le prénom est requis.</small>}
                            </div>

                            <div className="field col-12 md:col-6">
                                <label htmlFor="nom">Nom</label>
                                <InputText 
                                    id="nom" 
                                    value={client.nom} 
                                    onChange={(e) => onInputChange(e, 'nom')} 
                                    required 
                                    className={submitted && !client.nom ? 'p-invalid' : ''} 
                                />
                                {submitted && !client.nom && <small className="p-invalid">Le nom est requis.</small>}
                            </div>

                            <div className="field col-12">
                                <label htmlFor="entreprise">Entreprise</label>
                                <InputText 
                                    id="entreprise" 
                                    value={client.entreprise} 
                                    onChange={(e) => onInputChange(e, 'entreprise')} 
                                />
                            </div>

                            <div className="field col-12 md:col-6">
                                <label htmlFor="email">Email</label>
                                <InputText 
                                    id="email" 
                                    value={client.email} 
                                    onChange={(e) => onInputChange(e, 'email')} 
                                    type="email"
                                />
                            </div>

                            <div className="field col-12 md:col-6">
                                <label htmlFor="telephone">Téléphone</label>
                                <InputText 
                                    id="telephone" 
                                    value={client.telephone} 
                                    onChange={(e) => onInputChange(e, 'telephone')} 
                                />
                            </div>

                            <div className="field col-12">
                                <label htmlFor="adresse">Adresse</label>
                                <InputTextarea 
                                    id="adresse" 
                                    value={client.adresse} 
                                    onChange={(e) => onInputChange(e, 'adresse')} 
                                    rows={2} 
                                />
                            </div>

                            <div className="field col-12 md:col-6">
                                <label htmlFor="ville">Ville</label>
                                <InputText 
                                    id="ville" 
                                    value={client.ville} 
                                    onChange={(e) => onInputChange(e, 'ville')} 
                                />
                            </div>

                            <div className="field col-12 md:col-6">
                                <label htmlFor="codePostal">Code postal</label>
                                <InputText 
                                    id="codePostal" 
                                    value={client.codePostal} 
                                    onChange={(e) => onInputChange(e, 'codePostal')} 
                                />
                            </div>

                            <div className="field col-12 md:col-6">
                                <label htmlFor="numeroTVA">Numéro TVA</label>
                                <InputText 
                                    id="numeroTVA" 
                                    value={client.numeroTVA} 
                                    onChange={(e) => onInputChange(e, 'numeroTVA')} 
                                />
                            </div>

                            <div className="field col-12 md:col-6">
                                <label htmlFor="siret">SIRET</label>
                                <InputText 
                                    id="siret" 
                                    value={client.siret} 
                                    onChange={(e) => onInputChange(e, 'siret')} 
                                />
                            </div>
                        </div>
                    </Dialog>

                    <Dialog 
                        visible={deleteClientDialog} 
                        style={{ width: '450px' }} 
                        header="Confirmer" 
                        modal 
                        footer={deleteClientDialogFooter} 
                        onHide={hideDeleteClientDialog}
                    >
                        <div className="flex align-items-center justify-content-center">
                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
                            {client && (
                                <span>
                                    Êtes-vous sûr de vouloir supprimer <b>{client.prenom} {client.nom}</b> ?
                                </span>
                            )}
                        </div>
                    </Dialog>

                    <Dialog 
                        visible={deleteClientsDialog} 
                        style={{ width: '450px' }} 
                        header="Confirmer" 
                        modal 
                        footer={deleteClientsDialogFooter} 
                        onHide={hideDeleteClientsDialog}
                    >
                        <div className="flex align-items-center justify-content-center">
                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
                            {selectedClients && <span>Êtes-vous sûr de vouloir supprimer les clients sélectionnés ?</span>}
                        </div>
                    </Dialog>

                    {/* Dialog des chantiers du client */}
                    <Dialog 
                        visible={chantiersDialog} 
                        style={{ width: '90vw', height: '80vh' }} 
                        header={`Chantiers de ${currentClient?.prenom} ${currentClient?.nom}`}
                        modal 
                        className="p-fluid" 
                        footer={<Button label="Fermer" icon="pi pi-times" onClick={() => setChantiersDialog(false)} />} 
                        onHide={() => setChantiersDialog(false)}
                        maximizable
                    >
                        <div className="grid mb-3">
                            <div className="col-12 md:col-3">
                                <Card>
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-blue-500">{selectedClientChantiers.length}</div>
                                        <div className="text-color-secondary">Total chantiers</div>
                                    </div>
                                </Card>
                            </div>
                            <div className="col-12 md:col-3">
                                <Card>
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-green-500">
                                            {selectedClientChantiers.filter(c => c.statut === 'EN_COURS').length}
                                        </div>
                                        <div className="text-color-secondary">En cours</div>
                                    </div>
                                </Card>
                            </div>
                            <div className="col-12 md:col-3">
                                <Card>
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-purple-500">
                                            {selectedClientChantiers.filter(c => c.statut === 'TERMINE').length}
                                        </div>
                                        <div className="text-color-secondary">Terminés</div>
                                    </div>
                                </Card>
                            </div>
                            <div className="col-12 md:col-3">
                                <Card>
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-cyan-500">
                                            {new Intl.NumberFormat('fr-FR', {
                                                style: 'currency',
                                                currency: 'EUR',
                                                notation: 'compact'
                                            }).format(selectedClientChantiers.reduce((sum, c) => sum + (c.montantPrevu || 0), 0))}
                                        </div>
                                        <div className="text-color-secondary">CA Total</div>
                                    </div>
                                </Card>
                            </div>
                        </div>

                        <DataTable
                            value={selectedClientChantiers}
                            paginator
                            rows={10}
                            dataKey="id"
                            className="datatable-responsive"
                            emptyMessage="Aucun chantier pour ce client"
                            responsiveLayout="scroll"
                        >
                            <Column field="nom" header="Chantier" sortable style={{ minWidth: '12rem' }} />
                            <Column 
                                header="Statut" 
                                body={(rowData) => (
                                    <Tag 
                                        value={chantierService.getStatutLabel(rowData.statut)} 
                                        style={{ 
                                            backgroundColor: chantierService.getStatutColor(rowData.statut),
                                            color: 'white'
                                        }}
                                    />
                                )}
                                sortable 
                                style={{ minWidth: '8rem' }} 
                            />
                            <Column 
                                field="dateDebut" 
                                header="Date début" 
                                body={(rowData) => {
                                    if (!rowData.dateDebut) return '';
                                    const date = new Date(rowData.dateDebut);
                                    return date.toLocaleDateString('fr-FR');
                                }}
                                sortable 
                                style={{ minWidth: '10rem' }} 
                            />
                            <Column 
                                field="dateFinPrevue" 
                                header="Fin prévue" 
                                body={(rowData) => {
                                    if (!rowData.dateFinPrevue) return '';
                                    const date = new Date(rowData.dateFinPrevue);
                                    return date.toLocaleDateString('fr-FR');
                                }}
                                sortable 
                                style={{ minWidth: '10rem' }} 
                            />
                            <Column 
                                header="Montant" 
                                body={(rowData) => new Intl.NumberFormat('fr-FR', {
                                    style: 'currency',
                                    currency: 'EUR'
                                }).format(rowData.montantPrevu || 0)}
                                style={{ minWidth: '8rem' }} 
                            />
                            <Column field="adresse" header="Adresse" style={{ minWidth: '12rem' }} />
                        </DataTable>
                    </Dialog>
                </Card>
            </div>
        </div>
    );
};

const ClientsPage = () => {
    return (
        <RoleProtectedPage
            requiredPage="CLIENTS"
            fallbackMessage="Vous devez avoir un rôle commercial ou supérieur pour accéder aux clients."
        >
            <ClientsPageContent />
        </RoleProtectedPage>
    );
};

export default ClientsPage;