'use client';

import React, { useState, useEffect } from 'react';
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { Tag } from 'primereact/tag';
import { Badge } from 'primereact/badge';
import { Toolbar } from 'primereact/toolbar';
import { TabView, TabPanel } from 'primereact/tabview';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ProgressBar } from 'primereact/progressbar';
import { Timeline } from 'primereact/timeline';
import { useRouter, useParams } from 'next/navigation';
import { apiClient } from '../../../../services/api-client';

interface MaintenanceDetail {
    id: number;
    materielId: number;
    materielNom: string;
    materielType: string;
    materielMarque: string;
    materielModele: string;
    typeMaintenance: 'PREVENTIVE' | 'CORRECTIVE' | 'PLANIFIEE' | 'URGENTE';
    statut: 'PLANIFIEE' | 'EN_COURS' | 'TERMINEE' | 'ANNULEE' | 'EN_ATTENTE';
    priorite: 'BASSE' | 'NORMALE' | 'HAUTE' | 'CRITIQUE';
    dateCreation: string;
    datePlanifiee: string;
    dateDebut?: string;
    dateFin?: string;
    technicienId?: number;
    technicienNom?: string;
    technicienSpecialites?: string[];
    description: string;
    problemeSignale?: string;
    solutionApportee?: string;
    dureeEstimee: number;
    dureeReelle?: number;
    coutEstime?: number;
    coutReel?: number;
    piecesUtilisees: Array<{
        id: number;
        nom: string;
        reference: string;
        quantite: number;
        coutUnitaire: number;
        cout: number;
        fournisseur: string;
    }>;
    outilsUtilises: Array<{
        id: number;
        nom: string;
        type: string;
        dureeUtilisation: number;
    }>;
    prochaineMaintenance?: string;
    observations?: string;
    photos: Array<{
        id: number;
        nom: string;
        url: string;
        type: 'AVANT' | 'PENDANT' | 'APRES';
        dateAjout: string;
    }>;
    historique: Array<{
        id: number;
        action: string;
        utilisateur: string;
        date: string;
        commentaire?: string;
    }>;
    evaluationQualite?: number;
    commentaireQualite?: string;
    tempsReponse?: number;
    tempsResolution?: number;
    causeRacine?: string;
    actionPreventive?: string;
}

