# MultiClienteMultiPunto - Refactorizado

## 📋 Descripción

Módulo refactorizado para la gestión de contratos multi-cliente multi-punto. Permite tramitar contratos donde **múltiples clientes** pueden tener **múltiples CUPS** (puntos de suministro) tanto eléctricos como de gas.

## 🏗️ Arquitectura

El módulo ha sido completamente refactorizado siguiendo los principios de **Separación de Responsabilidades** y **Componentes Reutilizables**.

### Estructura de Carpetas

```
MultiClienteMultiPunto/
├── components/                      # Componentes UI reutilizables
│   ├── RepresentanteLegalSection.tsx    # Sección datos representante legal
│   ├── TabNavigator.tsx                 # Navegación entre tabs (eléctrico/gas)
│   ├── DatosComunesToggle.tsx          # Toggle para datos comunes
│   ├── CupsElectricosTable.tsx         # Tabla de CUPS eléctricos
│   ├── CupsGasTable.tsx                # Tabla de CUPS gas
│   └── index.ts                        # Barrel export
│
├── hooks/                           # Hooks personalizados para lógica
│   ├── useRepresentanteSelection.ts    # Gestión representante legal
│   ├── useClientesPorFila.ts          # Gestión clientes por fila
│   └── index.ts                        # Barrel export + re-exports de UniClienteMultiPunto
│
├── ts/                              # Hooks TypeScript existentes
│   └── useContratoMultiClienteMultiPunto.ts  # Hook principal del formulario
│
├── css/                             # Estilos
│   └── ContratoMultiClienteMultiPuntoRefactored.module.css
│
├── CupsElectricSectionMultiClienteMultiPunto.tsx  # Modal CUPS eléctrico
├── CupsGasSectionMultiClienteMultiPunto.tsx       # Modal CUPS gas
├── MultiClienteMultiPunto.tsx       # Componente principal refactorizado ⭐
├── ContratoMultiClienteMultiPuntoRefactored.tsx   # Componente antiguo (deprecado)
└── index.ts                         # Export principal
```

## 🎯 Componentes Principales

### 1. MultiClienteMultiPunto.tsx (Principal)

**Archivo:** `MultiClienteMultiPunto.tsx`  
**Líneas:** ~330 líneas  
**Responsabilidad:** Orquestación principal y layout

**Características:**
- ✅ Integra todos los componentes y hooks
- ✅ Gestiona el flujo de datos entre componentes
- ✅ Controla los modales de edición
- ✅ Navegación entre tabs (eléctricos/gas)

### 2. RepresentanteLegalSection

**Archivo:** `components/RepresentanteLegalSection.tsx`  
**Responsabilidad:** Captura datos del representante legal

**Props:**
- `contactosOptions`: Array de contactos disponibles
- `selectedContacto`: Contacto seleccionado
- `documentoFiscal`, `razonSocial`, `fechaPropuesta`: Valores del form
- `errors`: Errores de validación
- Handlers para cambios y validación

### 3. TabNavigator

**Archivo:** `components/TabNavigator.tsx`  
**Responsabilidad:** Navegación entre tipos de CUPS

**Features:**
- Tab "CUPS Eléctricos" con icono Zap ⚡
- Tab "CUPS Gas" con icono Flame 🔥
- Badges con contadores de CUPS por tipo
- Estado activo visual

### 4. CupsElectricosTable

**Archivo:** `components/CupsElectricosTable.tsx`  
**Responsabilidad:** Tabla completa de CUPS eléctricos

**Columnas (en orden):**
1. **Cliente CIF/NIF** - Typeahead para selección + botón limpiar
2. **Nombre Cliente** - Solo lectura
3. **Comercializadora** - Select
4. **Producto** - Select (filtrado por comercializadora)
5. **Tipo Precio** - Select
6. **GDO** - Checkbox (Garantía de Origen Verde) ⭐ NUEVO
7. **Anexo** - Select (filtrado por producto)
8. **Permanencia** - Checkbox ⭐ NUEVO
9. **Fecha Inicio** - Input date
10. **Fecha Fin** - Input date
11. **CUPS** - Typeahead con icono + botón limpiar
12. **Cambio Titular** - Checkbox ⭐ NUEVO
13. **Cambio Potencia** - Checkbox ⭐ NUEVO
14. **Dirección** - Solo lectura
15. **Tarifa** - Solo lectura
16. **Consumo** - Solo lectura (kWh)
17. **Gasto Operativo** - Input text
18. **Tarifa Corporate** - Input readonly + botón búsqueda + modal precios
19. **Acciones** - Editar (modal) y Eliminar

**Funcionalidades:**
- ✅ Edición inline de todos los campos editables
- ✅ Selección de cliente por fila (múltiples clientes)
- ✅ CUPS disponibles filtrados por cliente seleccionado
- ✅ Anti-duplicados: no permite seleccionar CUPS ya usados
- ✅ Datos comunes: cambios se replican a todas las filas
- ✅ Modal de precios integrado
- ✅ Modal de edición completa
- ✅ Scroll horizontal y vertical

