'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 } from 'next/navigation';
import { apiClient } from '../../../../services/api-client';

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

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

const NouvelleEquipePage = () => {
    const [equipe, setEquipe] = useState<NouvelleEquipe>({
        nom: '',
        description: '',
        specialite: '',
        employeIds: [],
        competencesRequises: []
    });
    const [employes, setEmployes] = useState<Employe[]>([]);
    const [employesDisponibles, setEmployesDisponibles] = useState<Employe[]>([]);
    const [employesSelectionnes, setEmployesSelectionnes] = useState<Employe[]>([]);
    const [loading, setLoading] = useState(false);
    const [errors, setErrors] = useState<{ [key: string]: string }>({});
    const router = useRouter();

    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(() => {
        loadEmployesDisponibles();
    }, []);

    const loadEmployesDisponibles = async () => {
        try {
            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);
        }
    };

    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('🔄 Création de l\'équipe...', equipe);

            const response = await apiClient.post('/api/equipes', equipe);
            console.log('✅ Équipe créée avec succès:', response.data);

            router.push('/equipes');
        } catch (error) {
            console.error('❌ Erreur lors de la création:', 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 selected = employesDisponibles.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 aux équipes"
                    icon="pi pi-arrow-left"
                    className="p-button-outlined"
                    onClick={() => router.push('/equipes')}
                />
            </div>
        );
    };

    const rightToolbarTemplate = () => {
        return (
            <div className="flex gap-2">
                <Button
                    label="Annuler"
                    icon="pi pi-times"
                    className="p-button-outlined"
                    onClick={() => router.push('/equipes')}
                />
                <Button
                    label="Créer l'équipe"
                    icon="pi pi-check"
                    className="p-button-success"
                    loading={loading}
                    onClick={handleSubmit}
                />
            </div>
        );
    };

    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="Informations de l'équipe">
                    <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="employes" className="font-medium">
                                        Employés de l'équipe *
                                    </label>
                                    <MultiSelect
                                        id="employes"
                                        value={equipe.employeIds}
                                        options={employesDisponibles}
                                        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="Conseils">
                    <div className="text-sm">
                        <p className="mb-2">
                            <i className="pi pi-info-circle text-blue-500 mr-2" />
                            Une équipe efficace compte généralement 3 à 8 employés.
                        </p>
                        <p className="mb-2">
                            <i className="pi pi-users text-green-500 mr-2" />
                            Mélangez les niveaux d'expérience pour un meilleur encadrement.
                        </p>
                        <p className="mb-2">
                            <i className="pi pi-cog text-orange-500 mr-2" />
                            Assurez-vous que les compétences correspondent à la spécialité.
                        </p>
                        <p>
                            <i className="pi pi-star text-purple-500 mr-2" />
                            Désignez un chef d'équipe expérimenté après la création.
                        </p>
                    </div>
                </Card>
            </div>
        </div>
    );
};

export default NouvelleEquipePage;