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


import React, { useState, useEffect, useRef } from 'react';
import { Card } from 'primereact/card';
import { Chart } from 'primereact/chart';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Tag } from 'primereact/tag';
import { ProgressBar } from 'primereact/progressbar';
import { Button } from 'primereact/button';
import { Toast } from 'primereact/toast';
import { Dropdown } from 'primereact/dropdown';
import { Calendar } from 'primereact/calendar';
import { Badge } from 'primereact/badge';
import { Knob } from 'primereact/knob';
import { useRouter } from 'next/navigation';

interface RessourceDashboard {
    id: string;
    nom: string;
    type: string;
    categorie: string;
    statut: string;
    disponibilite: number;
    utilisation: number;
    localisation: string;
    chantierActuel?: string;
    dateFinUtilisation?: Date;
    coutJournalier: number;
    revenus: number;
    maintenancesPrevues: number;
    heuresUtilisation: number;
    capaciteMax: number;
    etatSante: number;
}

interface EmployeRessource {
    id: string;
    nom: string;
    prenom: string;
    metier: string;
    competences: string[];
    disponibilite: number;
    chantierActuel?: string;
    tauxHoraire: number;
    heuresTravaillees: number;
    certifications: string[];
    experience: number;
}

const DashboardRessources = () => {
    const toast = useRef<Toast>(null);
    const router = useRouter();
    
    const [materiels, setMateriels] = useState<RessourceDashboard[]>([]);
    const [employes, setEmployes] = useState<EmployeRessource[]>([]);
    const [loading, setLoading] = useState(true);
    const [selectedType, setSelectedType] = useState('');
    const [selectedCategorie, setSelectedCategorie] = useState('');
    const [selectedView, setSelectedView] = useState('materiel');
    
    const [chartData, setChartData] = useState({});
    const [chartOptions, setChartOptions] = useState({});

    const typeOptions = [
        { label: 'Tous les types', value: '' },
        { label: 'Engins de terrassement', value: 'TERRASSEMENT' },
        { label: 'Grues et levage', value: 'LEVAGE' },
        { label: 'Transport', value: 'TRANSPORT' },
        { label: 'Outillage', value: 'OUTILLAGE' },
        { label: 'Sécurité', value: 'SECURITE' }
    ];

    const categorieOptions = [
        { label: 'Toutes les catégories', value: '' },
        { label: 'Lourd', value: 'LOURD' },
        { label: 'Léger', value: 'LEGER' },
        { label: 'Spécialisé', value: 'SPECIALISE' },
        { label: 'Consommable', value: 'CONSOMMABLE' }
    ];

    const viewOptions = [
        { label: 'Matériel', value: 'materiel' },
        { label: 'Employés', value: 'employes' },
        { label: 'Vue globale', value: 'global' }
    ];

    useEffect(() => {
        loadRessources();
        initCharts();
    }, [selectedType, selectedCategorie, selectedView]);

    const loadRessources = async () => {
        try {
            setLoading(true);
            
            // TODO: Remplacer par de vrais appels API
            // const [materielResponse, employeResponse] = await Promise.all([
            //     materielService.getDashboardData(),
            //     employeService.getDashboardData()
            // ]);
            
            // Données simulées pour la démonstration
            const mockMateriels: RessourceDashboard[] = [
                {
                    id: '1',
                    nom: 'Grue mobile Liebherr LTM 1050',
                    type: 'LEVAGE',
                    categorie: 'LOURD',
                    statut: 'EN_SERVICE',
                    disponibilite: 85,
                    utilisation: 75,
                    localisation: 'Chantier Résidence Les Jardins',
                    chantierActuel: 'Résidence Les Jardins',
                    dateFinUtilisation: new Date('2025-02-15'),
                    coutJournalier: 850,
                    revenus: 25500,
                    maintenancesPrevues: 2,
                    heuresUtilisation: 1250,
                    capaciteMax: 50,
                    etatSante: 90
                },
                {
                    id: '2',
                    nom: 'Pelleteuse CAT 320D',
                    type: 'TERRASSEMENT',
                    categorie: 'LOURD',
                    statut: 'MAINTENANCE',
                    disponibilite: 0,
                    utilisation: 0,
                    localisation: 'Atelier Central',
                    coutJournalier: 650,
                    revenus: 19500,
                    maintenancesPrevues: 1,
                    heuresUtilisation: 980,
                    capaciteMax: 32,
                    etatSante: 65
                },
                {
                    id: '3',
                    nom: 'Camion benne Volvo FMX',
                    type: 'TRANSPORT',
                    categorie: 'LOURD',
                    statut: 'DISPONIBLE',
                    disponibilite: 100,
                    utilisation: 45,
                    localisation: 'Dépôt Central',
                    coutJournalier: 450,
                    revenus: 13500,
                    maintenancesPrevues: 1,
                    heuresUtilisation: 750,
                    capaciteMax: 25,
                    etatSante: 85
                },
                {
                    id: '4',
                    nom: 'Bétonnière Schwing S36X',
                    type: 'TRANSPORT',
                    categorie: 'SPECIALISE',
                    statut: 'EN_SERVICE',
                    disponibilite: 70,
                    utilisation: 90,
                    localisation: 'Chantier Centre Commercial',
                    chantierActuel: 'Centre Commercial Atlantis',
                    dateFinUtilisation: new Date('2025-01-30'),
                    coutJournalier: 750,
                    revenus: 22500,
                    maintenancesPrevues: 3,
                    heuresUtilisation: 1100,
                    capaciteMax: 36,
                    etatSante: 80
                }
            ];

            const mockEmployes: EmployeRessource[] = [
                {
                    id: '1',
                    nom: 'Dupont',
                    prenom: 'Jean',
                    metier: 'Chef de chantier',
                    competences: ['Gestion équipe', 'Planning', 'Sécurité'],
                    disponibilite: 100,
                    chantierActuel: 'Résidence Les Jardins',
                    tauxHoraire: 45,
                    heuresTravaillees: 1680,
                    certifications: ['CACES R482', 'SST'],
                    experience: 15
                },
                {
                    id: '2',
                    nom: 'Martin',
                    prenom: 'Marie',
                    metier: 'Conducteur d\'engins',
                    competences: ['Pelleteuse', 'Bulldozer', 'Compacteur'],
                    disponibilite: 85,
                    chantierActuel: 'Centre Commercial Atlantis',
                    tauxHoraire: 35,
                    heuresTravaillees: 1520,
                    certifications: ['CACES R482', 'CACES R372'],
                    experience: 8
                },
                {
                    id: '3',
                    nom: 'Leroy',
                    prenom: 'Pierre',
                    metier: 'Grutier',
                    competences: ['Grue mobile', 'Grue tour', 'Levage'],
                    disponibilite: 90,
                    chantierActuel: 'Résidence Les Jardins',
                    tauxHoraire: 40,
                    heuresTravaillees: 1600,
                    certifications: ['CACES R483', 'CACES R487'],
                    experience: 12
                },
                {
                    id: '4',
                    nom: 'Bernard',
                    prenom: 'Luc',
                    metier: 'Maçon',
                    competences: ['Béton', 'Coffrage', 'Ferraillage'],
                    disponibilite: 100,
                    tauxHoraire: 28,
                    heuresTravaillees: 1750,
                    certifications: ['CQP Maçon', 'SST'],
                    experience: 10
                }
            ];
            
            // Filtrer selon les critères sélectionnés
            let filteredMateriels = mockMateriels;
            
            if (selectedType) {
                filteredMateriels = filteredMateriels.filter(m => m.type === selectedType);
            }
            
            if (selectedCategorie) {
                filteredMateriels = filteredMateriels.filter(m => m.categorie === selectedCategorie);
            }
            
            setMateriels(filteredMateriels);
            setEmployes(mockEmployes);
            
        } catch (error) {
            console.error('Erreur lors du chargement des ressources:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Impossible de charger les données des ressources'
            });
        } finally {
            setLoading(false);
        }
    };

    const initCharts = () => {
        const documentStyle = getComputedStyle(document.documentElement);
        
        if (selectedView === 'materiel') {
            // Graphique d'utilisation du matériel
            const utilisationData = {
                labels: ['En service', 'Disponible', 'Maintenance', 'Hors service'],
                datasets: [
                    {
                        data: [
                            materiels.filter(m => m.statut === 'EN_SERVICE').length,
                            materiels.filter(m => m.statut === 'DISPONIBLE').length,
                            materiels.filter(m => m.statut === 'MAINTENANCE').length,
                            materiels.filter(m => m.statut === 'HORS_SERVICE').length
                        ],
                        backgroundColor: [
                            documentStyle.getPropertyValue('--green-500'),
                            documentStyle.getPropertyValue('--blue-500'),
                            documentStyle.getPropertyValue('--orange-500'),
                            documentStyle.getPropertyValue('--red-500')
                        ]
                    }
                ]
            };
            setChartData(utilisationData);
        } else if (selectedView === 'employes') {
            // Graphique de répartition par métier
            const metiers = [...new Set(employes.map(e => e.metier))];
            const metierData = {
                labels: metiers,
                datasets: [
                    {
                        data: metiers.map(metier => employes.filter(e => e.metier === metier).length),
                        backgroundColor: [
                            documentStyle.getPropertyValue('--blue-500'),
                            documentStyle.getPropertyValue('--green-500'),
                            documentStyle.getPropertyValue('--orange-500'),
                            documentStyle.getPropertyValue('--purple-500')
                        ]
                    }
                ]
            };
            setChartData(metierData);
        }

        const options = {
            plugins: {
                legend: {
                    labels: {
                        usePointStyle: true,
                        color: documentStyle.getPropertyValue('--text-color')
                    }
                }
            }
        };

        setChartOptions(options);
    };

    const getStatutSeverity = (statut: string) => {
        switch (statut) {
            case 'EN_SERVICE': return 'success';
            case 'DISPONIBLE': return 'info';
            case 'MAINTENANCE': return 'warning';
            case 'HORS_SERVICE': return 'danger';
            default: return 'info';
        }
    };

    const statutBodyTemplate = (rowData: RessourceDashboard) => (
        <Tag value={rowData.statut} severity={getStatutSeverity(rowData.statut)} />
    );

    const utilisationBodyTemplate = (rowData: RessourceDashboard) => (
        <div className="flex align-items-center">
            <ProgressBar 
                value={rowData.utilisation} 
                style={{ width: '100px', marginRight: '8px' }}
                showValue={false}
            />
            <span className="text-sm font-semibold">{rowData.utilisation}%</span>
        </div>
    );

    const disponibiliteBodyTemplate = (rowData: RessourceDashboard) => {
        const couleur = rowData.disponibilite > 80 ? 'text-green-500' : 
                       rowData.disponibilite > 50 ? 'text-orange-500' : 'text-red-500';
        return (
            <span className={`font-semibold ${couleur}`}>
                {rowData.disponibilite}%
            </span>
        );
    };

    const revenusBodyTemplate = (rowData: RessourceDashboard) => (
        <div>
            <div className="font-semibold">
                {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(rowData.revenus)}
            </div>
            <div className="text-sm text-500">
                {rowData.coutJournalier}€/jour
            </div>
        </div>
    );

    const etatSanteBodyTemplate = (rowData: RessourceDashboard) => (
        <div className="flex align-items-center justify-content-center">
            <Knob 
                value={rowData.etatSante} 
                size={50}
                readOnly
                valueColor={rowData.etatSante > 80 ? '#10b981' : rowData.etatSante > 60 ? '#f59e0b' : '#ef4444'}
                rangeColor="#e5e7eb"
                textColor="#374151"
            />
        </div>
    );

    const competencesBodyTemplate = (rowData: EmployeRessource) => (
        <div className="flex flex-wrap gap-1">
            {rowData.competences.slice(0, 2).map((comp, index) => (
                <Tag key={index} value={comp} severity="info" className="text-xs" />
            ))}
            {rowData.competences.length > 2 && (
                <Tag value={`+${rowData.competences.length - 2}`} severity={"secondary" as any} className="text-xs" />
            )}
        </div>
    );

    const experienceBodyTemplate = (rowData: EmployeRessource) => (
        <div className="text-center">
            <div className="text-lg font-bold">{rowData.experience}</div>
            <div className="text-xs text-500">ans</div>
        </div>
    );

    const actionBodyTemplate = (rowData: any) => (
        <div className="flex gap-2">
            <Button
                icon="pi pi-eye"
                className="p-button-text p-button-sm"
                tooltip="Voir détails"
                onClick={() => {
                    if (selectedView === 'materiel') {
                        router.push(`/materiels/${rowData.id}`);
                    } else {
                        router.push(`/employes/${rowData.id}`);
                    }
                }}
            />
            <Button
                icon="pi pi-calendar"
                className="p-button-text p-button-sm"
                tooltip="Planning"
                onClick={() => router.push(`/planning?ressource=${rowData.id}`)}
            />
        </div>
    );

    // Calculs des métriques
    const tauxUtilisationMoyen = materiels.length > 0 ? 
        materiels.reduce((sum, m) => sum + m.utilisation, 0) / materiels.length : 0;
    
    const revenusTotal = materiels.reduce((sum, m) => sum + m.revenus, 0);
    const materielDisponible = materiels.filter(m => m.statut === 'DISPONIBLE').length;
    const employesDisponibles = employes.filter(e => !e.chantierActuel).length;

    return (
        <div className="grid">
            <Toast ref={toast} />
            
            {/* En-tête avec filtres */}
            <div className="col-12">
                <Card>
                    <div className="flex justify-content-between align-items-center mb-4">
                        <h2 className="text-2xl font-bold m-0">Dashboard Ressources</h2>
                        <div className="flex gap-2">
                            <Button
                                label="Nouveau matériel"
                                icon="pi pi-plus"
                                onClick={() => router.push('/materiels/nouveau')}
                                className="p-button-outlined"
                            />
                            <Button
                                label="Nouvel employé"
                                icon="pi pi-user-plus"
                                onClick={() => router.push('/employes/nouveau')}
                            />
                        </div>
                    </div>
                    
                    <div className="flex flex-wrap gap-3 align-items-center">
                        <div className="field">
                            <label htmlFor="view" className="font-semibold">Vue</label>
                            <Dropdown
                                id="view"
                                value={selectedView}
                                options={viewOptions}
                                onChange={(e) => setSelectedView(e.value)}
                                className="w-full md:w-12rem"
                            />
                        </div>
                        
                        {selectedView === 'materiel' && (
                            <>
                                <div className="field">
                                    <label htmlFor="type" className="font-semibold">Type</label>
                                    <Dropdown
                                        id="type"
                                        value={selectedType}
                                        options={typeOptions}
                                        onChange={(e) => setSelectedType(e.value)}
                                        className="w-full md:w-14rem"
                                    />
                                </div>
                                
                                <div className="field">
                                    <label htmlFor="categorie" className="font-semibold">Catégorie</label>
                                    <Dropdown
                                        id="categorie"
                                        value={selectedCategorie}
                                        options={categorieOptions}
                                        onChange={(e) => setSelectedCategorie(e.value)}
                                        className="w-full md:w-14rem"
                                    />
                                </div>
                            </>
                        )}
                        
                        <Button
                            icon="pi pi-refresh"
                            className="p-button-outlined"
                            onClick={loadRessources}
                            loading={loading}
                            tooltip="Actualiser"
                        />
                    </div>
                </Card>
            </div>

            {/* Métriques principales */}
            <div className="col-12 lg:col-3 md:col-6">
                <Card className="h-full">
                    <div className="flex justify-content-between mb-3">
                        <div>
                            <span className="block text-500 font-medium mb-3">
                                {selectedView === 'materiel' ? 'Matériels' : 'Employés'}
                            </span>
                            <div className="text-900 font-medium text-xl">
                                {selectedView === 'materiel' ? materiels.length : employes.length}
                            </div>
                        </div>
                        <div className="flex align-items-center justify-content-center bg-blue-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
                            <i className={`pi ${selectedView === 'materiel' ? 'pi-cog' : 'pi-users'} text-blue-500 text-xl`}></i>
                        </div>
                    </div>
                </Card>
            </div>

            <div className="col-12 lg:col-3 md:col-6">
                <Card className="h-full">
                    <div className="flex justify-content-between mb-3">
                        <div>
                            <span className="block text-500 font-medium mb-3">Disponibles</span>
                            <div className="text-900 font-medium text-xl">
                                {selectedView === 'materiel' ? materielDisponible : employesDisponibles}
                            </div>
                        </div>
                        <div className="flex align-items-center justify-content-center bg-green-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
                            <i className="pi pi-check-circle text-green-500 text-xl"></i>
                        </div>
                    </div>
                </Card>
            </div>

            <div className="col-12 lg:col-3 md:col-6">
                <Card className="h-full">
                    <div className="flex justify-content-between mb-3">
                        <div>
                            <span className="block text-500 font-medium mb-3">
                                {selectedView === 'materiel' ? 'Revenus' : 'Heures totales'}
                            </span>
                            <div className="text-900 font-medium text-xl">
                                {selectedView === 'materiel' ? 
                                    new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', notation: 'compact' }).format(revenusTotal) :
                                    employes.reduce((sum, e) => sum + e.heuresTravaillees, 0).toLocaleString()
                                }
                            </div>
                        </div>
                        <div className="flex align-items-center justify-content-center bg-purple-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
                            <i className={`pi ${selectedView === 'materiel' ? 'pi-euro' : 'pi-clock'} text-purple-500 text-xl`}></i>
                        </div>
                    </div>
                </Card>
            </div>

            <div className="col-12 lg:col-3 md:col-6">
                <Card className="h-full">
                    <div className="flex justify-content-between mb-3">
                        <div>
                            <span className="block text-500 font-medium mb-3">Taux Utilisation</span>
                            <div className="text-900 font-medium text-xl">
                                {selectedView === 'materiel' ? 
                                    `${tauxUtilisationMoyen.toFixed(1)}%` :
                                    `${((employes.filter(e => e.chantierActuel).length / employes.length) * 100).toFixed(1)}%`
                                }
                            </div>
                        </div>
                        <div className="flex align-items-center justify-content-center bg-orange-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
                            <i className="pi pi-chart-line text-orange-500 text-xl"></i>
                        </div>
                    </div>
                </Card>
            </div>

            {/* Graphique */}
            <div className="col-12 lg:col-6">
                <Card>
                    <h6>
                        {selectedView === 'materiel' ? 'Répartition par Statut' : 'Répartition par Métier'}
                    </h6>
                    <Chart type="doughnut" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
                </Card>
            </div>

            {/* Indicateurs de performance */}
            <div className="col-12 lg:col-6">
                <Card>
                    <h6>Indicateurs de Performance</h6>
                    <div className="grid">
                        {selectedView === 'materiel' ? (
                            <>
                                <div className="col-6">
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-green-500">
                                            {materiels.filter(m => m.etatSante > 80).length}
                                        </div>
                                        <div className="text-sm text-500">Bon état</div>
                                    </div>
                                </div>
                                <div className="col-6">
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-orange-500">
                                            {materiels.reduce((sum, m) => sum + m.maintenancesPrevues, 0)}
                                        </div>
                                        <div className="text-sm text-500">Maintenances prévues</div>
                                    </div>
                                </div>
                                <div className="col-6">
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-blue-500">
                                            {(materiels.reduce((sum, m) => sum + m.heuresUtilisation, 0) / materiels.length).toFixed(0)}
                                        </div>
                                        <div className="text-sm text-500">Heures moy./matériel</div>
                                    </div>
                                </div>
                                <div className="col-6">
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-purple-500">
                                            {(revenusTotal / materiels.length).toFixed(0)}€
                                        </div>
                                        <div className="text-sm text-500">Revenus moy./matériel</div>
                                    </div>
                                </div>
                            </>
                        ) : (
                            <>
                                <div className="col-6">
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-green-500">
                                            {employes.filter(e => e.certifications.length > 1).length}
                                        </div>
                                        <div className="text-sm text-500">Multi-certifiés</div>
                                    </div>
                                </div>
                                <div className="col-6">
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-blue-500">
                                            {(employes.reduce((sum, e) => sum + e.experience, 0) / employes.length).toFixed(1)}
                                        </div>
                                        <div className="text-sm text-500">Expérience moyenne</div>
                                    </div>
                                </div>
                                <div className="col-6">
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-purple-500">
                                            {(employes.reduce((sum, e) => sum + e.tauxHoraire, 0) / employes.length).toFixed(0)}€
                                        </div>
                                        <div className="text-sm text-500">Taux horaire moyen</div>
                                    </div>
                                </div>
                                <div className="col-6">
                                    <div className="text-center">
                                        <div className="text-2xl font-bold text-orange-500">
                                            {employes.reduce((sum, e) => sum + e.competences.length, 0)}
                                        </div>
                                        <div className="text-sm text-500">Compétences totales</div>
                                    </div>
                                </div>
                            </>
                        )}
                    </div>
                </Card>
            </div>

            {/* Tableau des ressources */}
            <div className="col-12">
                <Card>
                    <div className="flex justify-content-between align-items-center mb-4">
                        <h6>
                            {selectedView === 'materiel' ? 
                                `Liste du Matériel (${materiels.length})` : 
                                `Liste des Employés (${employes.length})`
                            }
                        </h6>
                        <Badge 
                            value={selectedView === 'materiel' ? 
                                `${materiels.filter(m => m.statut === 'EN_SERVICE').length} en service` :
                                `${employes.filter(e => e.chantierActuel).length} en mission`
                            } 
                            severity="success" 
                        />
                    </div>
                    
                    <DataTable
                        value={selectedView === 'materiel' ? materiels : employes}
                        loading={loading}
                        responsiveLayout="scroll"
                        paginator
                        rows={10}
                        rowsPerPageOptions={[5, 10, 25]}
                        emptyMessage={`Aucun${selectedView === 'materiel' ? ' matériel' : ' employé'} trouvé`}
                        sortMode="multiple"
                    >
                        {selectedView === 'materiel' ? (
                            <>
                                <Column field="nom" header="Matériel" sortable />
                                <Column field="type" header="Type" sortable />
                                <Column field="statut" header="Statut" body={statutBodyTemplate} sortable />
                                <Column field="utilisation" header="Utilisation" body={utilisationBodyTemplate} sortable />
                                <Column field="disponibilite" header="Disponibilité" body={disponibiliteBodyTemplate} sortable />
                                <Column field="revenus" header="Revenus" body={revenusBodyTemplate} sortable />
                                <Column field="etatSante" header="État" body={etatSanteBodyTemplate} style={{ width: '100px' }} />
                                <Column field="localisation" header="Localisation" sortable />
                                <Column header="Actions" body={actionBodyTemplate} style={{ width: '100px' }} />
                            </>
                        ) : (
                            <>
                                <Column field="nom" header="Nom" body={(rowData) => `${rowData.prenom} ${rowData.nom}`} sortable />
                                <Column field="metier" header="Métier" sortable />
                                <Column field="competences" header="Compétences" body={competencesBodyTemplate} />
                                <Column field="experience" header="Expérience" body={experienceBodyTemplate} sortable />
                                <Column field="disponibilite" header="Disponibilité" body={disponibiliteBodyTemplate} sortable />
                                <Column field="chantierActuel" header="Chantier actuel" sortable />
                                <Column field="tauxHoraire" header="Taux horaire" body={(rowData) => `${rowData.tauxHoraire}€`} sortable />
                                <Column header="Actions" body={actionBodyTemplate} style={{ width: '100px' }} />
                            </>
                        )}
                    </DataTable>
                </Card>
            </div>
        </div>
    );
};

export default DashboardRessources;