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


import React, { useState, useEffect, useRef } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';
import { InputText } from 'primereact/inputtext';
import { Dropdown } from 'primereact/dropdown';
import { InputTextarea } from 'primereact/inputtextarea';
import { InputNumber } from 'primereact/inputnumber';
import { Checkbox } from 'primereact/checkbox';
import { Toast } from 'primereact/toast';
import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
import { TreeTable } from 'primereact/treetable';
import { Card } from 'primereact/card';
import { Badge } from 'primereact/badge';
import { ProgressBar } from 'primereact/progressbar';
import { apiClient } from '../../../../services/api-client';

/**
 * Interface pour les templates de tâches
 */
interface TacheTemplate {
    id: string;
    nom: string;
    description?: string;
    ordreExecution: number;
    dureeEstimeeMinutes?: number;
    critique: boolean;
    bloquante: boolean;
    priorite: 'BASSE' | 'NORMALE' | 'HAUTE';
    niveauQualification?: 'MANOEUVRE' | 'OUVRIER_SPECIALISE' | 'OUVRIER_QUALIFIE' | 'COMPAGNON' | 'CHEF_EQUIPE' | 'TECHNICIEN' | 'EXPERT';
    nombreOperateursRequis: number;
    outilsRequis?: string[];
    materiauxRequis?: string[];
    conditionsMeteo: 'TOUS_TEMPS' | 'TEMPS_SEC' | 'PAS_DE_VENT_FORT' | 'TEMPERATURE_POSITIVE' | 'PAS_DE_PLUIE' | 'INTERIEUR_UNIQUEMENT';
    sousPhaseParent: {
        id: string;
        nom: string;
    };
    actif: boolean;
}

interface SousPhaseTemplate {
    id: string;
    nom: string;
    description?: string;
    ordreExecution: number;
    taches: TacheTemplate[];
    statistiques?: {
        totalTaches: number;
        tachesCritiques: number;
        tachesBloquantes: number;
        dureeEstimeeMinutes: number;
    };
}

interface PhaseTemplate {
    id: string;
    nom: string;
    description?: string;
    ordreExecution: number;
    sousPhases: SousPhaseTemplate[];
}

/**
 * Page de gestion granulaire des templates de tâches
 * Permet la gestion complète de la hiérarchie Phase → Sous-phase → Tâche
 */