### 5. CupsGasTable

**Archivo:** `components/CupsGasTable.tsx`  
**Responsabilidad:** Tabla completa de CUPS gas

Misma estructura y funcionalidades que `CupsElectricosTable`, adaptada para CUPS de gas:
- Campo `cupsGas` en lugar de `cups_electrico`
- Campo `direccionGas` en lugar de `direccion`
- Campo `consumoGas` en lugar de `consumo_kw`
- Icono Flame 🔥 en lugar de Zap ⚡

### 6. DatosComunesToggle

**Archivo:** `components/DatosComunesToggle.tsx`  
**Responsabilidad:** Toggle para activar/desactivar modo "Datos Comunes"

**Comportamiento:**
- Cuando está **activo**: los cambios en comercializadora, producto, anexo, fechas y tipo precio se aplican a **todas las filas**
- Cuando está **inactivo**: los cambios solo afectan la fila editada
- Estilos visuales distintivos (naranja cuando activo)

## 🔧 Hooks Personalizados

### useRepresentanteSelection

**Archivo:** `hooks/useRepresentanteSelection.ts`  
**Responsabilidad:** Gestión del representante legal

**Estado:**
- `contactosOptions`: Array de contactos
- `selectedContacto`: Contacto seleccionado
- `isLoading`: Estado de carga

**Handlers:**
- `handleContactoDocumentoChange`: Selección por documento
- `handleContactoNombreChange`: Selección por nombre

### useClientesPorFila

**Archivo:** `hooks/useClientesPorFila.ts`  
**Responsabilidad:** Gestión de clientes individuales por cada fila de CUPS

**Estado:**
- `selectedClientesElectricoPorFila`: { [index]: Cliente[] }
- `selectedClientesGasPorFila`: { [index]: Cliente[] }

**Handlers:**
- `handleClienteElectricoChange`: Actualiza cliente en fila eléctrica
- `handleClienteGasChange`: Actualiza cliente en fila gas
- `handleClearClienteElectrico`: Limpia cliente y sus CUPS en fila eléctrica
- `handleClearClienteGas`: Limpia cliente y sus CUPS en fila gas

### useContratoMultiClienteMultiPunto

**Archivo:** `ts/useContratoMultiClienteMultiPunto.ts`  
**Responsabilidad:** Hook principal con toda la lógica del formulario

**Gestiona:**
- Estado del formulario (Inertia useForm)
- CRUD de filas de CUPS (agregar, editar, eliminar)
- Filtrado de CUPS por cliente
- Anti-duplicados entre eléctricos y gas
- Datos comunes
- Modales de edición
- Validación y guardado

### Hooks Reutilizados de UniClienteMultiPunto

Los siguientes hooks se reutilizan desde `UniClienteMultiPunto`:
- `useTabNavigation` - Navegación entre tabs
- `useCupsAntiDuplicados` - Lógica anti-duplicados
- `useModalPrecios` - Gestión modal de precios
- `useServicioIntegracion` - Integración con servicios externos

## 📊 Flujo de Datos

```
MultiClienteMultiPunto (Principal)
    ↓
    ├─→ useContratoMultiClienteMultiPunto (Estado y lógica principal)
    │       ↓
    │       └─→ Inertia useForm (Estado del formulario)
    │
    ├─→ useTabNavigation (Tabs eléctricos/gas)
    │
    ├─→ RepresentanteLegalSection
    │       └─→ useRepresentanteSelection (interno)
    │
    └─→ Tab activo
            ├─→ CupsElectricosTable (si tab = 'electrico')
            │       └─→ ModalPrecios (integrado)
            │
            └─→ CupsGasTable (si tab = 'gas')
                    └─→ ModalPrecios (integrado)
```

## 🔄 Diferencias con UniClienteMultiPunto

| Característica | UniClienteMultiPunto | MultiClienteMultiPunto |
|---------------|---------------------|------------------------|
| **Cliente** | Único para todo el contrato | Múltiples clientes, uno por fila CUPS |
| **Selección Cliente** | Al inicio (ClientDataSection) | Por cada fila en la tabla |
| **CUPS por Cliente** | Todos del mismo cliente | Cada CUPS puede ser de un cliente diferente |
| **Flujo** | 1. Cliente → 2. CUPS | 1. Representante → 2. Cliente + CUPS por fila |
| **Interfaces** | `FormData`, `CupsOption` | Mismo + campos de cliente por fila |

## 🆕 Nuevas Columnas Agregadas

Las siguientes columnas se han agregado a ambas tablas (eléctrico y gas):

1. **GDO** (Garantía de Origen Verde)
   - Tipo: Checkbox
   - Posición: Después de "Tipo Precio"
   - Indica si el suministro tiene garantía de origen verde