const MaintenanceDetailPage = () => {
    const [maintenance, setMaintenance] = useState<MaintenanceDetail | null>(null);
    const [loading, setLoading] = useState(true);
    const router = useRouter();
    const params = useParams();
    const maintenanceId = params.id;

    useEffect(() => {
        if (maintenanceId) {
            loadMaintenanceDetail();
        }
    }, [maintenanceId]);

    const loadMaintenanceDetail = async () => {
        try {
            setLoading(true);
            console.log('🔄 Chargement du détail maintenance...', maintenanceId);
            const response = await apiClient.get(`/api/maintenances/${maintenanceId}`);
            console.log('✅ Détail maintenance chargé:', response.data);
            setMaintenance(response.data);
        } catch (error) {
            console.error('❌ Erreur lors du chargement du détail:', error);
        } finally {
            setLoading(false);
        }
    };

    const changerStatutMaintenance = async (nouveauStatut: string) => {
        if (!maintenance) return;

        try {
            await apiClient.post(`/api/maintenances/${maintenance.id}/statut`, { statut: nouveauStatut });
            setMaintenance({ ...maintenance, statut: nouveauStatut as any });
            console.log(`✅ Statut maintenance changé: ${nouveauStatut}`);
        } catch (error) {
            console.error('❌ Erreur lors du changement de statut:', error);
        }
    };

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

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

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

    const calculerCoutTotal = () => {
        if (!maintenance) return 0;
        const coutPieces = maintenance.piecesUtilisees.reduce((total, piece) => total + piece.cout, 0);
        return (maintenance.coutReel || maintenance.coutEstime || 0) + coutPieces;
    };

    const calculerEfficacite = () => {
        if (!maintenance || !maintenance.dureeReelle) return null;
        const efficacite = (maintenance.dureeEstimee / maintenance.dureeReelle) * 100;
        return Math.round(efficacite);
    };

    const pieceBodyTemplate = (rowData: any) => {
        return (
            <div className="flex flex-column gap-1">
                <span className="font-medium">{rowData.nom}</span>
                <span className="text-sm text-500">Réf: {rowData.reference}</span>
                <span className="text-sm text-500">Fournisseur: {rowData.fournisseur}</span>
            </div>
        );
    };

    const coutPieceBodyTemplate = (rowData: any) => {
        return (
            <div className="flex flex-column gap-1">
                <span className="font-medium">{rowData.cout.toLocaleString('fr-FR')} €</span>
                <span className="text-sm text-500">
                    {rowData.quantite} × {rowData.coutUnitaire.toLocaleString('fr-FR')} €
                </span>
            </div>
        );
    };

    const photoBodyTemplate = (rowData: any) => {
        return (
            <div className="flex align-items-center gap-2">
                <img 
                    src={rowData.url} 
                    alt={rowData.nom}
                    className="w-4rem h-3rem object-cover border-round"
                />
                <div>
                    <div className="font-medium">{rowData.nom}</div>
                    <Tag value={rowData.type} severity="info" className="p-tag-sm" />
                </div>
            </div>
        );
    };

    const historiqueItemTemplate = (item: any) => {
        return (
            <div className="flex flex-column gap-1">
                <div className="font-medium">{item.action}</div>
                <div className="text-sm text-500">Par {item.utilisateur}</div>
                {item.commentaire && (
                    <div className="text-sm">{item.commentaire}</div>
                )}
            </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('/maintenance')}
                />
                <Button
                    label="Modifier"
                    icon="pi pi-pencil"
                    className="p-button-success"
                    onClick={() => router.push(`/maintenance/${maintenanceId}/edit`)}
                />
                {maintenance?.statut === 'PLANIFIEE' && (
                    <Button
                        label="Démarrer"
                        icon="pi pi-play"
                        className="p-button-warning"
                        onClick={() => changerStatutMaintenance('EN_COURS')}
                    />
                )}
                {maintenance?.statut === 'EN_COURS' && (
                    <Button
                        label="Terminer"
                        icon="pi pi-check"
                        className="p-button-success"
                        onClick={() => changerStatutMaintenance('TERMINEE')}
                    />
                )}
            </div>
        );
    };

    const rightToolbarTemplate = () => {
        return (
            <div className="flex gap-2">
                <Button
                    label="Matériel"
                    icon="pi pi-cog"
                    className="p-button-info"
                    onClick={() => router.push(`/materiels/${maintenance?.materielId}`)}
                />
                <Button
                    label="Planifier Suivante"
                    icon="pi pi-calendar-plus"
                    className="p-button-secondary"
                    onClick={() => router.push(`/maintenance/nouveau?materielId=${maintenance?.materielId}`)}
                />
                <Button
                    icon="pi pi-refresh"
                    className="p-button-outlined"
                    onClick={loadMaintenanceDetail}
                    tooltip="Actualiser"
                />
            </div>
        );
    };

    if (loading) {
        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>
        );
    }

    if (!maintenance) {
        return (
            <div className="grid">
                <div className="col-12">
                    <Card>
                        <div className="text-center">
                            <p>Maintenance non trouvée</p>
                        </div>
                    </Card>
                </div>
            </div>
        );
    }

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

            {/* En-tête maintenance */}
            <div className="col-12">
                <Card>
                    <div className="flex flex-column lg:flex-row lg:align-items-center gap-4">
                        <div className="flex align-items-center justify-content-center bg-orange-100 border-round" style={{ width: '4rem', height: '4rem' }}>
                            <i className="pi pi-wrench text-orange-500 text-2xl" />
                        </div>
                        <div className="flex-1">
                            <h2 className="m-0 mb-2">Maintenance #{maintenance.id}</h2>
                            <div className="flex flex-wrap gap-2 mb-2">
                                <Tag value={maintenance.typeMaintenance} severity={getTypeSeverity(maintenance.typeMaintenance)} />
                                <Tag value={maintenance.statut} severity={getStatutSeverity(maintenance.statut)} />
                                <Tag value={maintenance.priorite} severity={getPrioriteSeverity(maintenance.priorite)} />
                            </div>
                            <div className="text-600">
                                <p className="m-0">🔧 {maintenance.materielNom} ({maintenance.materielType})</p>
                                <p className="m-0">📅 Planifiée: {new Date(maintenance.datePlanifiee).toLocaleDateString('fr-FR')}</p>
                                {maintenance.technicienNom && <p className="m-0">👤 Technicien: {maintenance.technicienNom}</p>}
                            </div>
                        </div>
                        <div className="text-center">
                            <div className="text-2xl font-bold text-blue-500 mb-1">
                                {calculerCoutTotal().toLocaleString('fr-FR')} €
                            </div>
                            <div className="text-500 mb-2">Coût total</div>
                            {calculerEfficacite() && (
                                <div>
                                    <div className="text-lg font-bold text-green-500">{calculerEfficacite()}%</div>
                                    <div className="text-500">Efficacité</div>
                                </div>
                            )}
                        </div>
                    </div>
                </Card>
            </div>

            {/* Onglets de détail */}
            <div className="col-12">
                <Card>
                    <TabView>
                        <TabPanel header="Informations Générales">
                            <div className="grid">
                                <div className="col-12 md:col-6">
                                    <h4>Détails de la maintenance</h4>
                                    <div className="field">
                                        <label className="font-medium">Description:</label>
                                        <p>{maintenance.description}</p>
                                    </div>
                                    {maintenance.problemeSignale && (
                                        <div className="field">
                                            <label className="font-medium">Problème signalé:</label>
                                            <p className="text-red-600">{maintenance.problemeSignale}</p>
                                        </div>
                                    )}
                                    {maintenance.solutionApportee && (
                                        <div className="field">
                                            <label className="font-medium">Solution apportée:</label>
                                            <p className="text-green-600">{maintenance.solutionApportee}</p>
                                        </div>
                                    )}
                                    {maintenance.observations && (
                                        <div className="field">
                                            <label className="font-medium">Observations:</label>
                                            <p>{maintenance.observations}</p>
                                        </div>
                                    )}
                                </div>
                                <div className="col-12 md:col-6">
                                    <h4>Informations matériel</h4>
                                    <div className="field">
                                        <label className="font-medium">Matériel:</label>
                                        <p>{maintenance.materielNom}</p>
                                    </div>
                                    <div className="field">
                                        <label className="font-medium">Type:</label>
                                        <p>{maintenance.materielType}</p>
                                    </div>
                                    <div className="field">
                                        <label className="font-medium">Marque/Modèle:</label>
                                        <p>{maintenance.materielMarque} {maintenance.materielModele}</p>
                                    </div>
                                    {maintenance.prochaineMaintenance && (
                                        <div className="field">
                                            <label className="font-medium">Prochaine maintenance:</label>
                                            <p className="text-orange-500">
                                                {new Date(maintenance.prochaineMaintenance).toLocaleDateString('fr-FR')}
                                            </p>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </TabPanel>

                        <TabPanel header="Temps et Coûts">
                            <div className="grid">
                                <div className="col-12 md:col-6">
                                    <h4>Planification</h4>
                                    <div className="field">
                                        <label className="font-medium">Date de création:</label>
                                        <p>{new Date(maintenance.dateCreation).toLocaleDateString('fr-FR')}</p>
                                    </div>
                                    <div className="field">
                                        <label className="font-medium">Date planifiée:</label>
                                        <p>{new Date(maintenance.datePlanifiee).toLocaleDateString('fr-FR')}</p>
                                    </div>
                                    {maintenance.dateDebut && (
                                        <div className="field">
                                            <label className="font-medium">Date de début:</label>
                                            <p>{new Date(maintenance.dateDebut).toLocaleDateString('fr-FR')}</p>
                                        </div>
                                    )}
                                    {maintenance.dateFin && (
                                        <div className="field">
                                            <label className="font-medium">Date de fin:</label>
                                            <p>{new Date(maintenance.dateFin).toLocaleDateString('fr-FR')}</p>
                                        </div>
                                    )}
                                </div>
                                <div className="col-12 md:col-6">
                                    <h4>Durée et coûts</h4>
                                    <div className="field">
                                        <label className="font-medium">Durée estimée:</label>
                                        <p>{maintenance.dureeEstimee}h</p>
                                    </div>
                                    {maintenance.dureeReelle && (
                                        <div className="field">
                                            <label className="font-medium">Durée réelle:</label>
                                            <p className="text-green-600">{maintenance.dureeReelle}h</p>
                                        </div>
                                    )}
                                    <div className="field">
                                        <label className="font-medium">Coût estimé:</label>
                                        <p>{maintenance.coutEstime?.toLocaleString('fr-FR') || 0} €</p>
                                    </div>
                                    {maintenance.coutReel && (
                                        <div className="field">
                                            <label className="font-medium">Coût réel:</label>
                                            <p className="text-green-600">{maintenance.coutReel.toLocaleString('fr-FR')} €</p>
                                        </div>
                                    )}
                                    {calculerEfficacite() && (
                                        <div className="field">
                                            <label className="font-medium">Efficacité:</label>
                                            <div className="flex align-items-center gap-2">
                                                <ProgressBar value={calculerEfficacite()!} className="flex-1" />
                                                <span>{calculerEfficacite()}%</span>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </TabPanel>

                        <TabPanel header="Pièces et Outils">
                            <div className="grid">
                                <div className="col-12">
                                    <h4>Pièces utilisées</h4>
                                    <DataTable 
                                        value={maintenance.piecesUtilisees} 
                                        emptyMessage="Aucune pièce utilisée"
                                        responsiveLayout="scroll"
                                    >
                                        <Column field="nom" header="Pièce" body={pieceBodyTemplate} />
                                        <Column field="quantite" header="Quantité" />
                                        <Column field="cout" header="Coût" body={coutPieceBodyTemplate} />
                                    </DataTable>
                                </div>
                                <div className="col-12 mt-4">
                                    <h4>Outils utilisés</h4>
                                    <DataTable 
                                        value={maintenance.outilsUtilises} 
                                        emptyMessage="Aucun outil spécifique"
                                        responsiveLayout="scroll"
                                    >
                                        <Column field="nom" header="Outil" />
                                        <Column field="type" header="Type" />
                                        <Column field="dureeUtilisation" header="Durée (h)" />
                                    </DataTable>
                                </div>
                            </div>
                        </TabPanel>

                        <TabPanel header="Photos">
                            <DataTable 
                                value={maintenance.photos} 
                                emptyMessage="Aucune photo disponible"
                                responsiveLayout="scroll"
                            >
                                <Column field="nom" header="Photo" body={photoBodyTemplate} />
                                <Column field="type" header="Type" />
                                <Column 
                                    field="dateAjout" 
                                    header="Date" 
                                    body={(rowData) => new Date(rowData.dateAjout).toLocaleDateString('fr-FR')}
                                />
                            </DataTable>
                        </TabPanel>

                        <TabPanel header="Historique">
                            <Timeline 
                                value={maintenance.historique} 
                                content={historiqueItemTemplate}
                                opposite={(item) => new Date(item.date).toLocaleDateString('fr-FR')}
                            />
                        </TabPanel>

                        <TabPanel header="Qualité">
                            <div className="grid">
                                <div className="col-12 md:col-6">
                                    <h4>Évaluation qualité</h4>
                                    {maintenance.evaluationQualite ? (
                                        <div>
                                            <div className="flex align-items-center gap-2 mb-2">
                                                <span className="text-2xl font-bold text-green-500">
                                                    {maintenance.evaluationQualite}/5
                                                </span>
                                                <div className="flex">
                                                    {[1, 2, 3, 4, 5].map((star) => (
                                                        <i
                                                            key={star}
                                                            className={`pi pi-star${star <= maintenance.evaluationQualite! ? '-fill' : ''} text-yellow-500`}
                                                        />
                                                    ))}
                                                </div>
                                            </div>
                                            {maintenance.commentaireQualite && (
                                                <p>{maintenance.commentaireQualite}</p>
                                            )}
                                        </div>
                                    ) : (
                                        <p className="text-500">Évaluation en attente</p>
                                    )}
                                </div>
                                <div className="col-12 md:col-6">
                                    <h4>Analyse</h4>
                                    {maintenance.causeRacine && (
                                        <div className="field">
                                            <label className="font-medium">Cause racine:</label>
                                            <p>{maintenance.causeRacine}</p>
                                        </div>
                                    )}
                                    {maintenance.actionPreventive && (
                                        <div className="field">
                                            <label className="font-medium">Action préventive:</label>
                                            <p className="text-blue-600">{maintenance.actionPreventive}</p>
                                        </div>
                                    )}
                                    {maintenance.tempsReponse && (
                                        <div className="field">
                                            <label className="font-medium">Temps de réponse:</label>
                                            <p>{maintenance.tempsReponse} minutes</p>
                                        </div>
                                    )}
                                    {maintenance.tempsResolution && (
                                        <div className="field">
                                            <label className="font-medium">Temps de résolution:</label>
                                            <p>{maintenance.tempsResolution} minutes</p>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </TabPanel>
                    </TabView>
                </Card>
            </div>
        </div>
    );
};

export default MaintenanceDetailPage;