const GestionTachesTemplates = () => {
    const toast = useRef<Toast>(null);
    
    // États pour les données
    const [phases, setPhases] = useState<PhaseTemplate[]>([]);
    const [selectedPhase, setSelectedPhase] = useState<PhaseTemplate | null>(null);
    const [selectedSousPhase, setSelectedSousPhase] = useState<SousPhaseTemplate | null>(null);
    const [taches, setTaches] = useState<TacheTemplate[]>([]);
    
    // États pour les modals
    const [showTacheDialog, setShowTacheDialog] = useState(false);
    const [showSousPhaseDialog, setShowSousPhaseDialog] = useState(false);
    const [editingTache, setEditingTache] = useState<TacheTemplate | null>(null);
    
    // États pour les formulaires
    const [formTache, setFormTache] = useState<Partial<TacheTemplate>>({
        nom: '',
        description: '',
        critique: false,
        bloquante: false,
        priorite: 'NORMALE',
        nombreOperateursRequis: 1,
        conditionsMeteo: 'TOUS_TEMPS',
        actif: true
    });
    
    // États pour l'interface
    const [loading, setLoading] = useState(false);
    const [expandedRows, setExpandedRows] = useState({});

    // Options pour les dropdowns
    const prioriteOptions = [
        { label: 'Basse', value: 'BASSE' },
        { label: 'Normale', value: 'NORMALE' },
        { label: 'Haute', value: 'HAUTE' }
    ];

    const qualificationOptions = [
        { label: 'Manœuvre', value: 'MANOEUVRE' },
        { label: 'Ouvrier spécialisé', value: 'OUVRIER_SPECIALISE' },
        { label: 'Ouvrier qualifié', value: 'OUVRIER_QUALIFIE' },
        { label: 'Compagnon', value: 'COMPAGNON' },
        { label: 'Chef d\'équipe', value: 'CHEF_EQUIPE' },
        { label: 'Technicien', value: 'TECHNICIEN' },
        { label: 'Expert', value: 'EXPERT' }
    ];

    const meteoOptions = [
        { label: 'Tous temps', value: 'TOUS_TEMPS' },
        { label: 'Temps sec uniquement', value: 'TEMPS_SEC' },
        { label: 'Pas de vent fort', value: 'PAS_DE_VENT_FORT' },
        { label: 'Température positive', value: 'TEMPERATURE_POSITIVE' },
        { label: 'Pas de pluie', value: 'PAS_DE_PLUIE' },
        { label: 'Intérieur uniquement', value: 'INTERIEUR_UNIQUEMENT' }
    ];

    // Chargement des données au montage
    useEffect(() => {
        loadPhaseTemplates();
    }, []);

    // Chargement des tâches quand une sous-phase est sélectionnée
    useEffect(() => {
        if (selectedSousPhase) {
            loadTachesForSousPhase(selectedSousPhase.id);
        }
    }, [selectedSousPhase]);

    /**
     * Charge tous les templates de phases pour MAISON_INDIVIDUELLE
     */
    const loadPhaseTemplates = async () => {
        try {
            setLoading(true);
            const response = await apiClient.get('/phase-templates/by-type/MAISON_INDIVIDUELLE');
            
            // Pour chaque phase, charger ses sous-phases et tâches
            const phasesWithDetails = await Promise.all(
                response.data.map(async (phase: PhaseTemplate) => {
                    const sousPhases = await loadSousPhasesForPhase(phase.id);
                    return { ...phase, sousPhases };
                })
            );
            
            setPhases(phasesWithDetails);
            if (phasesWithDetails.length > 0) {
                setSelectedPhase(phasesWithDetails[0]);
            }
        } catch (error) {
            showToast('error', 'Erreur', 'Impossible de charger les templates de phases');
        } finally {
            setLoading(false);
        }
    };

    /**
     * Charge les sous-phases pour une phase donnée
     */
    const loadSousPhasesForPhase = async (phaseId: string): Promise<SousPhaseTemplate[]> => {
        try {
            const response = await apiClient.get(`/sous-phase-templates/by-phase/${phaseId}`);
            
            // Pour chaque sous-phase, charger ses tâches et statistiques
            const sousPhasesWithTaches = await Promise.all(
                response.data.map(async (sousPhase: SousPhaseTemplate) => {
                    const [taches, statistiques] = await Promise.all([
                        loadTachesForSousPhase(sousPhase.id),
                        loadStatistiquesForSousPhase(sousPhase.id)
                    ]);
                    return { ...sousPhase, taches, statistiques };
                })
            );
            
            return sousPhasesWithTaches;
        } catch (error) {
            console.error('Erreur lors du chargement des sous-phases:', error);
            return [];
        }
    };

    /**
     * Charge les tâches pour une sous-phase donnée
     */
    const loadTachesForSousPhase = async (sousPhaseId: string): Promise<TacheTemplate[]> => {
        try {
            const response = await apiClient.get(`/tache-templates/by-sous-phase/${sousPhaseId}`);
            setTaches(response.data);
            return response.data;
        } catch (error) {
            console.error('Erreur lors du chargement des tâches:', error);
            return [];
        }
    };

    /**
     * Charge les statistiques pour une sous-phase donnée
     */
    const loadStatistiquesForSousPhase = async (sousPhaseId: string) => {
        try {
            const response = await apiClient.get(`/tache-templates/stats/by-sous-phase/${sousPhaseId}`);
            return response.data;
        } catch (error) {
            console.error('Erreur lors du chargement des statistiques:', error);
            return null;
        }
    };

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

    /**
     * Ouvre le dialog de création/édition d'une tâche
     */
    const openTacheDialog = (tache?: TacheTemplate) => {
        if (!selectedSousPhase) {
            showToast('warn', 'Attention', 'Veuillez d\'abord sélectionner une sous-phase');
            return;
        }

        if (tache) {
            setEditingTache(tache);
            setFormTache({
                nom: tache.nom,
                description: tache.description,
                dureeEstimeeMinutes: tache.dureeEstimeeMinutes,
                critique: tache.critique,
                bloquante: tache.bloquante,
                priorite: tache.priorite,
                niveauQualification: tache.niveauQualification,
                nombreOperateursRequis: tache.nombreOperateursRequis,
                conditionsMeteo: tache.conditionsMeteo,
                outilsRequis: tache.outilsRequis,
                materiauxRequis: tache.materiauxRequis
            });
        } else {
            setEditingTache(null);
            setFormTache({
                nom: '',
                description: '',
                critique: false,
                bloquante: false,
                priorite: 'NORMALE',
                nombreOperateursRequis: 1,
                conditionsMeteo: 'TOUS_TEMPS',
                actif: true
            });
        }
        
        setShowTacheDialog(true);
    };

    /**
     * Sauvegarde une tâche (création ou modification)
     */
    const saveTache = async () => {
        if (!selectedSousPhase || !formTache.nom?.trim()) {
            showToast('warn', 'Attention', 'Le nom de la tâche est obligatoire');
            return;
        }

        try {
            const tacheData = {
                ...formTache,
                sousPhaseParent: { id: selectedSousPhase.id }
            };

            if (editingTache) {
                await apiClient.put(`/tache-templates/${editingTache.id}`, tacheData);
                showToast('success', 'Succès', 'Tâche modifiée avec succès');
            } else {
                await apiClient.post('/tache-templates', tacheData);
                showToast('success', 'Succès', 'Tâche créée avec succès');
            }

            setShowTacheDialog(false);
            await loadTachesForSousPhase(selectedSousPhase.id);
            await loadPhaseTemplates(); // Recharger pour mettre à jour les statistiques
        } catch (error) {
            showToast('error', 'Erreur', 'Impossible de sauvegarder la tâche');
        }
    };

    /**
     * Supprime une tâche avec confirmation
     */
    const deleteTache = (tache: TacheTemplate) => {
        confirmDialog({
            message: `Êtes-vous sûr de vouloir supprimer la tâche "${tache.nom}" ?`,
            header: 'Confirmation de suppression',
            icon: 'pi pi-exclamation-triangle',
            acceptLabel: 'Oui',
            rejectLabel: 'Non',
            accept: async () => {
                try {
                    await apiClient.delete(`/tache-templates/${tache.id}`);
                    showToast('success', 'Succès', 'Tâche supprimée avec succès');
                    await loadTachesForSousPhase(selectedSousPhase!.id);
                    await loadPhaseTemplates();
                } catch (error) {
                    showToast('error', 'Erreur', 'Impossible de supprimer la tâche');
                }
            }
        });
    };

    /**
     * Template pour l'affichage des actions dans le tableau
     */
    const actionBodyTemplate = (rowData: TacheTemplate) => {
        return (
            <div className="flex gap-2">
                <Button
                    icon="pi pi-pencil"
                    className="p-button-sm p-button-text p-button-rounded"
                    onClick={() => openTacheDialog(rowData)}
                    tooltip="Modifier"
                />
                <Button
                    icon="pi pi-trash"
                    className="p-button-sm p-button-text p-button-rounded p-button-danger"
                    onClick={() => deleteTache(rowData)}
                    tooltip="Supprimer"
                />
            </div>
        );
    };

    /**
     * Template pour l'affichage de la priorité
     */
    const prioriteBodyTemplate = (rowData: TacheTemplate) => {
        const severity = rowData.priorite === 'HAUTE' ? 'danger' : 
                        rowData.priorite === 'NORMALE' ? 'info' : 'success';
        return <Badge value={rowData.priorite} severity={severity} />;
    };

    /**
     * Template pour l'affichage de la durée
     */
    const dureeBodyTemplate = (rowData: TacheTemplate) => {
        if (!rowData.dureeEstimeeMinutes) return '-';
        
        const heures = Math.floor(rowData.dureeEstimeeMinutes / 60);
        const minutes = rowData.dureeEstimeeMinutes % 60;
        
        if (heures > 0) {
            return `${heures}h${minutes > 0 ? ` ${minutes}min` : ''}`;
        }
        return `${minutes}min`;
    };

    /**
     * Template pour l'affichage des indicateurs critique/bloquante
     */
    const indicateursBodyTemplate = (rowData: TacheTemplate) => {
        return (
            <div className="flex gap-1">
                {rowData.critique && (
                    <Badge value="C" severity="danger" className="p-badge-sm" />
                )}
                {rowData.bloquante && (
                    <Badge value="B" severity="warning" className="p-badge-sm" />
                )}
            </div>
        );
    };

    /**
     * Template pour l'affichage des statistiques d'une sous-phase
     */
    const renderSousPhaseStats = (sousPhase: SousPhaseTemplate) => {
        const stats = sousPhase.statistiques;
        if (!stats) return null;

        const pourcentageCritiques = stats.totalTaches > 0 ? 
            (stats.tachesCritiques / stats.totalTaches * 100) : 0;
        
        const dureeHeures = stats.dureeEstimeeMinutes / 60;

        return (
            <div className="flex gap-4 text-sm">
                <span><i className="pi pi-list mr-1"></i>{stats.totalTaches} tâches</span>
                <span><i className="pi pi-exclamation-triangle mr-1"></i>{stats.tachesCritiques} critiques</span>
                <span><i className="pi pi-lock mr-1"></i>{stats.tachesBloquantes} bloquantes</span>
                <span><i className="pi pi-clock mr-1"></i>{dureeHeures.toFixed(1)}h</span>
            </div>
        );
    };

    return (
        <div className="grid">
            <Toast ref={toast} />
            <ConfirmDialog />
            
            {/* Header */}
            <div className="col-12">
                <div className="card">
                    <div className="flex justify-content-between align-items-center">
                        <div>
                            <h5>Gestion Granulaire des Tâches</h5>
                            <p className="text-600 mt-0">
                                Système de tracking détaillé : Phase → Sous-phase → Tâche
                            </p>
                        </div>
                        <Button
                            label="Nouvelle Tâche"
                            icon="pi pi-plus"
                            onClick={() => openTacheDialog()}
                            disabled={!selectedSousPhase}
                        />
                    </div>
                </div>
            </div>

            {/* Sélection de Phase et Sous-phase */}
            <div className="col-12">
                <div className="grid">
                    {/* Phases */}
                    <div className="col-12 md:col-6">
                        <Card title="Phases" className="h-full">
                            <div className="flex flex-column gap-3">
                                {phases.map((phase) => (
                                    <div
                                        key={phase.id}
                                        className={`p-3 border-round cursor-pointer transition-colors ${
                                            selectedPhase?.id === phase.id
                                                ? 'bg-blue-50 border-blue-200 border-2'
                                                : 'bg-gray-50 border-gray-200 border-1'
                                        }`}
                                        onClick={() => {
                                            setSelectedPhase(phase);
                                            setSelectedSousPhase(null);
                                            setTaches([]);
                                        }}
                                    >
                                        <div className="flex justify-content-between align-items-center">
                                            <div>
                                                <div className="font-semibold">{phase.nom}</div>
                                                <div className="text-sm text-600">
                                                    {phase.sousPhases?.length || 0} sous-phases
                                                </div>
                                            </div>
                                            <Badge value={phase.ordreExecution} className="p-badge-lg" />
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </Card>
                    </div>

                    {/* Sous-phases */}
                    <div className="col-12 md:col-6">
                        <Card title={`Sous-phases ${selectedPhase ? `- ${selectedPhase.nom}` : ''}`} className="h-full">
                            {selectedPhase ? (
                                <div className="flex flex-column gap-3">
                                    {selectedPhase.sousPhases?.map((sousPhase) => (
                                        <div
                                            key={sousPhase.id}
                                            className={`p-3 border-round cursor-pointer transition-colors ${
                                                selectedSousPhase?.id === sousPhase.id
                                                    ? 'bg-green-50 border-green-200 border-2'
                                                    : 'bg-gray-50 border-gray-200 border-1'
                                            }`}
                                            onClick={() => setSelectedSousPhase(sousPhase)}
                                        >
                                            <div className="flex justify-content-between align-items-start mb-2">
                                                <div className="flex-1">
                                                    <div className="font-semibold">{sousPhase.nom}</div>
                                                    {sousPhase.description && (
                                                        <div className="text-sm text-600 mt-1">
                                                            {sousPhase.description}
                                                        </div>
                                                    )}
                                                </div>
                                                <Badge value={sousPhase.ordreExecution} />
                                            </div>
                                            {renderSousPhaseStats(sousPhase)}
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <p className="text-center text-500 mt-4">
                                    Sélectionnez une phase pour voir ses sous-phases
                                </p>
                            )}
                        </Card>
                    </div>
                </div>
            </div>

            {/* Tableau des Tâches */}
            <div className="col-12">
                <Card title={`Tâches ${selectedSousPhase ? `- ${selectedSousPhase.nom}` : ''}`}>
                    {selectedSousPhase ? (
                        <DataTable
                            value={taches}
                            loading={loading}
                            emptyMessage="Aucune tâche trouvée"
                            paginator
                            rows={10}
                            className="p-datatable-gridlines"
                            responsiveLayout="scroll"
                        >
                            <Column
                                field="ordreExecution"
                                header="Ordre"
                                style={{ width: '80px' }}
                                sortable
                            />
                            <Column
                                field="nom"
                                header="Nom de la tâche"
                                sortable
                            />
                            <Column
                                field="dureeEstimeeMinutes"
                                header="Durée"
                                body={dureeBodyTemplate}
                                style={{ width: '100px' }}
                                sortable
                            />
                            <Column
                                field="priorite"
                                header="Priorité"
                                body={prioriteBodyTemplate}
                                style={{ width: '120px' }}
                                sortable
                            />
                            <Column
                                field="nombreOperateursRequis"
                                header="Opérateurs"
                                style={{ width: '100px' }}
                                sortable
                            />
                            <Column
                                header="Indicateurs"
                                body={indicateursBodyTemplate}
                                style={{ width: '100px' }}
                            />
                            <Column
                                field="niveauQualification"
                                header="Qualification"
                                style={{ width: '140px' }}
                                sortable
                            />
                            <Column
                                header="Actions"
                                body={actionBodyTemplate}
                                style={{ width: '120px' }}
                            />
                        </DataTable>
                    ) : (
                        <p className="text-center text-500 mt-4">
                            Sélectionnez une sous-phase pour voir ses tâches
                        </p>
                    )}
                </Card>
            </div>

            {/* Dialog de Création/Édition de Tâche */}
            <Dialog
                header={editingTache ? 'Modifier la tâche' : 'Nouvelle tâche'}
                visible={showTacheDialog}
                onHide={() => setShowTacheDialog(false)}
                style={{ width: '60vw' }}
                breakpoints={{ '960px': '75vw', '641px': '90vw' }}
                modal
            >
                <div className="grid formgrid p-fluid">
                    <div className="col-12 md:col-6 field">
                        <label htmlFor="nom">Nom de la tâche *</label>
                        <InputText
                            id="nom"
                            value={formTache.nom || ''}
                            onChange={(e) => setFormTache({ ...formTache, nom: e.target.value })}
                            placeholder="Nom de la tâche..."
                        />
                    </div>

                    <div className="col-12 md:col-6 field">
                        <label htmlFor="duree">Durée estimée (minutes)</label>
                        <InputNumber
                            id="duree"
                            value={formTache.dureeEstimeeMinutes}
                            onValueChange={(e) => setFormTache({ ...formTache, dureeEstimeeMinutes: e.value || 0 })}
                            min={0}
                            placeholder="Durée en minutes"
                        />
                    </div>

                    <div className="col-12 field">
                        <label htmlFor="description">Description</label>
                        <InputTextarea
                            id="description"
                            value={formTache.description || ''}
                            onChange={(e) => setFormTache({ ...formTache, description: e.target.value })}
                            rows={3}
                            placeholder="Description détaillée de la tâche..."
                        />
                    </div>

                    <div className="col-12 md:col-4 field">
                        <label htmlFor="priorite">Priorité</label>
                        <Dropdown
                            id="priorite"
                            value={formTache.priorite}
                            options={prioriteOptions}
                            onChange={(e) => setFormTache({ ...formTache, priorite: e.value })}
                        />
                    </div>

                    <div className="col-12 md:col-4 field">
                        <label htmlFor="operateurs">Nombre d'opérateurs</label>
                        <InputNumber
                            id="operateurs"
                            value={formTache.nombreOperateursRequis}
                            onValueChange={(e) => setFormTache({ ...formTache, nombreOperateursRequis: e.value || 1 })}
                            min={1}
                            max={10}
                        />
                    </div>

                    <div className="col-12 md:col-4 field">
                        <label htmlFor="qualification">Niveau de qualification</label>
                        <Dropdown
                            id="qualification"
                            value={formTache.niveauQualification}
                            options={qualificationOptions}
                            onChange={(e) => setFormTache({ ...formTache, niveauQualification: e.value })}
                            placeholder="Sélectionner..."
                        />
                    </div>

                    <div className="col-12 md:col-6 field">
                        <label htmlFor="meteo">Conditions météorologiques</label>
                        <Dropdown
                            id="meteo"
                            value={formTache.conditionsMeteo}
                            options={meteoOptions}
                            onChange={(e) => setFormTache({ ...formTache, conditionsMeteo: e.value })}
                        />
                    </div>

                    <div className="col-12 md:col-6 field">
                        <div className="flex flex-column gap-3">
                            <div className="flex align-items-center">
                                <Checkbox
                                    inputId="critique"
                                    checked={formTache.critique || false}
                                    onChange={(e) => setFormTache({ ...formTache, critique: e.checked })}
                                />
                                <label htmlFor="critique" className="ml-2">Tâche critique</label>
                            </div>
                            <div className="flex align-items-center">
                                <Checkbox
                                    inputId="bloquante"
                                    checked={formTache.bloquante || false}
                                    onChange={(e) => setFormTache({ ...formTache, bloquante: e.checked })}
                                />
                                <label htmlFor="bloquante" className="ml-2">Tâche bloquante</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="flex justify-content-end gap-2 mt-4">
                    <Button
                        label="Annuler"
                        icon="pi pi-times"
                        className="p-button-text"
                        onClick={() => setShowTacheDialog(false)}
                    />
                    <Button
                        label="Sauvegarder"
                        icon="pi pi-check"
                        onClick={saveTache}
                    />
                </div>
            </Dialog>
        </div>
    );
};

export default GestionTachesTemplates;