2. **Permanencia**
   - Tipo: Checkbox
   - Posición: Después de "Anexo"
   - Indica si hay permanencia en el contrato

3. **Cambio Titular**
   - Tipo: Checkbox
   - Posición: Después de "CUPS"
   - Indica si hay cambio de titular

4. **Cambio Potencia**
   - Tipo: Checkbox
   - Posición: Después de "Cambio Titular"
   - Indica si hay cambio de potencia

## 🎨 Orden de Columnas (Similar a UniClienteMultiPunto)

El orden de las columnas se ha reorganizado para seguir el mismo flujo lógico:

**Fase 1: Datos del Cliente**
- Cliente CIF/NIF
- Nombre Cliente

**Fase 2: Datos Contractuales**
- Comercializadora
- Producto
- Tipo Precio
- GDO ⭐
- Anexo
- Permanencia ⭐
- Fecha Inicio
- Fecha Fin

**Fase 3: Datos del CUPS**
- CUPS
- Cambio Titular ⭐
- Cambio Potencia ⭐
- Dirección
- Tarifa
- Consumo

**Fase 4: Datos Comerciales**
- Gasto Operativo
- Tarifa Corporate

**Fase 5: Acciones**
- Editar / Eliminar

## 🚀 Uso

### Importación

```typescript
import MultiClienteMultiPunto from './MultiClienteMultiPunto';
// o
import { MultiClienteMultiPunto } from './MultiClienteMultiPunto';
```

### Props

```typescript
interface MultiClienteMultiPuntoProps {
    comercializadoras: any[];
    productos: any[];
    anexos: any[];
    tipoprecio: any[];
    contactos: Contacto[];
    clientes: Cliente[];
    cupsElectricos: any[];
    cupsGas: any[];
    localidades: Localidad[];
}
```

### Ejemplo

```tsx
<MultiClienteMultiPunto
    comercializadoras={comercializadoras}
    productos={productos}
    anexos={anexos}
    tipoprecio={tipoprecio}
    contactos={contactos}
    clientes={clientes}
    cupsElectricos={cupsElectricos}
    cupsGas={cupsGas}
    localidades={localidades}
/>
```

## ✅ Funcionalidades Mantenidas

Todas las funcionalidades del componente original se mantienen:

- ✅ Agregar CUPS eléctricos y gas
- ✅ Editar CUPS inline en tabla
- ✅ Editar CUPS en modal completo
- ✅ Eliminar CUPS
- ✅ Selección de cliente por fila
- ✅ Filtrado de CUPS por cliente
- ✅ Anti-duplicados de CUPS
- ✅ Datos comunes (replicación de cambios)
- ✅ Integración con modal de precios
- ✅ Validación de formulario
- ✅ Guardado de contrato
- ✅ Gestión de errores
- ✅ Feedback visual (SweetAlert2)

## 📦 Interfaces

Las interfaces están centralizadas en:
```
../Interfaces/Interfaces.ts
```

Principales interfaces utilizadas:
- `FormDataElectrico` - Datos de CUPS eléctrico (incluye nuevos campos)
- `FormDataGas` - Datos de CUPS gas (incluye nuevos campos)
- `Cliente` - Datos de cliente
- `CupsOption` - Opción de CUPS para Typeahead
- `Localidad` - Datos de localidad
- `Contacto` - Datos de contacto/representante legal

## 🔧 Mantenimiento

### Para agregar una nueva columna:

1. Agregar el campo a la interfaz en `Interfaces/Interfaces.ts`
2. Actualizar `CupsElectricosTable.tsx` y/o `CupsGasTable.tsx`
3. Actualizar `useContratoMultiClienteMultiPunto.ts` si requiere lógica especial
4. Actualizar los modales si es necesario

### Para agregar un nuevo componente:

1. Crear el componente en `components/`
2. Exportarlo en `components/index.ts`
3. Importarlo y usarlo en `MultiClienteMultiPunto.tsx`

## 🐛 Debugging

Para debuggear el flujo de datos:
- Revisar `useContratoMultiClienteMultiPunto.ts` para la lógica principal
- Revisar las tablas para ver cómo se pasan las props
- Usar React DevTools para inspeccionar el estado

## 📝 Notas

- El componente antiguo `ContratoMultiClienteMultiPuntoRefactored.tsx` está deprecado
- No eliminar hasta confirmar que el nuevo funciona 100%
- El CSS module original se mantiene para compatibilidad
- Los modales de CUPS se mantienen sin cambios (funcionan correctamente)

## 🎯 Próximos Pasos

- [ ] Testing completo de todas las funcionalidades
- [ ] Optimización de renders con `useMemo`/`useCallback`
- [ ] Agregar tests unitarios
- [ ] Considerar extracción de lógica de tabla a hooks personalizados
- [ ] Documentar endpoints del backend

---

**Refactorizado:** 2025  
**Autor:** Sistema de Refactorización Automática  
**Versión:** 2.0