'use client';

import React, { useState, useEffect } from 'react';
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { InputNumber } from 'primereact/inputnumber';
import { Dropdown } from 'primereact/dropdown';
import { Tag } from 'primereact/tag';
import { Badge } from 'primereact/badge';
import { Toolbar } from 'primereact/toolbar';
import { Dialog } from 'primereact/dialog';
import { ProgressBar } from 'primereact/progressbar';
import { FilterMatchMode } from 'primereact/api';
import { useRouter } from 'next/navigation';
import { apiClient } from '../../../../services/api-client';

interface PieceDetachee {
    id: number;
    nom: string;
    reference: string;
    description: string;
    categorie: string;
    fournisseur: string;
    coutUnitaire: number;
    quantiteStock: number;
    seuilAlerte: number;
    seuilCritique: number;
    uniteStock: string;
    localisation: string;
    dateAchat?: string;
    garantie?: number; // en mois
    materielsCompatibles: string[];
    frequenceUtilisation: number;
    derniereMaintenance?: string;
    prochainCommande?: string;
    statut: 'DISPONIBLE' | 'RUPTURE' | 'ALERTE' | 'COMMANDE';
    historiqueUtilisation: Array<{
        date: string;
        quantite: number;
        maintenanceId: number;
        technicien: string;
    }>;
}

interface NouvellePiece {
    nom: string;
    reference: string;
    description: string;
    categorie: string;
    fournisseur: string;
    coutUnitaire: number;
    quantiteStock: number;
    seuilAlerte: number;
    seuilCritique: number;
    uniteStock: string;
    localisation: string;
    garantie?: number;
    materielsCompatibles: string[];
}

