'use client';

import React, { useState, useEffect, useRef } from 'react';
import { useParams } from 'next/navigation';
import { Card } from 'primereact/card';
import { Checkbox } from 'primereact/checkbox';
import { Button } from 'primereact/button';
import { ProgressBar } from 'primereact/progressbar';
import { Badge } from 'primereact/badge';
import { Toast } from 'primereact/toast';
import { Accordion, AccordionTab } from 'primereact/accordion';
import { TreeTable } from 'primereact/treetable';
import { Column } from 'primereact/column';
import { Dialog } from 'primereact/dialog';
import { InputTextarea } from 'primereact/inputtextarea';
import { Avatar } from 'primereact/avatar';
import { apiClient } from '../../../../../services/api-client';

/**
 * Interface pour les tâches d'exécution avec état de completion
 */
interface TacheExecution {
    id: string;
    nom: string;
    description?: string;
    ordreExecution: number;
    dureeEstimeeMinutes?: number;
    critique: boolean;
    bloquante: boolean;
    priorite: 'BASSE' | 'NORMALE' | 'HAUTE';
    niveauQualification?: string;
    nombreOperateursRequis: number;
    conditionsMeteo: string;
    outilsRequis?: string[];
    materiauxRequis?: string[];
    
    // État d'exécution
    terminee: boolean;
    dateCompletion?: Date;
    completeepar?: string;
    commentaires?: string;
    tempsRealise?: number; // en minutes
    difficulteRencontree?: 'AUCUNE' | 'FAIBLE' | 'MOYENNE' | 'ELEVEE';
}

interface SousPhaseExecution {
    id: string;
    nom: string;
    description?: string;
    ordreExecution: number;
    taches: TacheExecution[];
    
    // Calculé automatiquement
    avancement: number; // % basé sur les tâches terminées
    tachesTerminees: number;
    totalTaches: number;
    dureeRealisee: number; // en minutes
    dureeEstimee: number; // en minutes
}

interface PhaseExecution {
    id: string;
    nom: string;
    description?: string;
    ordreExecution: number;
    sousPhases: SousPhaseExecution[];
    
    // Calculé automatiquement  
    avancement: number; // % basé sur les sous-phases
    sousPhasesTerminees: number;
    totalSousPhases: number;
}

interface ChantierExecution {
    id: string;
    nom: string;
    client: string;
    dateDebut: Date;
    dateFinPrevue: Date;
    phases: PhaseExecution[];
    
    // Avancement global calculé
    avancementGlobal: number; // % basé sur toutes les tâches
    totalTachesTerminees: number;
    totalTaches: number;
}

/**
 * Page d'exécution granulaire d'un chantier
 * Permet de cocher les tâches terminées pour un suivi précis de l'avancement
 */
