# 🎣 Hook: `useLoadCupsAndLocalidades`

## 📋 Descripción

Hook personalizado de React que **carga automáticamente** los datos de **CUPS Eléctricos**, **CUPS Gas** y **Localidades** desde la API. Diseñado para reemplazar la carga de estos datos mediante props de Inertia, mejorando significativamente el rendimiento.

---

## 📍 Ubicación

```
resources/js/Pages/Eneon/Contratos/hooks/useLoadCupsAndLocalidades.ts
```

---

## 🎯 Propósito

- ✅ Cargar CUPS y Localidades desde la API en lugar de props
- ✅ Reducir el tamaño inicial de la respuesta de Inertia (de 2-5 MB a 50-200 KB)
- ✅ Mejorar el tiempo de carga de las páginas (de 3-8 seg a 0.5-1 seg)
- ✅ Proporcionar un estado de carga centralizado
- ✅ Manejar errores de forma consistente
- ✅ Permitir recarga manual de datos

---

## 📦 Parámetros (Opciones)

```typescript
interface UseLoadCupsAndLocalidadesOptions {
    showErrorAlert?: boolean;    // Mostrar alerta de error (default: true)
    autoLoad?: boolean;           // Cargar automáticamente al montar (default: true)
    onSuccess?: (data) => void;   // Callback cuando carga exitosa
    onError?: (error) => void;    // Callback cuando hay error
}
```

---

## 🔄 Retorno

```typescript
interface UseLoadCupsAndLocalidadesReturn {
    cupsElectricos: any[];     // Array de CUPS eléctricos
    cupsGas: any[];            // Array de CUPS gas
    localidades: any[];        // Array de localidades
    isLoading: boolean;        // Estado de carga
    error: Error | null;       // Error si ocurrió
    reload: () => Promise<void>; // Función para recargar datos
}
```

---

## 💻 Uso Básico

### **Ejemplo 1: Uso Simple (Auto-carga)**

```typescript
import { useLoadCupsAndLocalidades } from '../hooks/useLoadCupsAndLocalidades';

const MiComponente = () => {
    const { 
        cupsElectricos, 
        cupsGas, 
        localidades, 
        isLoading 
    } = useLoadCupsAndLocalidades();

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

    return (
        <div>
            <p>CUPS Eléctricos: {cupsElectricos.length}</p>
            <p>CUPS Gas: {cupsGas.length}</p>
            <p>Localidades: {localidades.length}</p>
        </div>
    );
};
```

---

### **Ejemplo 2: Con Opciones Personalizadas**

```typescript
import { useLoadCupsAndLocalidades } from '../hooks/useLoadCupsAndLocalidades';

const MiComponente = () => {
    const { 
        cupsElectricos, 
        cupsGas, 
        localidades, 
        isLoading,
        error,
        reload
    } = useLoadCupsAndLocalidades({
        showErrorAlert: false,  // No mostrar alerta automática
        autoLoad: true,
        onSuccess: (data) => {
            console.log('✅ Datos cargados:', data);
        },
        onError: (error) => {
            console.error('❌ Error personalizado:', error);
        }
    });

    // Manejo manual del error
    if (error) {
        return (
            <div className="alert alert-danger">
                <p>Error: {error.message}</p>
                <button onClick={reload}>Reintentar</button>
            </div>
        );
    }

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

    return <div>Datos: {cupsElectricos.length}</div>;
};
```

---

### **Ejemplo 3: Carga Manual (sin auto-load)**

```typescript
import { useLoadCupsAndLocalidades } from '../hooks/useLoadCupsAndLocalidades';

const MiComponente = () => {
    const { 
        cupsElectricos, 
        cupsGas, 
        localidades, 
        isLoading,
        reload
    } = useLoadCupsAndLocalidades({
        autoLoad: false  // No cargar automáticamente
    });

    const handleCargarDatos = async () => {
        await reload();
        console.log('Datos recargados manualmente');
    };

    return (
        <div>
            <button onClick={handleCargarDatos} disabled={isLoading}>
                {isLoading ? 'Cargando...' : 'Cargar Datos'}
            </button>
            <p>CUPS: {cupsElectricos.length}</p>
        </div>
    );
};
```

---

### **Ejemplo 4: Uso Real en MultiClienteMultiPunto**

```typescript
import { useLoadCupsAndLocalidades } from '../hooks/useLoadCupsAndLocalidades';
import { useContratoMultiClienteMultiPunto } from './ts/useContratoMultiClienteMultiPunto';

const MultiClienteMultiPunto = ({ comercializadoras, productos, anexos, ... }) => {
    // 🔄 Cargar CUPS y Localidades desde la API
    const { 
        cupsElectricos, 
        cupsGas, 
        localidades, 
        isLoading: isLoadingData
    } = useLoadCupsAndLocalidades({
        showErrorAlert: true,
        autoLoad: true
    });

    // Pasar los datos cargados al hook principal
    const { data, setData, saveContrato, ... } = useContratoMultiClienteMultiPunto({
        contactos,
        clientes,
        comercializadoras,
        productos,
        anexos,
        cupsElectricos,   // ✅ Cargado desde API
        cupsGas,          // ✅ Cargado desde API
        localidades       // ✅ Cargado desde API
    });

    // Mostrar loading mientras cargan los datos
    if (isLoadingData) {
        return (
            <div className="text-center py-5">
                <div className="spinner-border text-primary"></div>
                <p>Cargando datos del formulario...</p>
            </div>
        );
    }

    return (
        <div>
            {/* Formulario con datos cargados */}
        </div>
    );
};
```

