'use client';
export const dynamic = 'force-dynamic';


import React, { useState, useEffect, useRef } from 'react';
import { Card } from 'primereact/card';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';
import { Tag } from 'primereact/tag';
import { ProgressBar } from 'primereact/progressbar';
import { Dialog } from 'primereact/dialog';
import { InputTextarea } from 'primereact/inputtextarea';
import { Dropdown } from 'primereact/dropdown';
import { Timeline } from 'primereact/timeline';
import { Toast } from 'primereact/toast';
import { Divider } from 'primereact/divider';
import { Badge } from 'primereact/badge';
import { Knob } from 'primereact/knob';
import chantierService from '../../../../services/chantierService';

/**
 * Page Workflow Chantiers BTP Express
 * Gestion complète du cycle de vie des chantiers avec transitions d'état
 */
const WorkflowChantiers = () => {
    const [chantiers, setChantiers] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [workflowDialog, setWorkflowDialog] = useState(false);
    const [selectedChantier, setSelectedChantier] = useState<any>(null);
    const [nouveauStatut, setNouveauStatut] = useState('');
    const [commentaire, setCommentaire] = useState('');
    const [historique, setHistorique] = useState<any[]>([]);
    const [metriques, setMetriques] = useState<any>({});
    const toast = useRef<Toast>(null);

    // Définition des transitions workflow BTP
    const workflowTransitions = {
        'PLANIFIE': [
            { label: 'Démarrer le chantier', value: 'EN_COURS', icon: 'pi-play', color: 'success' },
            { label: 'Annuler', value: 'ANNULE', icon: 'pi-times', color: 'danger' }
        ],
        'EN_COURS': [
            { label: 'Terminer le chantier', value: 'TERMINE', icon: 'pi-check', color: 'success' },
            { label: 'Suspendre', value: 'SUSPENDU', icon: 'pi-pause', color: 'warning' },
            { label: 'Annuler', value: 'ANNULE', icon: 'pi-times', color: 'danger' }
        ],
        'SUSPENDU': [
            { label: 'Reprendre', value: 'EN_COURS', icon: 'pi-play', color: 'info' },
            { label: 'Annuler définitivement', value: 'ANNULE', icon: 'pi-times', color: 'danger' }
        ],
        'TERMINE': [], // Statut final
        'ANNULE': []   // Statut final
    };

    const statutsConfig = {
        'PLANIFIE': { color: 'info', icon: 'pi-calendar', label: 'Planifié' },
        'EN_COURS': { color: 'success', icon: 'pi-cog', label: 'En cours' },
        'SUSPENDU': { color: 'warning', icon: 'pi-pause', label: 'Suspendu' },
        'TERMINE': { color: 'success', icon: 'pi-check-circle', label: 'Terminé' },
        'ANNULE': { color: 'danger', icon: 'pi-times-circle', label: 'Annulé' }
    };

    useEffect(() => {
        loadChantiers();
        loadMetriques();
    }, []);

    const loadChantiers = async () => {
        try {
            setLoading(true);
            
            // Simulation données chantiers avec workflow
            const mockChantiers = [
                {
                    id: '1',
                    nom: 'Rénovation Villa Rousseau',
                    client: 'Claire Rousseau',
                    statut: 'EN_COURS' as any,
                    avancement: 65,
                    dateDebut: '2025-01-15',
                    dateFinPrevue: '2025-03-20',
                    montantPrevu: 85000,
                    montantReel: 72500,
                    equipe: 'Équipe Rénovation A',
                    phases: [
                        { nom: 'Démolition', statut: 'TERMINE' as any, avancement: 100 },
                        { nom: 'Gros œuvre', statut: 'EN_COURS' as any, avancement: 80 },
                        { nom: 'Second œuvre', statut: 'PLANIFIE', avancement: 0 },
                        { nom: 'Finitions', statut: 'PLANIFIE', avancement: 0 }
                    ],
                    alertes: ['Retard de 3 jours sur livraison matériaux'],
                    derniereMiseAJour: new Date()
                },
                {
                    id: '2',
                    nom: 'Extension Maison Martin',
                    client: 'Sophie Martin',
                    statut: 'PLANIFIE',
                    avancement: 0,
                    dateDebut: '2025-02-10',
                    dateFinPrevue: '2025-05-15',
                    montantPrevu: 45000,
                    montantReel: 0,
                    equipe: 'Équipe Extension B',
                    phases: [
                        { nom: 'Fondations', statut: 'PLANIFIE', avancement: 0 },
                        { nom: 'Élévation', statut: 'PLANIFIE', avancement: 0 },
                        { nom: 'Couverture', statut: 'PLANIFIE', avancement: 0 },
                        { nom: 'Aménagement', statut: 'PLANIFIE', avancement: 0 }
                    ],
                    alertes: [],
                    derniereMiseAJour: new Date()
                },
                {
                    id: '3',
                    nom: 'Réfection Toiture Dupont',
                    client: 'Jean Dupont',
                    statut: 'SUSPENDU' as any,
                    avancement: 30,
                    dateDebut: '2025-01-08',
                    dateFinPrevue: '2025-02-28',
                    montantPrevu: 28000,
                    montantReel: 12000,
                    equipe: 'Équipe Couverture C',
                    phases: [
                        { nom: 'Dépose ancienne toiture', statut: 'TERMINE' as any, avancement: 100 },
                        { nom: 'Charpente', statut: 'SUSPENDU' as any, avancement: 60 },
                        { nom: 'Couverture neuve', statut: 'PLANIFIE', avancement: 0 },
                        { nom: 'Isolation', statut: 'PLANIFIE', avancement: 0 }
                    ],
                    alertes: ['Chantier suspendu - Problème météorologique', 'Attente validation assurance'],
                    derniereMiseAJour: new Date()
                }
            ];

            setChantiers(mockChantiers);
        } catch (error) {
            console.error('Erreur chargement chantiers:', error);
        } finally {
            setLoading(false);
        }
    };

    const loadMetriques = () => {
        setMetriques({
            totalChantiers: 12,
            enCours: 5,
            planifies: 4,
            terminesRecemment: 2,
            suspendus: 1,
            tauxReussite: 92,
            delaiMoyen: -2 // Négatif = en avance
        });
    };

    const ouvrirWorkflow = (chantier: any) => {
        setSelectedChantier(chantier);
        setNouveauStatut('');
        setCommentaire('');
        
        // Charger historique du chantier
        const mockHistorique = [
            {
                date: new Date('2025-01-15T08:00:00'),
                statut: 'EN_COURS' as any,
                utilisateur: 'M. Laurent',
                commentaire: 'Démarrage chantier - Équipe mobilisée',
                automatique: false
            },
            {
                date: new Date('2025-01-20T14:30:00'),
                statut: 'EN_COURS' as any,
                utilisateur: 'Système',
                commentaire: 'Phase démolition terminée automatiquement',
                automatique: true
            },
            {
                date: new Date('2025-01-25T10:15:00'),
                statut: 'EN_COURS' as any,
                utilisateur: 'Mme Petit',
                commentaire: 'Avancement gros œuvre - 50% réalisé',
                automatique: false
            }
        ];
        
        setHistorique(mockHistorique);
        setWorkflowDialog(true);
    };

    const executerTransition = async () => {
        if (!selectedChantier || !nouveauStatut) return;

        try {
            // Simuler appel API pour changer le statut
            const chantierMisAJour = {
                ...selectedChantier,
                statut: nouveauStatut,
                derniereMiseAJour: new Date()
            };

            // Logique métier spécifique selon le statut
            if (nouveauStatut === 'EN_COURS') {
                chantierMisAJour.dateDebutReel = new Date();
            } else if (nouveauStatut === 'TERMINE') {
                chantierMisAJour.dateFinReelle = new Date();
                chantierMisAJour.avancement = 100;
            }

            // Mettre à jour la liste
            const chantiersUpdated = chantiers.map(c => 
                c.id === selectedChantier.id ? chantierMisAJour : c
            );
            setChantiers(chantiersUpdated);

            // Ajouter à l'historique
            const nouvelleEntree = {
                date: new Date(),
                statut: nouveauStatut,
                utilisateur: 'Utilisateur actuel',
                commentaire: commentaire || `Changement vers ${statutsConfig[nouveauStatut as keyof typeof statutsConfig]?.label}`,
                automatique: false
            };
            
            setHistorique([nouvelleEntree, ...historique]);

            toast.current?.show({
                severity: 'success',
                summary: 'Transition réussie',
                detail: `Chantier "${selectedChantier.nom}" passé en statut ${statutsConfig[nouveauStatut as keyof typeof statutsConfig]?.label}`,
                life: 4000
            });

            setWorkflowDialog(false);
            loadMetriques(); // Recalculer les métriques

        } catch (error) {
            console.error('Erreur transition:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Impossible d\'effectuer la transition',
                life: 3000
            });
        }
    };

    const statutBodyTemplate = (rowData: any) => {
        const config = statutsConfig[rowData.statut as keyof typeof statutsConfig];
        return (
            <div className="flex align-items-center gap-2">
                <i className={`pi ${config.icon} text-${config.color}`} />
                <Tag value={config.label} severity={config.color as any} />
            </div>
        );
    };

    const avancementBodyTemplate = (rowData: any) => {
        return (
            <div className="flex align-items-center gap-2">
                <ProgressBar 
                    value={rowData.avancement} 
                    style={{ width: '100px', height: '8px' }}
                    color={rowData.avancement >= 100 ? '#10B981' : rowData.avancement >= 50 ? '#F59E0B' : '#3B82F6'}
                />
                <span className="text-sm font-medium">{rowData.avancement}%</span>
            </div>
        );
    };

    const alertesBodyTemplate = (rowData: any) => {
        if (!rowData.alertes || rowData.alertes.length === 0) {
            return <span className="text-color-secondary">-</span>;
        }

        return (
            <div className="flex align-items-center gap-2">
                <Badge value={rowData.alertes.length} severity="danger" />
                <Button
                    icon="pi pi-exclamation-triangle"
                    text
                    size="small"
                    severity="danger"
                    tooltip={rowData.alertes.join(', ')}
                />
            </div>
        );
    };

    const actionsBodyTemplate = (rowData: any) => {
        const transitionsPossibles = workflowTransitions[rowData.statut as keyof typeof workflowTransitions] || [];

        return (
            <div className="flex gap-2">
                <Button
                    icon="pi pi-cog"
                    size="small"
                    severity="info"
                    tooltip="Gérer workflow"
                    onClick={() => ouvrirWorkflow(rowData)}
                />
                
                {transitionsPossibles.length > 0 && (
                    <Button
                        icon="pi pi-arrow-right"
                        size="small"
                        severity="success"
                        tooltip="Transitions disponibles"
                        onClick={() => ouvrirWorkflow(rowData)}
                    />
                )}
                
                <Button
                    icon="pi pi-eye"
                    size="small"
                    severity="help"
                    tooltip="Voir détails"
                />
            </div>
        );
    };

    const phasesBodyTemplate = (rowData: any) => {
        const phasesTerminees = rowData.phases?.filter((p: any) => p.statut === 'TERMINE').length || 0;
        const totalPhases = rowData.phases?.length || 0;

        return (
            <div className="flex align-items-center gap-2">
                <span className="text-sm">{phasesTerminees}/{totalPhases}</span>
                <ProgressBar 
                    value={totalPhases > 0 ? (phasesTerminees / totalPhases) * 100 : 0}
                    style={{ width: '60px', height: '6px' }}
                />
            </div>
        );
    };

    return (
        <div className="grid">
            <Toast ref={toast} />

            {/* Métriques Workflow */}
            <div className="col-12">
                <div className="grid">
                    <div className="col-12 md:col-2">
                        <Card>
                            <div className="text-center">
                                <div className="text-2xl font-bold text-blue-500">{metriques.totalChantiers}</div>
                                <div className="text-color-secondary">Total chantiers</div>
                            </div>
                        </Card>
                    </div>
                    
                    <div className="col-12 md:col-2">
                        <Card>
                            <div className="text-center">
                                <div className="text-2xl font-bold text-green-500">{metriques.enCours}</div>
                                <div className="text-color-secondary">En cours</div>
                            </div>
                        </Card>
                    </div>
                    
                    <div className="col-12 md:col-2">
                        <Card>
                            <div className="text-center">
                                <div className="text-2xl font-bold text-cyan-500">{metriques.planifies}</div>
                                <div className="text-color-secondary">Planifiés</div>
                            </div>
                        </Card>
                    </div>
                    
                    <div className="col-12 md:col-2">
                        <Card>
                            <div className="text-center">
                                <div className="text-2xl font-bold text-orange-500">{metriques.suspendus}</div>
                                <div className="text-color-secondary">Suspendus</div>
                            </div>
                        </Card>
                    </div>
                    
                    <div className="col-12 md:col-2">
                        <Card>
                            <div className="text-center">
                                <Knob 
                                    value={metriques.tauxReussite} 
                                    size={60}
                                    strokeWidth={8}
                                    valueColor="#10B981"
                                />
                                <div className="text-color-secondary mt-2">Taux réussite</div>
                            </div>
                        </Card>
                    </div>
                    
                    <div className="col-12 md:col-2">
                        <Card>
                            <div className="text-center">
                                <div className={`text-2xl font-bold ${metriques.delaiMoyen < 0 ? 'text-green-500' : 'text-red-500'}`}>
                                    {metriques.delaiMoyen > 0 ? `+${metriques.delaiMoyen}` : metriques.delaiMoyen}j
                                </div>
                                <div className="text-color-secondary">Délai moyen</div>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>

            <div className="col-12">
                <Divider />
            </div>

            {/* Tableau chantiers avec workflow */}
            <div className="col-12">
                <Card title="Gestion Workflow Chantiers">
                    <DataTable
                        value={chantiers}
                        loading={loading}
                        paginator
                        rows={10}
                        dataKey="id"
                        emptyMessage="Aucun chantier trouvé"
                        responsiveLayout="scroll"
                    >
                        <Column field="nom" header="Chantier" sortable style={{ minWidth: '200px' }} />
                        <Column field="client" header="Client" sortable style={{ minWidth: '150px' }} />
                        <Column header="Statut" body={statutBodyTemplate} sortable style={{ minWidth: '120px' }} />
                        <Column header="Avancement" body={avancementBodyTemplate} style={{ minWidth: '150px' }} />
                        <Column header="Phases" body={phasesBodyTemplate} style={{ minWidth: '100px' }} />
                        <Column field="equipe" header="Équipe" style={{ minWidth: '150px' }} />
                        <Column header="Alertes" body={alertesBodyTemplate} style={{ minWidth: '80px' }} />
                        <Column 
                            field="montantPrevu" 
                            header="Budget" 
                            body={(rowData) => new Intl.NumberFormat('fr-FR', {
                                style: 'currency',
                                currency: 'EUR',
                                notation: 'compact'
                            }).format(rowData.montantPrevu)}
                            style={{ minWidth: '100px' }} 
                        />
                        <Column body={actionsBodyTemplate} style={{ minWidth: '150px' }} />
                    </DataTable>
                </Card>
            </div>

            {/* Dialog Workflow */}
            <Dialog
                visible={workflowDialog}
                style={{ width: '90vw', height: '90vh' }}
                header={`Workflow - ${selectedChantier?.nom}`}
                modal
                onHide={() => setWorkflowDialog(false)}
                maximizable
            >
                {selectedChantier && (
                    <div className="grid">
                        {/* Informations chantier */}
                        <div className="col-12 md:col-4">
                            <Card title="Informations Chantier">
                                <div className="flex flex-column gap-3">
                                    <div>
                                        <strong>Client:</strong> {selectedChantier.client}
                                    </div>
                                    <div>
                                        <strong>Statut actuel:</strong>
                                        <Tag
                                            value={statutsConfig[selectedChantier.statut as keyof typeof statutsConfig]?.label}
                                            severity={statutsConfig[selectedChantier.statut as keyof typeof statutsConfig]?.color as any}
                                            className="ml-2"
                                        />
                                    </div>
                                    <div>
                                        <strong>Avancement:</strong> 
                                        <ProgressBar value={selectedChantier.avancement} className="mt-2" />
                                    </div>
                                    <div>
                                        <strong>Équipe:</strong> {selectedChantier.equipe}
                                    </div>
                                    <div>
                                        <strong>Budget:</strong> {new Intl.NumberFormat('fr-FR', {
                                            style: 'currency',
                                            currency: 'EUR'
                                        }).format(selectedChantier.montantPrevu)}
                                    </div>
                                </div>
                            </Card>
                        </div>

                        {/* Transitions disponibles */}
                        <div className="col-12 md:col-4">
                            <Card title="Actions Disponibles">
                                <div className="flex flex-column gap-3">
                                    {workflowTransitions[selectedChantier.statut as keyof typeof workflowTransitions]?.map((transition) => (
                                        <Button
                                            key={transition.value}
                                            label={transition.label}
                                            icon={`pi ${transition.icon}`}
                                            severity={transition.color}
                                            className="justify-content-start"
                                            onClick={() => setNouveauStatut(transition.value)}
                                            outlined={nouveauStatut !== transition.value}
                                        />
                                    ))}
                                    
                                    {workflowTransitions[selectedChantier.statut as keyof typeof workflowTransitions]?.length === 0 && (
                                        <div className="text-center text-color-secondary p-4">
                                            <i className="pi pi-lock text-3xl mb-3" />
                                            <div>Aucune transition disponible</div>
                                            <div className="text-sm">Statut final atteint</div>
                                        </div>
                                    )}
                                    
                                    {nouveauStatut && (
                                        <div className="mt-4">
                                            <label className="block text-sm font-medium mb-2">
                                                Commentaire (optionnel)
                                            </label>
                                            <InputTextarea
                                                value={commentaire}
                                                onChange={(e) => setCommentaire(e.target.value)}
                                                rows={3}
                                                placeholder="Ajoutez un commentaire sur cette transition..."
                                            />
                                            
                                            <div className="flex gap-2 mt-3">
                                                <Button
                                                    label="Confirmer la transition"
                                                    icon="pi pi-check"
                                                    severity="success"
                                                    onClick={executerTransition}
                                                />
                                                <Button
                                                    label="Annuler"
                                                    icon="pi pi-times"
                                                    severity={"secondary" as any}
                                                    outlined
                                                    onClick={() => {
                                                        setNouveauStatut('');
                                                        setCommentaire('');
                                                    }}
                                                />
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </Card>
                        </div>

                        {/* Historique */}
                        <div className="col-12 md:col-4">
                            <Card title="Historique des Changements">
                                <Timeline
                                    value={historique}
                                    align="left"
                                    content={(item) => (
                                        <div className="p-2">
                                            <div className="flex align-items-center gap-2 mb-1">
                                                <Tag 
                                                    value={statutsConfig[item.statut as keyof typeof statutsConfig]?.label} 
                                                    severity={statutsConfig[item.statut as keyof typeof statutsConfig]?.color as any}
                                                />
                                                {item.automatique && <Badge value="Auto" severity="info" />}
                                            </div>
                                            <div className="text-sm text-color-secondary mb-1">
                                                {item.date.toLocaleString('fr-FR')}
                                            </div>
                                            <div className="text-sm font-medium mb-1">
                                                {item.utilisateur}
                                            </div>
                                            <div className="text-sm">
                                                {item.commentaire}
                                            </div>
                                        </div>
                                    )}
                                />
                            </Card>
                        </div>
                    </div>
                )}
            </Dialog>
        </div>
    );
};

export default WorkflowChantiers;