const ExecutionGranulaireChantier = () => {
    const { id } = useParams();
    const toast = useRef<Toast>(null);
    
    // États principaux
    const [chantier, setChantier] = useState<ChantierExecution | null>(null);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    
    // États pour les modals
    const [showCommentDialog, setShowCommentDialog] = useState(false);
    const [selectedTache, setSelectedTache] = useState<TacheExecution | null>(null);
    const [commentaires, setCommentaires] = useState('');
    const [tempsRealise, setTempsRealise] = useState<number>(0);
    const [difficulte, setDifficulte] = useState<'AUCUNE' | 'FAIBLE' | 'MOYENNE' | 'ELEVEE'>('AUCUNE');
    
    // États pour la vue
    const [activeIndex, setActiveIndex] = useState<number | number[]>(0);
    const [expandedKeys, setExpandedKeys] = useState<any>({});

    useEffect(() => {
        if (id) {
            loadChantierExecution(id as string);
        }
    }, [id]);

    /**
     * Charge les données d'exécution du chantier
     */
    const loadChantierExecution = async (chantierId: string) => {
        try {
            setLoading(true);
            
            // Charger les informations de base du chantier
            const chantierResponse = await apiClient.get(`/chantiers/${chantierId}`);
            const chantierData = chantierResponse.data;
            
            // Charger les phases avec leurs sous-phases et tâches
            const phasesResponse = await apiClient.get(`/chantiers/${chantierId}/phases`);
            const phasesData = phasesResponse.data;
            
            // Pour chaque phase, charger les tâches d'exécution
            const phasesWithExecution = await Promise.all(
                phasesData.map(async (phase: any) => {
                    const sousPhasesWithTaches = await Promise.all(
                        phase.sousPhases?.map(async (sousPhase: any) => {
                            // Charger les tâches et leur état d'exécution
                            const tachesExecution = await loadTachesExecution(chantierId, sousPhase.id);
                            
                            // Calculer l'avancement de la sous-phase
                            const tachesTerminees = tachesExecution.filter(t => t.terminee).length;
                            const avancement = tachesExecution.length > 0 ? 
                                (tachesTerminees / tachesExecution.length) * 100 : 0;
                            
                            const dureeRealisee = tachesExecution
                                .filter(t => t.terminee && t.tempsRealise)
                                .reduce((sum, t) => sum + (t.tempsRealise || 0), 0);
                            
                            const dureeEstimee = tachesExecution
                                .reduce((sum, t) => sum + (t.dureeEstimeeMinutes || 0), 0);
                            
                            return {
                                ...sousPhase,
                                taches: tachesExecution,
                                avancement: Math.round(avancement),
                                tachesTerminees,
                                totalTaches: tachesExecution.length,
                                dureeRealisee,
                                dureeEstimee
                            };
                        }) || []
                    );
                    
                    // Calculer l'avancement de la phase
                    const totalTaches = sousPhasesWithTaches.reduce((sum, sp) => sum + sp.totalTaches, 0);
                    const totalTachesTerminees = sousPhasesWithTaches.reduce((sum, sp) => sum + sp.tachesTerminees, 0);
                    const avancement = totalTaches > 0 ? (totalTachesTerminees / totalTaches) * 100 : 0;
                    
                    return {
                        ...phase,
                        sousPhases: sousPhasesWithTaches,
                        avancement: Math.round(avancement),
                        totalSousPhases: sousPhasesWithTaches.length,
                        sousPhasesTerminees: sousPhasesWithTaches.filter(sp => sp.avancement === 100).length
                    };
                })
            );
            
            // Calculer l'avancement global du chantier
            const totalTaches = phasesWithExecution.reduce((sum, phase) => 
                sum + phase.sousPhases.reduce((spSum, sp) => spSum + sp.totalTaches, 0), 0
            );
            const totalTachesTerminees = phasesWithExecution.reduce((sum, phase) => 
                sum + phase.sousPhases.reduce((spSum, sp) => spSum + sp.tachesTerminees, 0), 0
            );
            const avancementGlobal = totalTaches > 0 ? (totalTachesTerminees / totalTaches) * 100 : 0;
            
            setChantier({
                id: chantierData.id,
                nom: chantierData.nom,
                client: chantierData.client?.nom || chantierData.client,
                dateDebut: new Date(chantierData.dateDebut),
                dateFinPrevue: new Date(chantierData.dateFinPrevue),
                phases: phasesWithExecution,
                avancementGlobal: Math.round(avancementGlobal),
                totalTaches,
                totalTachesTerminees
            });
            
        } catch (error) {
            console.error('Erreur lors du chargement:', error);
            showToast('error', 'Erreur', 'Impossible de charger les données d\'exécution');
        } finally {
            setLoading(false);
        }
    };

    /**
     * Charge les tâches d'exécution pour une sous-phase
     */
    const loadTachesExecution = async (chantierId: string, sousPhaseId: string): Promise<TacheExecution[]> => {
        try {
            // Charger les templates de tâches
            const templatesResponse = await apiClient.get(`/tache-templates/by-sous-phase/${sousPhaseId}`);
            const templates = templatesResponse.data;
            
            // Charger les états d'exécution (s'ils existent)
            let etatsExecution = [];
            try {
                const etatsResponse = await apiClient.get(`/chantiers/${chantierId}/taches-execution/${sousPhaseId}`);
                etatsExecution = etatsResponse.data;
            } catch (error) {
                // Pas encore d'états d'exécution, on démarre avec toutes les tâches non terminées
                console.log('Aucun état d\'exécution trouvé, initialisation...');
            }
            
            // Combiner templates avec états d'exécution
            return templates.map((template: any) => {
                const etat = etatsExecution.find((e: any) => e.tacheTemplateId === template.id);
                return {
                    ...template,
                    terminee: etat?.terminee || false,
                    dateCompletion: etat?.dateCompletion ? new Date(etat.dateCompletion) : undefined,
                    completeepar: etat?.completeepar,
                    commentaires: etat?.commentaires,
                    tempsRealise: etat?.tempsRealise,
                    difficulteRencontree: etat?.difficulteRencontree || 'AUCUNE'
                };
            });
        } catch (error) {
            console.error('Erreur lors du chargement des tâches:', error);
            return [];
        }
    };

    /**
     * Marque une tâche comme terminée ou non terminée
     */
    const toggleTacheTerminee = async (tache: TacheExecution) => {
        if (!tache.terminee) {
            // Marquer comme terminée - ouvrir le dialog pour les détails
            setSelectedTache(tache);
            setCommentaires(tache.commentaires || '');
            setTempsRealise(tache.tempsRealise || tache.dureeEstimeeMinutes || 0);
            setDifficulte(tache.difficulteRencontree || 'AUCUNE');
            setShowCommentDialog(true);
        } else {
            // Marquer comme non terminée
            await saveTacheExecution(tache, false);
        }
    };

    /**
     * Sauvegarde l'état d'exécution d'une tâche
     */
    const saveTacheExecution = async (tache: TacheExecution, terminee: boolean, details?: any) => {
        try {
            setSaving(true);
            
            const executionData = {
                chantierID: id,
                tacheTemplateId: tache.id,
                terminee,
                dateCompletion: terminee ? new Date().toISOString() : null,
                completeepar: terminee ? 'CURRENT_USER' : null, // À remplacer par l'utilisateur connecté
                commentaires: details?.commentaires || '',
                tempsRealise: details?.tempsRealise || null,
                difficulteRencontree: details?.difficulte || 'AUCUNE'
            };
            
            await apiClient.post(`/chantiers/${id}/taches-execution`, executionData);
            
            showToast('success', 'Succès', 
                terminee ? 'Tâche marquée comme terminée' : 'Tâche marquée comme non terminée'
            );
            
            // Recharger les données pour mettre à jour l'avancement
            await loadChantierExecution(id as string);
            
        } catch (error) {
            console.error('Erreur lors de la sauvegarde:', error);
            showToast('error', 'Erreur', 'Impossible de sauvegarder l\'état de la tâche');
        } finally {
            setSaving(false);
        }
    };

    /**
     * Confirme la completion d'une tâche avec les détails
     */
    const confirmerCompletion = async () => {
        if (!selectedTache) return;
        
        await saveTacheExecution(selectedTache, true, {
            commentaires,
            tempsRealise,
            difficulte
        });
        
        setShowCommentDialog(false);
        setSelectedTache(null);
    };

    /**
     * Affiche un toast message
     */
    const showToast = (severity: 'success' | 'info' | 'warn' | 'error', summary: string, detail: string) => {
        toast.current?.show({ severity, summary, detail, life: 3000 });
    };

    /**
     * Template pour l'affichage d'une tâche avec checkbox
     */
    const renderTacheCheckbox = (tache: TacheExecution) => {
        const isDisabled = saving;
        
        return (
            <div 
                className={`flex align-items-center gap-3 p-3 border-round transition-colors ${
                    tache.terminee ? 'bg-green-50 border-green-200' : 'bg-white border-gray-200'
                } border-1 hover:bg-gray-50`}
            >
                <Checkbox
                    checked={tache.terminee}
                    onChange={() => toggleTacheTerminee(tache)}
                    disabled={isDisabled}
                />
                
                <div className="flex-1">
                    <div className={`font-medium ${tache.terminee ? 'line-through text-600' : ''}`}>
                        {tache.nom}
                    </div>
                    {tache.description && (
                        <div className="text-sm text-600 mt-1">{tache.description}</div>
                    )}
                    
                    <div className="flex gap-2 mt-2">
                        {tache.critique && <Badge value="Critique" severity="danger" className="p-badge-sm" />}
                        {tache.bloquante && <Badge value="Bloquante" severity="warning" className="p-badge-sm" />}
                        {tache.priorite === 'HAUTE' && <Badge value="Haute priorité" severity="info" className="p-badge-sm" />}
                    </div>
                </div>
                
                <div className="text-right text-sm">
                    {tache.dureeEstimeeMinutes && (
                        <div className="text-600">
                            Estimé: {Math.floor(tache.dureeEstimeeMinutes / 60)}h{tache.dureeEstimeeMinutes % 60}min
                        </div>
                    )}
                    {tache.terminee && tache.tempsRealise && (
                        <div className="text-green-600 font-medium">
                            Réalisé: {Math.floor(tache.tempsRealise / 60)}h{tache.tempsRealise % 60}min
                        </div>
                    )}
                </div>
            </div>
        );
    };

    if (loading) {
        return (
            <div className="flex justify-content-center align-items-center h-20rem">
                <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
                <span className="ml-2">Chargement de l'exécution du chantier...</span>
            </div>
        );
    }

    if (!chantier) {
        return (
            <div className="text-center">
                <h5>Chantier non trouvé</h5>
                <p>Impossible de charger les données d'exécution du chantier.</p>
            </div>
        );
    }

    return (
        <div className="grid">
            <Toast ref={toast} />
            
            {/* En-tête avec avancement global */}
            <div className="col-12">
                <Card>
                    <div className="flex justify-content-between align-items-start">
                        <div className="flex-1">
                            <h4 className="mt-0 mb-2">{chantier.nom}</h4>
                            <div className="text-600 mb-3">
                                Client: {chantier.client} • 
                                Début: {chantier.dateDebut.toLocaleDateString('fr-FR')} • 
                                Fin prévue: {chantier.dateFinPrevue.toLocaleDateString('fr-FR')}
                            </div>
                            
                            <div className="flex align-items-center gap-4">
                                <div className="flex-1">
                                    <div className="flex justify-content-between mb-2">
                                        <span className="font-medium">Avancement Global</span>
                                        <span className="font-bold text-lg">{chantier.avancementGlobal}%</span>
                                    </div>
                                    <ProgressBar 
                                        value={chantier.avancementGlobal} 
                                        className="mb-2"
                                        style={{ height: '12px' }}
                                    />
                                    <div className="text-sm text-600">
                                        {chantier.totalTachesTerminees} / {chantier.totalTaches} tâches terminées
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div className="text-right">
                            <Avatar 
                                icon="pi pi-chart-line" 
                                size="xlarge" 
                                className="bg-blue-100 text-blue-800"
                            />
                        </div>
                    </div>
                </Card>
            </div>

            {/* Phases avec sous-phases et tâches */}
            <div className="col-12">
                <Accordion activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
                    {chantier.phases.map((phase, phaseIndex) => (
                        <AccordionTab 
                            key={phase.id}
                            header={
                                <div className="flex justify-content-between align-items-center w-full pr-4">
                                    <div className="flex align-items-center gap-3">
                                        <Badge value={phase.ordreExecution} />
                                        <span className="font-medium">{phase.nom}</span>
                                    </div>
                                    <div className="flex align-items-center gap-2">
                                        <span className="text-sm">{phase.avancement}%</span>
                                        <ProgressBar 
                                            value={phase.avancement} 
                                            style={{ width: '100px', height: '8px' }}
                                            showValue={false}
                                        />
                                    </div>
                                </div>
                            }
                        >
                            <div className="grid">
                                {phase.sousPhases.map((sousPhase) => (
                                    <div key={sousPhase.id} className="col-12">
                                        <Card className="mb-3">
                                            <div className="flex justify-content-between align-items-center mb-3">
                                                <div>
                                                    <h6 className="mt-0 mb-1">{sousPhase.nom}</h6>
                                                    {sousPhase.description && (
                                                        <p className="text-600 mt-0 mb-2">{sousPhase.description}</p>
                                                    )}
                                                    <div className="text-sm text-500">
                                                        {sousPhase.tachesTerminees} / {sousPhase.totalTaches} tâches terminées
                                                    </div>
                                                </div>
                                                <div className="text-right">
                                                    <div className="text-lg font-bold mb-1">{sousPhase.avancement}%</div>
                                                    <ProgressBar 
                                                        value={sousPhase.avancement} 
                                                        style={{ width: '120px', height: '8px' }}
                                                        showValue={false}
                                                    />
                                                </div>
                                            </div>
                                            
                                            <div className="flex flex-column gap-2">
                                                {sousPhase.taches.map((tache) => (
                                                    <div key={tache.id}>
                                                        {renderTacheCheckbox(tache)}
                                                    </div>
                                                ))}
                                            </div>
                                        </Card>
                                    </div>
                                ))}
                            </div>
                        </AccordionTab>
                    ))}
                </Accordion>
            </div>

            {/* Dialog de completion de tâche */}
            <Dialog
                header="Finaliser la tâche"
                visible={showCommentDialog}
                onHide={() => setShowCommentDialog(false)}
                style={{ width: '50vw' }}
                breakpoints={{ '960px': '75vw', '641px': '90vw' }}
                modal
            >
                {selectedTache && (
                    <div className="p-fluid">
                        <div className="mb-4">
                            <h6 className="text-primary">{selectedTache.nom}</h6>
                            {selectedTache.description && (
                                <p className="text-600 mt-1">{selectedTache.description}</p>
                            )}
                        </div>
                        
                        <div className="field">
                            <label htmlFor="commentaires">Commentaires (optionnel)</label>
                            <InputTextarea
                                id="commentaires"
                                value={commentaires}
                                onChange={(e) => setCommentaires(e.target.value)}
                                rows={3}
                                placeholder="Commentaires sur la réalisation de cette tâche..."
                            />
                        </div>
                        
                        <div className="field">
                            <label>Temps réalisé (minutes)</label>
                            <input
                                type="number"
                                className="p-inputtext p-component"
                                value={tempsRealise}
                                onChange={(e) => setTempsRealise(parseInt(e.target.value) || 0)}
                                min={0}
                            />
                            {selectedTache.dureeEstimeeMinutes && (
                                <small className="text-600">
                                    Temps estimé: {selectedTache.dureeEstimeeMinutes} minutes
                                </small>
                            )}
                        </div>
                        
                        <div className="flex justify-content-end gap-2 mt-4">
                            <Button
                                label="Annuler"
                                icon="pi pi-times"
                                className="p-button-text"
                                onClick={() => setShowCommentDialog(false)}
                            />
                            <Button
                                label="Marquer comme terminée"
                                icon="pi pi-check"
                                onClick={confirmerCompletion}
                                loading={saving}
                            />
                        </div>
                    </div>
                )}
            </Dialog>
        </div>
    );
};

export default ExecutionGranulaireChantier;