---

## 🔄 Recarga de Datos

El hook proporciona una función `reload()` que puedes usar para recargar los datos manualmente:

```typescript
const { reload, isLoading } = useLoadCupsAndLocalidades();

// Recargar después de crear un CUPS
const handleCrearCups = async (datos) => {
    await axios.post('/cups/crear', datos);
    
    // Recargar datos para reflejar el nuevo CUPS
    await reload();
    
    Swal.fire('¡Éxito!', 'CUPS creado', 'success');
};
```

---

## 📊 Estados del Hook

| Estado | Descripción | Cuándo ocurre |
|--------|-------------|---------------|
| `isLoading: true` | Cargando datos | Durante la petición a la API |
| `isLoading: false` | Datos cargados | Después de cargar o error |
| `error: null` | Sin errores | Carga exitosa |
| `error: Error` | Hay un error | Fallo en la carga |
| `cupsElectricos: []` | Vacío | Inicial o después de error |
| `cupsElectricos: [...]` | Con datos | Carga exitosa |

---

## ⚠️ Manejo de Errores

### **Alerta Automática (default)**
Por defecto, muestra un SweetAlert2 cuando hay error:

```typescript
const { cupsElectricos } = useLoadCupsAndLocalidades();
// Si hay error, se muestra automáticamente:
// "Error al cargar datos. Por favor, recarga la página."
```

### **Manejo Manual**
Puedes desactivar la alerta y manejar el error tú mismo:

```typescript
const { error } = useLoadCupsAndLocalidades({
    showErrorAlert: false,
    onError: (error) => {
        console.error('Error:', error);
        // Tu lógica personalizada
    }
});

if (error) {
    return <div>Error: {error.message}</div>;
}
```

---

## 🎨 Ejemplo de Loading UI

```typescript
const { isLoading, cupsElectricos } = useLoadCupsAndLocalidades();

if (isLoading) {
    return (
        <Card>
            <Card.Body className="text-center py-5">
                <div 
                    className="spinner-border text-primary mb-3" 
                    role="status"
                    style={{ width: '3rem', height: '3rem' }}
                >
                    <span className="visually-hidden">Cargando...</span>
                </div>
                <h5 className="text-muted">Cargando datos del formulario...</h5>
                <p className="text-muted small">
                    Obteniendo CUPS y localidades disponibles
                </p>
            </Card.Body>
        </Card>
    );
}
```

---

## 🔍 Consola de Debug

El hook imprime logs útiles en la consola:

```
🔄 useLoadCupsAndLocalidades: Cargando datos desde API...
✅ 150 CUPS eléctricos cargados
✅ 85 CUPS gas cargados
✅ 8131 localidades cargadas
✅ useLoadCupsAndLocalidades: Datos cargados exitosamente
```

En caso de error:
```
❌ useLoadCupsAndLocalidades: Error cargando datos: [error details]
```

---

## 📝 Ventajas

| Antes (Props) | Ahora (Hook) |
|---------------|--------------|
| Datos en props (2-5 MB) | Carga bajo demanda |
| Tiempo: 3-8 segundos | Tiempo: 0.5-1 segundo |
| No reutilizable | Reutilizable en cualquier componente |
| Datos fijos | Recarga dinámica con `reload()` |
| Sin control de loading | Control completo del estado |

---

## 🚀 Componentes que lo Usan

1. ✅ `MultiClienteMultiPunto.tsx` (implementado)
2. 🔜 `ContratoMultiPunto.tsx` (pendiente)
3. 🔜 `Contrato.tsx` (pendiente)
4. 🔜 Otros formularios de contratos

---

## 🔗 Relación con Otros Archivos

```
useLoadCupsAndLocalidades.ts
    ↓ usa
dataService.ts
    ↓ llama a
DataController.php (API Backend)
    ↓ usa
CupsTraits.php + LocalidadTraits.php
    ↓ consulta
Base de Datos (Laravel)
```

---

## ✅ Checklist de Migración

Para migrar un componente a usar este hook:

- [ ] Eliminar `cupsElectricos`, `cupsGas`, `localidades` de la interface de props
- [ ] Eliminar estos parámetros del componente
- [ ] Importar `useLoadCupsAndLocalidades`
- [ ] Llamar al hook antes de otros hooks que necesiten estos datos
- [ ] Agregar loading state con `if (isLoading) return <Loading />`
- [ ] Pasar los datos cargados a los hooks/componentes que los necesiten
- [ ] Eliminar los props del controlador backend
- [ ] Probar que funciona correctamente

---

¡Hook listo para usar! 🎉