Inventario-IT/frontend/src/components/GestionSectores.tsx

import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
import type { Sector } from '../types/interfaces';
import styles from './SimpleTable.module.css';
import ModalSector from './ModalSector';

const BASE_URL = 'http://localhost:5198/api';

const GestionSectores = () => {
    const [sectores, setSectores] = useState<Sector[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editingSector, setEditingSector] = useState<Sector | null>(null);

    useEffect(() => {
        fetch(`${BASE_URL}/sectores`)
            .then(res => res.json())
            .then((data: Sector[]) => {
                setSectores(data);
                setIsLoading(false);
            })
            .catch(err => {
                toast.error("No se pudieron cargar los sectores.");
                console.error(err);
                setIsLoading(false);
            });
    }, []);
    
    const handleOpenCreateModal = () => {
        setEditingSector(null); // Poner en modo 'crear'
        setIsModalOpen(true);
    };

    const handleOpenEditModal = (sector: Sector) => {
        setEditingSector(sector); // Poner en modo 'editar' con los datos del sector
        setIsModalOpen(true);
    };

    const handleSave = async (id: number | null, nombre: string) => {
        const isEditing = id !== null;
        const url = isEditing ? `${BASE_URL}/sectores/${id}` : `${BASE_URL}/sectores`;
        const method = isEditing ? 'PUT' : 'POST';
        const toastId = toast.loading(isEditing ? 'Actualizando...' : 'Creando...');

        try {
            const response = await fetch(url, {
                method,
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ nombre }),
            });

            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.message || 'La operación falló.');
            }

            if (isEditing) {
                // Actualizar el sector en la lista local
                setSectores(prev => prev.map(s => s.id === id ? { ...s, nombre } : s));
                toast.success('Sector actualizado.', { id: toastId });
            } else {
                // Añadir el nuevo sector a la lista local
                const nuevoSector = await response.json();
                setSectores(prev => [...prev, nuevoSector]);
                toast.success('Sector creado.', { id: toastId });
            }

            setIsModalOpen(false); // Cerrar el modal
        } catch (error) {
            if (error instanceof Error) toast.error(error.message, { id: toastId });
        }
    };

    const handleDelete = async (id: number) => {
        if (!window.confirm("¿Estás seguro de eliminar este sector? Los equipos asociados quedarán sin sector.")) {
            return;
        }

        const toastId = toast.loading('Eliminando...');
        try {
            const response = await fetch(`${BASE_URL}/sectores/${id}`, { method: 'DELETE' });
            if (response.status === 409) {
                 throw new Error("No se puede eliminar. Hay equipos asignados a este sector.");
            }
            if (!response.ok) {
                throw new Error("El sector no se pudo eliminar.");
            }
            setSectores(prev => prev.filter(s => s.id !== id));
            toast.success("Sector eliminado.", { id: toastId });
        } catch (error) {
            if (error instanceof Error) toast.error(error.message, { id: toastId });
        }
    };

    if (isLoading) {
        return <div>Cargando sectores...</div>;
    }

    return (
        <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
                <h2>Gestión de Sectores</h2>
                <button onClick={handleOpenCreateModal} className={`${styles.btn} ${styles.btnPrimary}`}>
                    + Añadir Sector
                </button>
            </div>
            <table className={styles.table}>
                <thead>
                    <tr>
                        <th className={styles.th}>Nombre del Sector</th>
                        <th className={styles.th} style={{ width: '200px' }}>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {sectores.map(sector => (
                        <tr key={sector.id} className={styles.tr}>
                            <td className={styles.td}>{sector.nombre}</td>
                            <td className={styles.td}>
                                <div style={{ display: 'flex', gap: '10px' }}>
                                    <button onClick={() => handleOpenEditModal(sector)} className={styles.tableButton}>✏️ Editar</button>
                                    <button onClick={() => handleDelete(sector.id)} className={styles.deleteUserButton} style={{fontSize: '1em', padding: '0.375rem 0.75rem', border: '1px solid #dc3545', borderRadius: '4px'}}>
                                        🗑️ Eliminar
                                    </button>
                                </div>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>

            {isModalOpen && (
                <ModalSector
                    sector={editingSector}
                    onClose={() => setIsModalOpen(false)}
                    onSave={handleSave}
                />
            )}
        </div>
    );
};

export default GestionSectores;