'use client';

import React, { useState, useEffect, useRef } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';
import { InputText } from 'primereact/inputtext';
import { InputNumber } from 'primereact/inputnumber';
import { Dropdown } from 'primereact/dropdown';
import { Calendar } from 'primereact/calendar';
import { InputTextarea } from 'primereact/inputtextarea';
import { Toast } from 'primereact/toast';
import { Toolbar } from 'primereact/toolbar';
import { ConfirmDialog } from 'primereact/confirmdialog';
import { Tag } from 'primereact/tag';
import { FilterMatchMode } from 'primereact/api';
import { materielService } from '../../../services/api';
import { Materiel, TypeMateriel, StatutMateriel } from '../../../types/btp';
import { formatDate, formatCurrency } from '../../../utils/formatters';

const MaterielsPage = () => {
    const [materiels, setMateriels] = useState<Materiel[]>([]);
    const [materiel, setMateriel] = useState<Partial<Materiel>>({});
    const [selectedMateriels, setSelectedMateriels] = useState<Materiel[]>([]);
    const [materielDialog, setMaterielDialog] = useState(false);
    const [loading, setLoading] = useState(true);
    const [globalFilter, setGlobalFilter] = useState('');
    const [submitted, setSubmitted] = useState(false);
    const toast = useRef<Toast>(null);
    const dt = useRef<DataTable<Materiel[]>>(null);

    const typeOptions = Object.values(TypeMateriel).map(type => ({
        label: type.replace('_', ' '),
        value: type
    }));

    const statutOptions = Object.values(StatutMateriel).map(statut => ({
        label: statut.replace('_', ' '),
        value: statut
    }));

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

    const loadMateriels = async () => {
        try {
            setLoading(true);
            const data = await materielService.getAll();
            setMateriels(data);
        } catch (error) {
            console.error('Erreur lors du chargement des matériels:', error);
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: 'Impossible de charger les matériels',
                life: 3000
            });
        } finally {
            setLoading(false);
        }
    };

    const openNew = () => {
        setMateriel({
            statut: StatutMateriel.DISPONIBLE,
            actif: true
        });
        setSubmitted(false);
        setMaterielDialog(true);
    };

    const hideDialog = () => {
        setSubmitted(false);
        setMaterielDialog(false);
        setMateriel({});
    };

    const saveMateriel = async () => {
        setSubmitted(true);

        if (materiel.nom?.trim()) {
            try {
                let savedMateriel: Materiel;

                if (materiel.id) {
                    savedMateriel = await materielService.update(materiel.id, materiel);
                    const updatedMateriels = materiels.map(m => 
                        m.id === materiel.id ? savedMateriel : m
                    );
                    setMateriels(updatedMateriels);
                    
                    toast.current?.show({
                        severity: 'success',
                        summary: 'Succès',
                        detail: 'Matériel mis à jour',
                        life: 3000
                    });
                } else {
                    savedMateriel = await materielService.create(materiel);
                    setMateriels([...materiels, savedMateriel]);
                    
                    toast.current?.show({
                        severity: 'success',
                        summary: 'Succès',
                        detail: 'Matériel créé',
                        life: 3000
                    });
                }

                hideDialog();
            } catch (error: any) {
                toast.current?.show({
                    severity: 'error',
                    summary: 'Erreur',
                    detail: error?.userMessage || 'Erreur lors de la sauvegarde',
                    life: 3000
                });
            }
        }
    };

    const editMateriel = (materiel: Materiel) => {
        setMateriel({ ...materiel });
        setMaterielDialog(true);
    };

    const confirmDeleteSelected = () => {
        if (selectedMateriels && selectedMateriels.length > 0) {
            // Implémenter la suppression en lot si nécessaire
        }
    };

    const deleteMateriel = async (materiel: Materiel) => {
        try {
            await materielService.delete(materiel.id);
            const updatedMateriels = materiels.filter(m => m.id !== materiel.id);
            setMateriels(updatedMateriels);
            
            toast.current?.show({
                severity: 'success',
                summary: 'Succès',
                detail: 'Matériel supprimé',
                life: 3000
            });
        } catch (error: any) {
            toast.current?.show({
                severity: 'error',
                summary: 'Erreur',
                detail: error?.userMessage || 'Erreur lors de la suppression',
                life: 3000
            });
        }
    };

    const exportCSV = () => {
        dt.current?.exportCSV();
    };

    const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
        const val = (e.target && e.target.value) || '';
        const _materiel = { ...materiel };
        (_materiel as any)[name] = val;
        setMateriel(_materiel);
    };

    const onInputNumberChange = (value: number | null, name: string) => {
        const _materiel = { ...materiel };
        (_materiel as any)[name] = value;
        setMateriel(_materiel);
    };

    const onDropdownChange = (e: any, name: string) => {
        const _materiel = { ...materiel };
        (_materiel as any)[name] = e.value;
        setMateriel(_materiel);
    };

    const onDateChange = (e: any, name: string) => {
        const _materiel = { ...materiel };
        (_materiel as any)[name] = e.value;
        setMateriel(_materiel);
    };

    // Templates pour les colonnes
    const typeBodyTemplate = (rowData: Materiel) => {
        return (
            <Tag 
                value={rowData.type?.replace('_', ' ')} 
                severity={getTypeSeverity(rowData.type)} 
            />
        );
    };

    const statutBodyTemplate = (rowData: Materiel) => {
        return (
            <Tag 
                value={rowData.statut?.replace('_', ' ')} 
                severity={getStatutSeverity(rowData.statut)} 
            />
        );
    };

    const valeurBodyTemplate = (rowData: Materiel) => {
        return formatCurrency(rowData.valeurActuelle || rowData.valeurAchat);
    };

    const dateBodyTemplate = (rowData: Materiel) => {
        return formatDate(rowData.dateAchat);
    };

    const actionBodyTemplate = (rowData: Materiel) => {
        return (
            <div className="flex gap-2">
                <Button
                    icon="pi pi-pencil"
                    className="p-button-text p-button-rounded"
                    onClick={() => editMateriel(rowData)}
                />
                <Button
                    icon="pi pi-trash"
                    className="p-button-text p-button-rounded"
                    severity="danger"
                    onClick={() => deleteMateriel(rowData)}
                />
            </div>
        );
    };

    const getTypeSeverity = (type?: TypeMateriel) => {
        switch (type) {
            case TypeMateriel.ENGIN_CHANTIER:
                return 'danger';
            case TypeMateriel.OUTIL_ELECTRIQUE:
            case TypeMateriel.OUTIL_MANUEL:
                return 'warning';
            case TypeMateriel.EQUIPEMENT_SECURITE:
                return 'success';
            case TypeMateriel.VEHICULE:
                return 'info';
            case TypeMateriel.GRUE:
            case TypeMateriel.BETONIERE:
                return 'danger';
            default:
                return 'secondary';
        }
    };

    const getStatutSeverity = (statut?: StatutMateriel) => {
        switch (statut) {
            case StatutMateriel.DISPONIBLE:
                return 'success';
            case StatutMateriel.UTILISE:
                return 'warning';
            case StatutMateriel.MAINTENANCE:
            case StatutMateriel.EN_REPARATION:
                return 'info';
            case StatutMateriel.HORS_SERVICE:
                return 'danger';
            case StatutMateriel.RESERVE:
                return 'secondary';
            default:
                return undefined;
        }
    };

    const leftToolbarTemplate = () => {
        return (
            <div className="flex flex-wrap gap-2">
                <Button 
                    label="Nouveau" 
                    icon="pi pi-plus" 
                    severity="success" 
                    className="mr-2 p-button-text p-button-rounded" 
                    onClick={openNew} 
                />
                <Button 
                    label="Supprimer" 
                    icon="pi pi-trash" 
                    severity="danger" 
                    className="p-button-text p-button-rounded"
                    onClick={confirmDeleteSelected} 
                    disabled={!selectedMateriels || selectedMateriels.length === 0} 
                />
            </div>
        );
    };

    const rightToolbarTemplate = () => {
        return (
            <Button 
                label="Exporter" 
                icon="pi pi-upload" 
                severity="help" 
                className="p-button-text p-button-rounded"
                onClick={exportCSV} 
            />
        );
    };

    const header = (
        <div className="flex flex-wrap gap-2 align-items-center justify-content-between">
            <h4 className="m-0">Gestion du Matériel</h4>
            <span className="p-input-icon-left">
                <i className="pi pi-search" />
                <InputText 
                    type="search" 
                    placeholder="Rechercher..." 
                    onInput={(e) => setGlobalFilter(e.currentTarget.value)} 
                />
            </span>
        </div>
    );

    const materielDialogFooter = (
        <div className="flex gap-2">
            <Button 
                label="Annuler" 
                icon="pi pi-times" 
                className="p-button-text p-button-rounded" 
                onClick={hideDialog} 
            />
            <Button 
                label="Sauvegarder" 
                icon="pi pi-check" 
                className="p-button-text p-button-rounded" 
                onClick={saveMateriel} 
            />
        </div>
    );

    const filters = {
        global: { value: globalFilter, matchMode: FilterMatchMode.CONTAINS }
    };

    return (
        <div className="grid">
            <div className="col-12">
                <Toast ref={toast} />
                <ConfirmDialog />

                <div className="card">
                    <Toolbar 
                        className="mb-4" 
                        left={leftToolbarTemplate} 
                        right={rightToolbarTemplate}
                    />

                    <DataTable
                        ref={dt}
                        value={materiels}
                        selection={selectedMateriels}
                        onSelectionChange={(e) => setSelectedMateriels(e.value)}
                        selectionMode="checkbox"
                        dataKey="id"
                        paginator
                        rows={10}
                        rowsPerPageOptions={[5, 10, 25]}
                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                        currentPageReportTemplate="Affichage {first} à {last} de {totalRecords} matériels"
                        filters={filters}
                        filterDisplay="menu"
                        loading={loading}
                        globalFilterFields={['nom', 'marque', 'modele', 'numeroSerie', 'type', 'statut']}
                        header={header}
                        emptyMessage="Aucun matériel trouvé."
                    >
                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
                        <Column field="nom" header="Nom" sortable />
                        <Column field="marque" header="Marque" sortable />
                        <Column field="modele" header="Modèle" sortable />
                        <Column field="numeroSerie" header="N° Série" sortable />
                        <Column field="type" header="Type" body={typeBodyTemplate} sortable />
                        <Column field="statut" header="Statut" body={statutBodyTemplate} sortable />
                        <Column field="valeurActuelle" header="Valeur" body={valeurBodyTemplate} sortable />
                        <Column field="dateAchat" header="Date Achat" body={dateBodyTemplate} sortable />
                        <Column field="localisation" header="Localisation" sortable />
                        <Column body={actionBodyTemplate} exportable={false} style={{ minWidth: '8rem' }} />
                    </DataTable>
                </div>

                <Dialog
                    visible={materielDialog}
                    style={{ width: '800px' }}
                    header="Détails du matériel"
                    modal
                    className="p-fluid"
                    footer={materielDialogFooter}
                    onHide={hideDialog}
                >
                    <div className="formgrid grid">
                        <div className="field col-12 md:col-6">
                            <label htmlFor="nom" className="font-bold">
                                Nom <span className="text-red-500">*</span>
                            </label>
                            <InputText
                                id="nom"
                                value={materiel.nom || ''}
                                onChange={(e) => onInputChange(e, 'nom')}
                                required
                                autoFocus
                                className={submitted && !materiel.nom ? 'p-invalid' : ''}
                            />
                            {submitted && !materiel.nom && <small className="p-error">Le nom est obligatoire.</small>}
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="type" className="font-bold">
                                Type <span className="text-red-500">*</span>
                            </label>
                            <Dropdown
                                id="type"
                                value={materiel.type}
                                onChange={(e) => onDropdownChange(e, 'type')}
                                options={typeOptions}
                                placeholder="Sélectionner un type"
                                className={submitted && !materiel.type ? 'p-invalid' : ''}
                            />
                            {submitted && !materiel.type && <small className="p-error">Le type est obligatoire.</small>}
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="marque" className="font-bold">Marque</label>
                            <InputText
                                id="marque"
                                value={materiel.marque || ''}
                                onChange={(e) => onInputChange(e, 'marque')}
                            />
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="modele" className="font-bold">Modèle</label>
                            <InputText
                                id="modele"
                                value={materiel.modele || ''}
                                onChange={(e) => onInputChange(e, 'modele')}
                            />
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="numeroSerie" className="font-bold">Numéro de série</label>
                            <InputText
                                id="numeroSerie"
                                value={materiel.numeroSerie || ''}
                                onChange={(e) => onInputChange(e, 'numeroSerie')}
                            />
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="statut" className="font-bold">Statut</label>
                            <Dropdown
                                id="statut"
                                value={materiel.statut}
                                onChange={(e) => onDropdownChange(e, 'statut')}
                                options={statutOptions}
                                placeholder="Sélectionner un statut"
                            />
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="dateAchat" className="font-bold">Date d'achat</label>
                            <Calendar
                                id="dateAchat"
                                value={materiel.dateAchat ? new Date(materiel.dateAchat) : null}
                                onChange={(e) => onDateChange(e, 'dateAchat')}
                                dateFormat="dd/mm/yy"
                                showIcon
                            />
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="valeurAchat" className="font-bold">Valeur d'achat</label>
                            <InputNumber
                                id="valeurAchat"
                                value={materiel.valeurAchat}
                                onValueChange={(e) => onInputNumberChange(e.value, 'valeurAchat')}
                                mode="currency"
                                currency="EUR"
                                locale="fr-FR"
                            />
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="valeurActuelle" className="font-bold">Valeur actuelle</label>
                            <InputNumber
                                id="valeurActuelle"
                                value={materiel.valeurActuelle}
                                onValueChange={(e) => onInputNumberChange(e.value, 'valeurActuelle')}
                                mode="currency"
                                currency="EUR"
                                locale="fr-FR"
                            />
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="localisation" className="font-bold">Localisation</label>
                            <InputText
                                id="localisation"
                                value={materiel.localisation || ''}
                                onChange={(e) => onInputChange(e, 'localisation')}
                            />
                        </div>

                        <div className="field col-12 md:col-6">
                            <label htmlFor="proprietaire" className="font-bold">Propriétaire</label>
                            <InputText
                                id="proprietaire"
                                value={materiel.proprietaire || ''}
                                onChange={(e) => onInputChange(e, 'proprietaire')}
                            />
                        </div>

                        <div className="field col-12">
                            <label htmlFor="description" className="font-bold">Description</label>
                            <InputTextarea
                                id="description"
                                value={materiel.description || ''}
                                onChange={(e) => onInputChange(e, 'description')}
                                rows={3}
                                cols={20}
                            />
                        </div>
                    </div>
                </Dialog>
            </div>
        </div>
    );
};

export default MaterielsPage;