'use client';

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 { Timeline } from 'primereact/timeline';
import { useRouter } from 'next/navigation';

interface MaintenanceDashboard {
    id: string;
    materiel: string;
    type: string;
    statut: string;
    priorite: string;
    dateCreation: Date;
    datePrevue: Date;
    dateRealisation?: Date;
    technicien: string;
    coutEstime: number;
    coutReel: number;
    dureeEstimee: number;
    dureeReelle?: number;
    description: string;
    localisation: string;
}

const DashboardMaintenance = () => {
    const toast = useRef<Toast>(null);
    const router = useRouter();
    
    const [maintenances, setMaintenances] = useState<MaintenanceDashboard[]>([]);
    const [loading, setLoading] = useState(true);
    const [selectedType, setSelectedType] = useState('');
    const [selectedStatut, setSelectedStatut] = useState('');
    const [dateRange, setDateRange] = useState<Date[]>([]);
    
    const [chartData, setChartData] = useState({});
    const [chartOptions, setChartOptions] = useState({});
    const [timelineEvents, setTimelineEvents] = useState([]);

    const typeOptions = [
        { label: 'Tous les types', value: '' },
        { label: 'Préventive', value: 'PREVENTIVE' },
        { label: 'Corrective', value: 'CORRECTIVE' },
        { label: 'Prédictive', value: 'PREDICTIVE' },
        { label: 'Urgente', value: 'URGENTE' }
    ];

    const statutOptions = [
        { label: 'Tous les statuts', value: '' },
        { label: 'Planifiée', value: 'PLANIFIEE' },
        { label: 'En cours', value: 'EN_COURS' },
        { label: 'Terminée', value: 'TERMINEE' },
        { label: 'Reportée', value: 'REPORTEE' },
        { label: 'Annulée', value: 'ANNULEE' }
    ];

    useEffect(() => {
        loadMaintenances();
        initCharts();
        initTimeline();
    }, [selectedType, selectedStatut, dateRange]);

    const loadMaintenances = async () => {
        try {
            setLoading(true);
            
            // TODO: Remplacer par un vrai appel API
            // const response = await maintenanceService.getDashboardData({
            //     type: selectedType,
            //     statut: selectedStatut,
            //     dateRange
            // });
            
            // Données simulées pour la démonstration
            const mockMaintenances: MaintenanceDashboard[] = [
                {
                    id: '1',
                    materiel: 'Grue mobile Liebherr LTM 1050',
                    type: 'PREVENTIVE',
                    statut: 'PLANIFIEE',
                    priorite: 'MOYENNE',
                    dateCreation: new Date('2024-12-15'),
                    datePrevue: new Date('2025-01-15'),
                    technicien: 'Jean Dupont',
                    coutEstime: 1200,
                    coutReel: 0,
                    dureeEstimee: 4,
                    description: 'Révision générale et contrôle sécurité',
                    localisation: 'Atelier Central'
                },
                {
                    id: '2',
                    materiel: 'Pelleteuse CAT 320D',
                    type: 'CORRECTIVE',
                    statut: 'EN_COURS',
                    priorite: 'HAUTE',
                    dateCreation: new Date('2024-12-20'),
                    datePrevue: new Date('2024-12-28'),
                    dateRealisation: new Date('2024-12-28'),
                    technicien: 'Marie Martin',
                    coutEstime: 800,
                    coutReel: 950,
                    dureeEstimee: 2,
                    dureeReelle: 3,
                    description: 'Réparation système hydraulique',
                    localisation: 'Chantier Résidence Les Jardins'
                },
                {
                    id: '3',
                    materiel: 'Bétonnière Schwing S36X',
                    type: 'URGENTE',
                    statut: 'TERMINEE',
                    priorite: 'CRITIQUE',
                    dateCreation: new Date('2024-12-18'),
                    datePrevue: new Date('2024-12-19'),
                    dateRealisation: new Date('2024-12-19'),
                    technicien: 'Pierre Leroy',
                    coutEstime: 1500,
                    coutReel: 1650,
                    dureeEstimee: 6,
                    dureeReelle: 8,
                    description: 'Remplacement pompe défaillante',
                    localisation: 'Chantier Centre Commercial'
                },
                {
                    id: '4',
                    materiel: 'Compacteur Bomag BW 213',
                    type: 'PREDICTIVE',
                    statut: 'PLANIFIEE',
                    priorite: 'BASSE',
                    dateCreation: new Date('2024-12-22'),
                    datePrevue: new Date('2025-02-01'),
                    technicien: 'Luc Bernard',
                    coutEstime: 600,
                    coutReel: 0,
                    dureeEstimee: 3,
                    description: 'Analyse vibratoire et diagnostic',
                    localisation: 'Atelier Central'
                },
                {
                    id: '5',
                    materiel: 'Nacelle Genie Z-45/25J',
                    type: 'PREVENTIVE',
                    statut: 'REPORTEE',
                    priorite: 'MOYENNE',
                    dateCreation: new Date('2024-12-10'),
                    datePrevue: new Date('2024-12-25'),
                    technicien: 'Sophie Dubois',
                    coutEstime: 400,
                    coutReel: 0,
                    dureeEstimee: 2,
                    description: 'Contrôle sécurité annuel',
                    localisation: 'Atelier Central'
                }
            ];
            
            // Filtrer selon les critères sélectionnés
            let filteredMaintenances = mockMaintenances;
            
            if (selectedType) {
                filteredMaintenances = filteredMaintenances.filter(m => m.type === selectedType);
            }
            
            if (selectedStatut) {
                filteredMaintenances = filteredMaintenances.filter(m => m.statut === selectedStatut);
            }
            
            setMaintenances(filteredMaintenances);
            
        } catch (error) {
            console.error('Erreur lors du chargement des maintenances:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Impossible de charger les données de maintenance'
            });
        } finally {
            setLoading(false);
        }
    };

    const initCharts = () => {
        const documentStyle = getComputedStyle(document.documentElement);
        
        // Graphique de répartition par type
        const typeData = {
            labels: ['Préventive', 'Corrective', 'Prédictive', 'Urgente'],
            datasets: [
                {
                    data: [
                        maintenances.filter(m => m.type === 'PREVENTIVE').length,
                        maintenances.filter(m => m.type === 'CORRECTIVE').length,
                        maintenances.filter(m => m.type === 'PREDICTIVE').length,
                        maintenances.filter(m => m.type === 'URGENTE').length
                    ],
                    backgroundColor: [
                        documentStyle.getPropertyValue('--green-500'),
                        documentStyle.getPropertyValue('--orange-500'),
                        documentStyle.getPropertyValue('--blue-500'),
                        documentStyle.getPropertyValue('--red-500')
                    ]
                }
            ]
        };

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

        setChartData(typeData);
        setChartOptions(options);
    };

    const initTimeline = () => {
        const events = maintenances
            .filter(m => m.statut === 'PLANIFIEE' || m.statut === 'EN_COURS')
            .sort((a, b) => a.datePrevue.getTime() - b.datePrevue.getTime())
            .slice(0, 5)
            .map(m => ({
                status: m.priorite === 'CRITIQUE' ? 'danger' : m.priorite === 'HAUTE' ? 'warning' : 'info',
                date: m.datePrevue.toLocaleDateString('fr-FR'),
                icon: m.type === 'URGENTE' ? 'pi pi-exclamation-triangle' : 'pi pi-wrench',
                color: m.priorite === 'CRITIQUE' ? '#e74c3c' : m.priorite === 'HAUTE' ? '#f39c12' : '#3498db',
                materiel: m.materiel,
                type: m.type,
                technicien: m.technicien
            }));
        
        setTimelineEvents(events);
    };

    const getStatutSeverity = (statut: string) => {
        switch (statut) {
            case 'PLANIFIEE': return 'info';
            case 'EN_COURS': return 'warning';
            case 'TERMINEE': return 'success';
            case 'REPORTEE': return 'warning';
            case 'ANNULEE': return 'danger';
            default: return 'info';
        }
    };

    const getPrioriteSeverity = (priorite: string) => {
        switch (priorite) {
            case 'CRITIQUE': return 'danger';
            case 'HAUTE': return 'warning';
            case 'MOYENNE': return 'info';
            case 'BASSE': return 'success';
            default: return 'info';
        }
    };

    const getTypeSeverity = (type: string) => {
        switch (type) {
            case 'URGENTE': return 'danger';
            case 'CORRECTIVE': return 'warning';
            case 'PREVENTIVE': return 'success';
            case 'PREDICTIVE': return 'info';
            default: return 'info';
        }
    };

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

    const prioriteBodyTemplate = (rowData: MaintenanceDashboard) => (
        <Tag value={rowData.priorite} severity={getPrioriteSeverity(rowData.priorite)} />
    );

    const typeBodyTemplate = (rowData: MaintenanceDashboard) => (
        <Tag value={rowData.type} severity={getTypeSeverity(rowData.type)} />
    );

    const coutBodyTemplate = (rowData: MaintenanceDashboard) => {
        const ecart = rowData.coutReel - rowData.coutEstime;
        const couleur = ecart > 0 ? 'text-red-500' : ecart < 0 ? 'text-green-500' : 'text-gray-500';
        
        return (
            <div>
                <div className="font-semibold">
                    {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(rowData.coutEstime)}
                </div>
                {rowData.coutReel > 0 && (
                    <div className={`text-sm ${couleur}`}>
                        Réel: {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(rowData.coutReel)}
                    </div>
                )}
            </div>
        );
    };

    const dureeBodyTemplate = (rowData: MaintenanceDashboard) => (
        <div>
            <div className="font-semibold">{rowData.dureeEstimee}h</div>
            {rowData.dureeReelle && (
                <div className={`text-sm ${rowData.dureeReelle > rowData.dureeEstimee ? 'text-red-500' : 'text-green-500'}`}>
                    Réel: {rowData.dureeReelle}h
                </div>
            )}
        </div>
    );

    const actionBodyTemplate = (rowData: MaintenanceDashboard) => (
        <div className="flex gap-2">
            <Button
                icon="pi pi-eye"
                className="p-button-text p-button-sm"
                tooltip="Voir détails"
                onClick={() => router.push(`/maintenance/${rowData.id}`)}
            />
            <Button
                icon="pi pi-pencil"
                className="p-button-text p-button-sm"
                tooltip="Modifier"
                onClick={() => router.push(`/maintenance/${rowData.id}/edit`)}
            />
            <Button
                icon="pi pi-calendar"
                className="p-button-text p-button-sm"
                tooltip="Planifier"
                onClick={() => router.push(`/maintenance/planification?materiel=${rowData.materiel}`)}
            />
        </div>
    );

    // Calculs des métriques
    const totalCoutEstime = maintenances.reduce((sum, m) => sum + m.coutEstime, 0);
    const totalCoutReel = maintenances.reduce((sum, m) => sum + (m.coutReel || 0), 0);
    const maintenancesUrgentes = maintenances.filter(m => m.priorite === 'CRITIQUE' || m.type === 'URGENTE').length;
    const tauxRealisation = maintenances.length > 0 ? 
        (maintenances.filter(m => m.statut === 'TERMINEE').length / maintenances.length) * 100 : 0;

    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 Maintenance</h2>
                        <Button
                            label="Nouvelle maintenance"
                            icon="pi pi-plus"
                            onClick={() => router.push('/maintenance/nouveau')}
                        />
                    </div>
                    
                    <div className="flex flex-wrap gap-3 align-items-center">
                        <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="statut" className="font-semibold">Statut</label>
                            <Dropdown
                                id="statut"
                                value={selectedStatut}
                                options={statutOptions}
                                onChange={(e) => setSelectedStatut(e.value)}
                                className="w-full md:w-14rem"
                            />
                        </div>
                        
                        <div className="field">
                            <label htmlFor="dateRange" className="font-semibold">Plage de dates</label>
                            <Calendar
                                id="dateRange"
                                value={dateRange}
                                onChange={(e) => setDateRange(e.value as Date[])}
                                selectionMode="range"
                                readOnlyInput
                                hideOnRangeSelection
                                className="w-full md:w-14rem"
                                placeholder="Sélectionner une période"
                            />
                        </div>
                        
                        <Button
                            icon="pi pi-refresh"
                            className="p-button-outlined"
                            onClick={loadMaintenances}
                            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">Total Maintenances</span>
                            <div className="text-900 font-medium text-xl">{maintenances.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 pi-wrench 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">Coût Total</span>
                            <div className="text-900 font-medium text-xl">
                                {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', notation: 'compact' }).format(totalCoutEstime)}
                            </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-euro 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">Urgentes</span>
                            <div className="text-900 font-medium text-xl">{maintenancesUrgentes}</div>
                        </div>
                        <div className="flex align-items-center justify-content-center bg-red-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
                            <i className="pi pi-exclamation-triangle text-red-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 Réalisation</span>
                            <div className="text-900 font-medium text-xl">{tauxRealisation.toFixed(1)}%</div>
                        </div>
                        <div className="flex align-items-center justify-content-center bg-cyan-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
                            <i className="pi pi-check-circle text-cyan-500 text-xl"></i>
                        </div>
                    </div>
                </Card>
            </div>

            {/* Graphique et Timeline */}
            <div className="col-12 lg:col-6">
                <Card>
                    <h6>Répartition par Type</h6>
                    <Chart type="doughnut" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
                </Card>
            </div>

            <div className="col-12 lg:col-6">
                <Card>
                    <h6>Prochaines Maintenances</h6>
                    <Timeline 
                        value={timelineEvents} 
                        align="alternate" 
                        className="customized-timeline"
                        marker={(item) => <span className={`flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1`} style={{ backgroundColor: item.color }}>
                            <i className={item.icon}></i>
                        </span>}
                        content={(item) => (
                            <Card title={item.materiel} subTitle={item.date}>
                                <p className="text-sm">
                                    <strong>Type:</strong> {item.type}<br/>
                                    <strong>Technicien:</strong> {item.technicien}
                                </p>
                            </Card>
                        )}
                    />
                </Card>
            </div>

            {/* Tableau des maintenances */}
            <div className="col-12">
                <Card>
                    <div className="flex justify-content-between align-items-center mb-4">
                        <h6>Liste des Maintenances ({maintenances.length})</h6>
                        <Badge value={`${maintenances.filter(m => m.statut === 'EN_COURS').length} en cours`} severity="warning" />
                    </div>
                    
                    <DataTable
                        value={maintenances}
                        loading={loading}
                        responsiveLayout="scroll"
                        paginator
                        rows={10}
                        rowsPerPageOptions={[5, 10, 25]}
                        emptyMessage="Aucune maintenance trouvée"
                        sortMode="multiple"
                    >
                        <Column field="materiel" header="Matériel" sortable />
                        <Column field="type" header="Type" body={typeBodyTemplate} sortable />
                        <Column field="statut" header="Statut" body={statutBodyTemplate} sortable />
                        <Column field="priorite" header="Priorité" body={prioriteBodyTemplate} sortable />
                        <Column field="datePrevue" header="Date prévue" body={(rowData) => rowData.datePrevue.toLocaleDateString('fr-FR')} sortable />
                        <Column field="technicien" header="Technicien" sortable />
                        <Column field="coutEstime" header="Coût" body={coutBodyTemplate} sortable />
                        <Column field="dureeEstimee" header="Durée" body={dureeBodyTemplate} sortable />
                        <Column header="Actions" body={actionBodyTemplate} style={{ width: '120px' }} />
                    </DataTable>
                </Card>
            </div>
        </div>
    );
};

export default DashboardMaintenance;