const PiecesDetacheesPage = () => {
    const [pieces, setPieces] = useState<PieceDetachee[]>([]);
    const [loading, setLoading] = useState(true);
    const [pieceDialog, setPieceDialog] = useState(false);
    const [nouvellePiece, setNouvellePiece] = useState<NouvellePiece>({
        nom: '',
        reference: '',
        description: '',
        categorie: '',
        fournisseur: '',
        coutUnitaire: 0,
        quantiteStock: 0,
        seuilAlerte: 10,
        seuilCritique: 5,
        uniteStock: 'unité',
        localisation: '',
        materielsCompatibles: []
    });
    const [selectedPieces, setSelectedPieces] = useState<PieceDetachee[]>([]);
    const [globalFilterValue, setGlobalFilterValue] = useState('');
    const [filters, setFilters] = useState({
        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
        nom: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
        reference: { value: null, matchMode: FilterMatchMode.CONTAINS },
        categorie: { value: null, matchMode: FilterMatchMode.EQUALS },
        fournisseur: { value: null, matchMode: FilterMatchMode.CONTAINS },
        statut: { value: null, matchMode: FilterMatchMode.EQUALS }
    });
    const router = useRouter();

    const categorieOptions = [
        { label: 'Moteur', value: 'MOTEUR' },
        { label: 'Hydraulique', value: 'HYDRAULIQUE' },
        { label: 'Électrique', value: 'ELECTRIQUE' },
        { label: 'Mécanique', value: 'MECANIQUE' },
        { label: 'Pneumatique', value: 'PNEUMATIQUE' },
        { label: 'Filtres', value: 'FILTRES' },
        { label: 'Lubrifiants', value: 'LUBRIFIANTS' },
        { label: 'Consommables', value: 'CONSOMMABLES' }
    ];

    const uniteOptions = [
        { label: 'Unité', value: 'unité' },
        { label: 'Litre', value: 'litre' },
        { label: 'Kilogramme', value: 'kg' },
        { label: 'Mètre', value: 'mètre' },
        { label: 'Boîte', value: 'boîte' },
        { label: 'Lot', value: 'lot' }
    ];

    const statutOptions = [
        { label: 'Tous', value: null },
        { label: 'Disponible', value: 'DISPONIBLE' },
        { label: 'Alerte', value: 'ALERTE' },
        { label: 'Rupture', value: 'RUPTURE' },
        { label: 'En commande', value: 'COMMANDE' }
    ];

    useEffect(() => {
        loadPieces();
    }, []);

    const loadPieces = async () => {
        try {
            setLoading(true);
            console.log('🔄 Chargement des pièces détachées...');
            const response = await apiClient.get('/api/maintenance/pieces-detachees');
            console.log('✅ Pièces chargées:', response.data);
            setPieces(response.data || []);
        } catch (error) {
            console.error('❌ Erreur lors du chargement des pièces:', error);
            setPieces([]);
        } finally {
            setLoading(false);
        }
    };

    const ajouterPiece = async () => {
        try {
            console.log('🔄 Ajout d\'une nouvelle pièce...', nouvellePiece);
            const response = await apiClient.post('/api/maintenance/pieces-detachees', nouvellePiece);
            console.log('✅ Pièce ajoutée avec succès:', response.data);
            
            setPieceDialog(false);
            setNouvellePiece({
                nom: '',
                reference: '',
                description: '',
                categorie: '',
                fournisseur: '',
                coutUnitaire: 0,
                quantiteStock: 0,
                seuilAlerte: 10,
                seuilCritique: 5,
                uniteStock: 'unité',
                localisation: '',
                materielsCompatibles: []
            });
            loadPieces();
        } catch (error) {
            console.error('❌ Erreur lors de l\'ajout de la pièce:', error);
        }
    };

    const supprimerPieces = async () => {
        try {
            console.log('🔄 Suppression des pièces sélectionnées...');
            await Promise.all(
                selectedPieces.map(piece => 
                    apiClient.delete(`/api/maintenance/pieces-detachees/${piece.id}`)
                )
            );
            console.log('✅ Pièces supprimées avec succès');
            setSelectedPieces([]);
            loadPieces();
        } catch (error) {
            console.error('❌ Erreur lors de la suppression:', error);
        }
    };

    const commanderPieces = async () => {
        try {
            console.log('🔄 Commande des pièces sélectionnées...');
            const pieceIds = selectedPieces.map(p => p.id);
            await apiClient.post('/api/maintenance/pieces-detachees/commander', { pieceIds });
            console.log('✅ Commande créée avec succès');
            setSelectedPieces([]);
            loadPieces();
        } catch (error) {
            console.error('❌ Erreur lors de la commande:', error);
        }
    };

    const onGlobalFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        let _filters = { ...filters };
        _filters['global'].value = value;

        setFilters(_filters);
        setGlobalFilterValue(value);
    };

    const pieceBodyTemplate = (rowData: PieceDetachee) => {
        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-xs text-500">{rowData.description}</span>
            </div>
        );
    };

    const stockBodyTemplate = (rowData: PieceDetachee) => {
        const pourcentageStock = (rowData.quantiteStock / (rowData.seuilAlerte * 2)) * 100;
        const couleur = rowData.quantiteStock <= rowData.seuilCritique ? 'danger' : 
                      rowData.quantiteStock <= rowData.seuilAlerte ? 'warning' : 'success';
        
        return (
            <div className="flex flex-column gap-2">
                <div className="flex align-items-center gap-2">
                    <span className="font-medium">{rowData.quantiteStock} {rowData.uniteStock}</span>
                    <ProgressBar 
                        value={Math.min(pourcentageStock, 100)} 
                        className="flex-1"
                        color={couleur === 'danger' ? '#f87171' : couleur === 'warning' ? '#fbbf24' : '#10b981'}
                    />
                </div>
                <div className="text-xs text-500">
                    Alerte: {rowData.seuilAlerte} | Critique: {rowData.seuilCritique}
                </div>
            </div>
        );
    };

    const statutBodyTemplate = (rowData: PieceDetachee) => {
        const getStatutSeverity = (statut: string) => {
            switch (statut) {
                case 'DISPONIBLE': return 'success';
                case 'ALERTE': return 'warning';
                case 'RUPTURE': return 'danger';
                case 'COMMANDE': return 'info';
                default: return 'secondary';
            }
        };

        return <Tag value={rowData.statut} severity={getStatutSeverity(rowData.statut)} />;
    };

    const coutBodyTemplate = (rowData: PieceDetachee) => {
        const valeurStock = rowData.quantiteStock * rowData.coutUnitaire;
        
        return (
            <div className="flex flex-column gap-1">
                <span className="font-medium">{rowData.coutUnitaire.toLocaleString('fr-FR')} €</span>
                <span className="text-sm text-500">
                    Stock: {valeurStock.toLocaleString('fr-FR')} €
                </span>
            </div>
        );
    };

    const materielsBodyTemplate = (rowData: PieceDetachee) => {
        return (
            <div className="flex flex-wrap gap-1">
                {rowData.materielsCompatibles.slice(0, 3).map((materiel, index) => (
                    <Tag key={index} value={materiel} className="p-tag-sm" />
                ))}
                {rowData.materielsCompatibles.length > 3 && (
                    <Badge value={`+${rowData.materielsCompatibles.length - 3}`} />
                )}
            </div>
        );
    };

    const actionBodyTemplate = (rowData: PieceDetachee) => {
        return (
            <div className="flex gap-2">
                <Button
                    icon="pi pi-eye"
                    className="p-button-rounded p-button-info p-button-sm"
                    onClick={() => router.push(`/maintenance/pieces/${rowData.id}`)}
                    tooltip="Voir détails"
                />
                <Button
                    icon="pi pi-pencil"
                    className="p-button-rounded p-button-success p-button-sm"
                    onClick={() => router.push(`/maintenance/pieces/${rowData.id}/edit`)}
                    tooltip="Modifier"
                />
                <Button
                    icon="pi pi-shopping-cart"
                    className="p-button-rounded p-button-warning p-button-sm"
                    onClick={() => commanderPieces()}
                    tooltip="Commander"
                    disabled={rowData.statut === 'COMMANDE'}
                />
            </div>
        );
    };

    const leftToolbarTemplate = () => {
        return (
            <div className="flex flex-wrap gap-2">
                <Button
                    label="Retour Maintenance"
                    icon="pi pi-arrow-left"
                    className="p-button-outlined"
                    onClick={() => router.push('/maintenance')}
                />
                <Button
                    label="Nouvelle Pièce"
                    icon="pi pi-plus"
                    className="p-button-success"
                    onClick={() => setPieceDialog(true)}
                />
                <Button
                    label="Commander Sélection"
                    icon="pi pi-shopping-cart"
                    className="p-button-warning"
                    onClick={commanderPieces}
                    disabled={selectedPieces.length === 0}
                />
                <Button
                    label="Supprimer"
                    icon="pi pi-trash"
                    className="p-button-danger"
                    onClick={supprimerPieces}
                    disabled={selectedPieces.length === 0}
                />
            </div>
        );
    };

    const rightToolbarTemplate = () => {
        return (
            <div className="flex gap-2">
                <Button
                    label="Inventaire"
                    icon="pi pi-list"
                    className="p-button-info"
                    onClick={() => router.push('/maintenance/inventaire')}
                />
                <Button
                    label="Commandes"
                    icon="pi pi-shopping-bag"
                    className="p-button-secondary"
                    onClick={() => router.push('/maintenance/commandes')}
                />
                <Button
                    icon="pi pi-refresh"
                    className="p-button-outlined"
                    onClick={loadPieces}
                    tooltip="Actualiser"
                />
            </div>
        );
    };

    const header = (
        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
            <h2 className="m-0">Gestion des Pièces Détachées</h2>
            <div className="flex gap-2 mt-2 md:mt-0">
                <Badge value={pieces.filter(p => p.statut === 'RUPTURE').length} severity="danger" />
                <span>Ruptures</span>
                <Badge value={pieces.filter(p => p.statut === 'ALERTE').length} severity="warning" />
                <span>Alertes</span>
                <Badge value={pieces.filter(p => p.statut === 'COMMANDE').length} severity="info" />
                <span>Commandes</span>
            </div>
        </div>
    );

    const renderHeader = () => {
        return (
            <div className="flex flex-column md:flex-row md:justify-content-between gap-2">
                <div className="flex gap-2">
                    <Dropdown
                        value={filters.statut.value}
                        options={statutOptions}
                        onChange={(e) => {
                            let _filters = { ...filters };
                            _filters.statut.value = e.value;
                            setFilters(_filters);
                        }}
                        placeholder="Filtrer par statut"
                        showClear
                    />
                    <Dropdown
                        value={filters.categorie.value}
                        options={categorieOptions}
                        onChange={(e) => {
                            let _filters = { ...filters };
                            _filters.categorie.value = e.value;
                            setFilters(_filters);
                        }}
                        placeholder="Filtrer par catégorie"
                        showClear
                    />
                </div>
                <span className="p-input-icon-left">
                    <i className="pi pi-search" />
                    <InputText
                        value={globalFilterValue}
                        onChange={onGlobalFilterChange}
                        placeholder="Rechercher..."
                    />
                </span>
            </div>
        );
    };

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

            <div className="col-12">
                <Card>
                    <DataTable
                        value={pieces}
                        loading={loading}
                        dataKey="id"
                        paginator
                        rows={10}
                        rowsPerPageOptions={[5, 10, 25, 50]}
                        className="datatable-responsive"
                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                        currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} pièces"
                        emptyMessage="Aucune pièce détachée trouvée."
                        filters={filters}
                        filterDisplay="menu"
                        globalFilterFields={['nom', 'reference', 'description', 'fournisseur']}
                        header={header}
                        selection={selectedPieces}
                        onSelectionChange={(e) => setSelectedPieces(e.value)}
                        selectionMode="checkbox"
                        responsiveLayout="scroll"
                    >
                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
                        <Column field="statut" header="Statut" body={statutBodyTemplate} sortable style={{ width: '8rem' }} />
                        <Column field="nom" header="Pièce" body={pieceBodyTemplate} sortable />
                        <Column field="categorie" header="Catégorie" sortable style={{ width: '10rem' }} />
                        <Column field="quantiteStock" header="Stock" body={stockBodyTemplate} sortable style={{ width: '15rem' }} />
                        <Column field="coutUnitaire" header="Prix" body={coutBodyTemplate} sortable style={{ width: '10rem' }} />
                        <Column field="fournisseur" header="Fournisseur" sortable style={{ width: '12rem' }} />
                        <Column field="materielsCompatibles" header="Matériels" body={materielsBodyTemplate} style={{ width: '15rem' }} />
                        <Column body={actionBodyTemplate} header="Actions" style={{ width: '12rem' }} />
                    </DataTable>
                </Card>
            </div>

            {/* Dialog Nouvelle Pièce */}
            <Dialog
                visible={pieceDialog}
                style={{ width: '70vw' }}
                header="Ajouter une Pièce Détachée"
                modal
                onHide={() => setPieceDialog(false)}
                footer={
                    <div>
                        <Button
                            label="Annuler"
                            icon="pi pi-times"
                            className="p-button-outlined"
                            onClick={() => setPieceDialog(false)}
                        />
                        <Button
                            label="Ajouter"
                            icon="pi pi-check"
                            className="p-button-success"
                            onClick={ajouterPiece}
                        />
                    </div>
                }
            >
                <div className="grid p-fluid">
                    <div className="col-12 md:col-6">
                        <label className="font-medium">Nom de la pièce *</label>
                        <InputText
                            value={nouvellePiece.nom}
                            onChange={(e) => setNouvellePiece({ ...nouvellePiece, nom: e.target.value })}
                            placeholder="Nom de la pièce"
                        />
                    </div>
                    <div className="col-12 md:col-6">
                        <label className="font-medium">Référence *</label>
                        <InputText
                            value={nouvellePiece.reference}
                            onChange={(e) => setNouvellePiece({ ...nouvellePiece, reference: e.target.value })}
                            placeholder="Référence fabricant"
                        />
                    </div>
                    <div className="col-12">
                        <label className="font-medium">Description</label>
                        <InputText
                            value={nouvellePiece.description}
                            onChange={(e) => setNouvellePiece({ ...nouvellePiece, description: e.target.value })}
                            placeholder="Description de la pièce"
                        />
                    </div>
                    <div className="col-12 md:col-6">
                        <label className="font-medium">Catégorie *</label>
                        <Dropdown
                            value={nouvellePiece.categorie}
                            options={categorieOptions}
                            onChange={(e) => setNouvellePiece({ ...nouvellePiece, categorie: e.value })}
                            placeholder="Sélectionner une catégorie"
                        />
                    </div>
                    <div className="col-12 md:col-6">
                        <label className="font-medium">Fournisseur *</label>
                        <InputText
                            value={nouvellePiece.fournisseur}
                            onChange={(e) => setNouvellePiece({ ...nouvellePiece, fournisseur: e.target.value })}
                            placeholder="Nom du fournisseur"
                        />
                    </div>
                    <div className="col-12 md:col-4">
                        <label className="font-medium">Coût unitaire (€) *</label>
                        <InputNumber
                            value={nouvellePiece.coutUnitaire}
                            onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, coutUnitaire: e.value || 0 })}
                            min={0}
                            mode="currency"
                            currency="EUR"
                            locale="fr-FR"
                        />
                    </div>
                    <div className="col-12 md:col-4">
                        <label className="font-medium">Quantité en stock *</label>
                        <InputNumber
                            value={nouvellePiece.quantiteStock}
                            onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, quantiteStock: e.value || 0 })}
                            min={0}
                        />
                    </div>
                    <div className="col-12 md:col-4">
                        <label className="font-medium">Unité *</label>
                        <Dropdown
                            value={nouvellePiece.uniteStock}
                            options={uniteOptions}
                            onChange={(e) => setNouvellePiece({ ...nouvellePiece, uniteStock: e.value })}
                            placeholder="Unité de mesure"
                        />
                    </div>
                    <div className="col-12 md:col-6">
                        <label className="font-medium">Seuil d'alerte *</label>
                        <InputNumber
                            value={nouvellePiece.seuilAlerte}
                            onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, seuilAlerte: e.value || 10 })}
                            min={1}
                        />
                    </div>
                    <div className="col-12 md:col-6">
                        <label className="font-medium">Seuil critique *</label>
                        <InputNumber
                            value={nouvellePiece.seuilCritique}
                            onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, seuilCritique: e.value || 5 })}
                            min={1}
                        />
                    </div>
                    <div className="col-12 md:col-6">
                        <label className="font-medium">Localisation</label>
                        <InputText
                            value={nouvellePiece.localisation}
                            onChange={(e) => setNouvellePiece({ ...nouvellePiece, localisation: e.target.value })}
                            placeholder="Emplacement de stockage"
                        />
                    </div>
                    <div className="col-12 md:col-6">
                        <label className="font-medium">Garantie (mois)</label>
                        <InputNumber
                            value={nouvellePiece.garantie}
                            onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, garantie: e.value || undefined })}
                            min={0}
                            max={120}
                        />
                    </div>
                </div>
            </Dialog>
        </div>
    );
};

export default PiecesDetacheesPage;