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


import React, { useState, useEffect } from 'react';
import { Card } from 'primereact/card';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import { Dropdown } from 'primereact/dropdown';
import { MultiSelect } from 'primereact/multiselect';
import { Button } from 'primereact/button';
import { Toolbar } from 'primereact/toolbar';
import { Message } from 'primereact/message';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Tag } from 'primereact/tag';
import { useRouter, useParams } from 'next/navigation';
import { apiClient } from '../../../../../services/api-client';

interface EquipeEdit {
    nom: string;
    description: string;
    specialite: string;
    chefEquipeId?: number;
    employeIds: number[];
    competencesRequises: string[];
    localisation: string;
}

interface Employe {
    id: number;
    nom: string;
    prenom: string;
    metier: string;
    statut: string;
    competences: string[];
    niveauExperience: string;
}

const EditEquipePage = () => {
    const [equipe, setEquipe] = useState<EquipeEdit>({
        nom: '',
        description: '',
        specialite: '',
        employeIds: [],
        competencesRequises: [],
        localisation: ''
    });
    const [equipeOriginale, setEquipeOriginale] = useState<any>(null);
    const [employes, setEmployes] = useState<Employe[]>([]);
    const [employesDisponibles, setEmployesDisponibles] = useState<Employe[]>([]);
    const [employesSelectionnes, setEmployesSelectionnes] = useState<Employe[]>([]);
    const [loading, setLoading] = useState(false);
    const [loadingData, setLoadingData] = useState(true);
    const [errors, setErrors] = useState<{ [key: string]: string }>({});
    const router = useRouter();
    const params = useParams();
    const equipeId = params.id;

    const specialiteOptions = [
        { label: 'Gros œuvre', value: 'GROS_OEUVRE' },
        { label: 'Second œuvre', value: 'SECOND_OEUVRE' },
        { label: 'Finitions', value: 'FINITIONS' },
        { label: 'Électricité', value: 'ELECTRICITE' },
        { label: 'Plomberie', value: 'PLOMBERIE' },
        { label: 'Charpente', value: 'CHARPENTE' },
        { label: 'Couverture', value: 'COUVERTURE' },
        { label: 'Terrassement', value: 'TERRASSEMENT' }
    ];

    const competencesOptions = [
        { label: 'Maçonnerie', value: 'MACONNERIE' },
        { label: 'Coffrage', value: 'COFFRAGE' },
        { label: 'Ferraillage', value: 'FERRAILLAGE' },
        { label: 'Électricité générale', value: 'ELECTRICITE_GENERALE' },
        { label: 'Électricité industrielle', value: 'ELECTRICITE_INDUSTRIELLE' },
        { label: 'Plomberie sanitaire', value: 'PLOMBERIE_SANITAIRE' },
        { label: 'Chauffage', value: 'CHAUFFAGE' },
        { label: 'Climatisation', value: 'CLIMATISATION' },
        { label: 'Charpente bois', value: 'CHARPENTE_BOIS' },
        { label: 'Charpente métallique', value: 'CHARPENTE_METALLIQUE' },
        { label: 'Couverture tuile', value: 'COUVERTURE_TUILE' },
        { label: 'Étanchéité', value: 'ETANCHEITE' },
        { label: 'Peinture', value: 'PEINTURE' },
        { label: 'Carrelage', value: 'CARRELAGE' },
        { label: 'Parquet', value: 'PARQUET' },
        { label: 'Plâtrerie', value: 'PLATRERIE' },
        { label: 'Conduite d\'engins', value: 'CONDUITE_ENGINS' },
        { label: 'Terrassement', value: 'TERRASSEMENT' },
        { label: 'VRD', value: 'VRD' }
    ];

    useEffect(() => {
        if (equipeId) {
            loadEquipeData();
            loadEmployesDisponibles();
        }
    }, [equipeId]);

    const loadEquipeData = async () => {
        try {
            console.log('🔄 Chargement des données équipe...', equipeId);
            const response = await apiClient.get(`/api/equipes/${equipeId}`);
            const equipeData = response.data;
            console.log('✅ Données équipe chargées:', equipeData);
            
            setEquipeOriginale(equipeData);
            setEquipe({
                nom: equipeData.nom,
                description: equipeData.description || '',
                specialite: equipeData.specialite,
                chefEquipeId: equipeData.chefEquipeId,
                employeIds: equipeData.employes?.map((emp: any) => emp.id) || [],
                competencesRequises: equipeData.competencesEquipe || [],
                localisation: equipeData.localisation || ''
            });
            
            setEmployesSelectionnes(equipeData.employes || []);
        } catch (error) {
            console.error('❌ Erreur lors du chargement:', error);
        }
    };

    const loadEmployesDisponibles = async () => {
        try {
            setLoadingData(true);
            console.log('🔄 Chargement des employés disponibles...');
            const response = await apiClient.get('/api/employes/disponibles');
            console.log('✅ Employés disponibles chargés:', response.data);
            setEmployesDisponibles(response.data || []);
        } catch (error) {
            console.error('❌ Erreur lors du chargement des employés:', error);
        } finally {
            setLoadingData(false);
        }
    };

    const validateForm = () => {
        const newErrors: { [key: string]: string } = {};

        if (!equipe.nom.trim()) {
            newErrors.nom = 'Le nom de l\'équipe est requis';
        }

        if (!equipe.specialite) {
            newErrors.specialite = 'La spécialité est requise';
        }

        if (equipe.employeIds.length === 0) {
            newErrors.employes = 'Au moins un employé doit être sélectionné';
        }

        if (equipe.competencesRequises.length === 0) {
            newErrors.competences = 'Au moins une compétence doit être sélectionnée';
        }

        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        if (!validateForm()) {
            return;
        }

        try {
            setLoading(true);
            console.log('🔄 Mise à jour de l\'équipe...', equipe);

            const response = await apiClient.put(`/api/equipes/${equipeId}`, equipe);
            console.log('✅ Équipe mise à jour avec succès:', response.data);

            router.push(`/equipes/${equipeId}`);
        } catch (error) {
            console.error('❌ Erreur lors de la mise à jour:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleEmployeSelection = (selectedEmployeIds: number[]) => {
        setEquipe({ ...equipe, employeIds: selectedEmployeIds });
        
        // Mettre à jour la liste des employés sélectionnés pour l'affichage
        const allEmployes = [...employesDisponibles, ...(equipeOriginale?.employes || [])];
        const selected = allEmployes.filter(emp => selectedEmployeIds.includes(emp.id));
        setEmployesSelectionnes(selected);
        
        // Auto-sélectionner les compétences des employés sélectionnés
        const competencesEmployes = selected.flatMap(emp => emp.competences || []);
        const competencesUniques = [...new Set(competencesEmployes)];
        setEquipe(prev => ({ 
            ...prev, 
            competencesRequises: [...new Set([...prev.competencesRequises, ...competencesUniques])]
        }));
    };

    const employeOptionTemplate = (option: Employe) => {
        return (
            <div className="flex align-items-center gap-2">
                <div>
                    <div className="font-medium">{option.prenom} {option.nom}</div>
                    <div className="text-sm text-500">{option.metier} - {option.niveauExperience}</div>
                </div>
            </div>
        );
    };

    const employeSelectedTemplate = (option: Employe) => {
        return `${option.prenom} ${option.nom}`;
    };

    const metierBodyTemplate = (rowData: Employe) => {
        const getMetierColor = (metier: string) => {
            const colors: { [key: string]: string } = {
                'MACON': 'info',
                'ELECTRICIEN': 'warning',
                'PLOMBIER': 'primary',
                'CHARPENTIER': 'success',
                'PEINTRE': 'secondary',
                'CHEF_EQUIPE': 'danger',
                'CONDUCTEUR': 'help'
            };
            return colors[metier] || 'secondary';
        };

        return <Tag value={rowData.metier} severity={getMetierColor(rowData.metier) as any} />;
    };

    const competencesBodyTemplate = (rowData: Employe) => {
        return (
            <div className="flex flex-wrap gap-1">
                {rowData.competences?.slice(0, 2).map((comp, index) => (
                    <Tag key={index} value={comp} className="p-tag-sm" />
                ))}
                {rowData.competences?.length > 2 && (
                    <span className="text-500">+{rowData.competences.length - 2}</span>
                )}
            </div>
        );
    };

    const leftToolbarTemplate = () => {
        return (
            <div className="flex flex-wrap gap-2">
                <Button
                    label="Retour"
                    icon="pi pi-arrow-left"
                    className="p-button-outlined"
                    onClick={() => router.push(`/equipes/${equipeId}`)}
                />
                <Button
                    label="Annuler"
                    icon="pi pi-times"
                    className="p-button-outlined"
                    onClick={() => router.push(`/equipes/${equipeId}`)}
                />
            </div>
        );
    };

    const rightToolbarTemplate = () => {
        return (
            <div className="flex gap-2">
                <Button
                    label="Réinitialiser"
                    icon="pi pi-refresh"
                    className="p-button-outlined"
                    onClick={() => {
                        if (equipeOriginale) {
                            setEquipe({
                                nom: equipeOriginale.nom,
                                description: equipeOriginale.description || '',
                                specialite: equipeOriginale.specialite,
                                chefEquipeId: equipeOriginale.chefEquipeId,
                                employeIds: equipeOriginale.employes?.map((emp: any) => emp.id) || [],
                                competencesRequises: equipeOriginale.competencesEquipe || [],
                                localisation: equipeOriginale.localisation || ''
                            });
                            setEmployesSelectionnes(equipeOriginale.employes || []);
                        }
                    }}
                />
                <Button
                    label="Enregistrer"
                    icon="pi pi-check"
                    className="p-button-success"
                    loading={loading}
                    onClick={handleSubmit}
                />
            </div>
        );
    };

    if (loadingData) {
        return (
            <div className="grid">
                <div className="col-12">
                    <Card>
                        <div className="flex justify-content-center">
                            <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }} />
                        </div>
                    </Card>
                </div>
            </div>
        );
    }

    // Combiner les employés disponibles avec les employés actuels de l'équipe
    const tousEmployes = [
        ...employesDisponibles,
        ...(equipeOriginale?.employes || []).filter((emp: any) => 
            !employesDisponibles.some(disp => disp.id === emp.id)
        )
    ];

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

            <div className="col-12 lg:col-8">
                <Card title={`Modifier l'équipe: ${equipeOriginale?.nom}`}>
                    <form onSubmit={handleSubmit} className="p-fluid">
                        <div className="grid">
                            <div className="col-12 md:col-6">
                                <div className="field">
                                    <label htmlFor="nom" className="font-medium">
                                        Nom de l'équipe *
                                    </label>
                                    <InputText
                                        id="nom"
                                        value={equipe.nom}
                                        onChange={(e) => setEquipe({ ...equipe, nom: e.target.value })}
                                        className={errors.nom ? 'p-invalid' : ''}
                                        placeholder="Ex: Équipe Gros Œuvre A"
                                    />
                                    {errors.nom && <small className="p-error">{errors.nom}</small>}
                                </div>
                            </div>

                            <div className="col-12 md:col-6">
                                <div className="field">
                                    <label htmlFor="specialite" className="font-medium">
                                        Spécialité *
                                    </label>
                                    <Dropdown
                                        id="specialite"
                                        value={equipe.specialite}
                                        options={specialiteOptions}
                                        onChange={(e) => setEquipe({ ...equipe, specialite: e.value })}
                                        placeholder="Sélectionner une spécialité"
                                        className={errors.specialite ? 'p-invalid' : ''}
                                    />
                                    {errors.specialite && <small className="p-error">{errors.specialite}</small>}
                                </div>
                            </div>

                            <div className="col-12">
                                <div className="field">
                                    <label htmlFor="description" className="font-medium">
                                        Description
                                    </label>
                                    <InputTextarea
                                        id="description"
                                        value={equipe.description}
                                        onChange={(e) => setEquipe({ ...equipe, description: e.target.value })}
                                        rows={3}
                                        placeholder="Description de l'équipe et de ses missions..."
                                    />
                                </div>
                            </div>

                            <div className="col-12">
                                <div className="field">
                                    <label htmlFor="localisation" className="font-medium">
                                        Localisation
                                    </label>
                                    <InputText
                                        id="localisation"
                                        value={equipe.localisation}
                                        onChange={(e) => setEquipe({ ...equipe, localisation: e.target.value })}
                                        placeholder="Ville ou région de base"
                                    />
                                </div>
                            </div>

                            <div className="col-12">
                                <div className="field">
                                    <label htmlFor="employes" className="font-medium">
                                        Employés de l'équipe *
                                    </label>
                                    <MultiSelect
                                        id="employes"
                                        value={equipe.employeIds}
                                        options={tousEmployes}
                                        onChange={(e) => handleEmployeSelection(e.value)}
                                        optionLabel="nom"
                                        optionValue="id"
                                        placeholder="Sélectionner les employés"
                                        itemTemplate={employeOptionTemplate}
                                        selectedItemTemplate={employeSelectedTemplate}
                                        className={errors.employes ? 'p-invalid' : ''}
                                        filter
                                        showClear
                                    />
                                    {errors.employes && <small className="p-error">{errors.employes}</small>}
                                </div>
                            </div>

                            <div className="col-12">
                                <div className="field">
                                    <label htmlFor="competences" className="font-medium">
                                        Compétences de l'équipe *
                                    </label>
                                    <MultiSelect
                                        id="competences"
                                        value={equipe.competencesRequises}
                                        options={competencesOptions}
                                        onChange={(e) => setEquipe({ ...equipe, competencesRequises: e.value })}
                                        placeholder="Sélectionner les compétences"
                                        className={errors.competences ? 'p-invalid' : ''}
                                        filter
                                        showClear
                                    />
                                    {errors.competences && <small className="p-error">{errors.competences}</small>}
                                </div>
                            </div>
                        </div>
                    </form>
                </Card>
            </div>

            <div className="col-12 lg:col-4">
                <Card title="Employés sélectionnés" className="mb-4">
                    {employesSelectionnes.length > 0 ? (
                        <DataTable value={employesSelectionnes} responsiveLayout="scroll">
                            <Column 
                                field="nom" 
                                header="Nom" 
                                body={(rowData) => `${rowData.prenom} ${rowData.nom}`}
                            />
                            <Column field="metier" header="Métier" body={metierBodyTemplate} />
                            <Column field="competences" header="Compétences" body={competencesBodyTemplate} />
                        </DataTable>
                    ) : (
                        <Message severity="info" text="Aucun employé sélectionné" />
                    )}
                </Card>

                <Card title="Informations">
                    <div className="text-sm">
                        <p className="mb-2">
                            <i className="pi pi-info-circle text-blue-500 mr-2" />
                            Modifiez les informations de l'équipe selon vos besoins.
                        </p>
                        <p className="mb-2">
                            <i className="pi pi-users text-green-500 mr-2" />
                            Vous pouvez ajouter ou retirer des employés.
                        </p>
                        <p className="mb-2">
                            <i className="pi pi-cog text-orange-500 mr-2" />
                            Les compétences sont mises à jour automatiquement.
                        </p>
                        <p>
                            <i className="pi pi-exclamation-triangle text-red-500 mr-2" />
                            Attention: retirer des employés peut affecter les plannings en cours.
                        </p>
                    </div>
                </Card>
            </div>
        </div>
    );
};

export default EditEquipePage;