# Módulo ContratoMultiPunto - Arquitectura Refactorizada

## 📁 Estructura del Proyecto

```
UniClienteMultiPunto/
├── components/              # Componentes UI reutilizables
│   ├── ActionButtons.tsx    # Botones de acción del formulario
│   ├── ClientDataSection.tsx # Sección de datos del cliente
│   ├── CupsElectricosTable.tsx # Tabla de CUPS eléctricos
│   ├── CupsGasTable.tsx     # Tabla de CUPS gas
│   ├── CupsModals.tsx       # Modales para CUPS
│   ├── DatosComunesToggle.tsx # Toggle para datos comunes
│   ├── TabNavigator.tsx     # Navegación entre tabs
│   └── index.ts             # Barrel export
├── hooks/                   # Hooks personalizados (lógica de negocio)
│   ├── useClienteSelection.ts        # Manejo de selección de cliente
│   ├── useCupsAntiDuplicados.ts      # Lógica anti-duplicados de CUPS
│   ├── useCupsElectricosManagement.ts # Gestión de CUPS eléctricos
│   ├── useCupsGasManagement.ts       # Gestión de CUPS gas
│   ├── useModalPrecios.ts            # Manejo del modal de precios
│   ├── useServicioIntegracion.ts     # Lógica de servicio de integración
│   ├── useTabNavigation.ts           # Navegación entre tabs
│   └── index.ts                      # Barrel export
├── utils/                   # Utilidades y helpers
│   ├── cupsHelpers.ts       # Funciones auxiliares para CUPS
│   └── index.ts             # Barrel export
├── ContratoMultiPunto.tsx   # Componente principal refactorizado
├── ContratoMultiPuntoRefactored.module.css # Estilos
└── README.md                # Este archivo
```

## 🎯 Arquitectura

### Separación de Responsabilidades

1. **Componentes (components/)**: 
   - Componentes UI puros y reutilizables
   - Reciben props y renderizan interfaz
   - Sin lógica de negocio compleja

2. **Hooks (hooks/)**:
   - Encapsulan toda la lógica de negocio
   - Manejan estado y efectos secundarios
   - Reutilizables y testables

3. **Utilidades (utils/)**:
   - Funciones puras sin estado
   - Transformaciones y cálculos
   - Helpers compartidos

## 📋 Hooks Personalizados

### `useClienteSelection`
Maneja la selección y autocomplete de clientes.

**Retorna:**
- `clientesOptions`: Lista de clientes disponibles
- `selectedCliente`: Cliente actualmente seleccionado
- `isLoading`: Estado de carga
- `handleClienteDocumentoChange`: Handler para cambio por documento
- `handleClienteRazonSocialChange`: Handler para cambio por razón social

### `useTabNavigation`
Controla la navegación entre tabs de CUPS eléctricos y gas.

**Retorna:**
- `activeTab`: Tab actualmente activo
- `setActiveTab`: Setter para cambiar tab
- `handleTabChange`: Handler para cambio de tab

### `useCupsAntiDuplicados`
Previene duplicados de CUPS entre tablas eléctricos y gas.

**Retorna:**
- `cupsOptionsPorFila`: Opciones disponibles por fila (eléctricos)
- `cupsGasOptionsPorFila`: Opciones disponibles por fila (gas)
- `filteredCupsElectricos`: CUPS eléctricos filtrados
- `filteredCupsGas`: CUPS gas filtrados
- `actualizarOpcionesCupsPorFila`: Función para actualizar opciones

### `useCupsElectricosManagement`
Gestión completa de CUPS eléctricos (CRUD y handlers).

**Retorna:**
- `formDataElectrico`: Datos del formulario actual
- `isModalOpenElectrico`: Estado del modal
- `handleShowCupsElectricosModal`: Agregar nuevo CUPS
- `handleEditElectrico`: Editar CUPS existente
- `handleDeleteElectricoRow`: Eliminar fila
- `handleClearCupsElectrico`: Limpiar CUPS
- `handleCupsTableChange`: Handler para cambio de CUPS
- `handleProductoTableChange`: Handler para cambio de producto
- `handleAnexoTableChange`: Handler para cambio de anexo
- `handleElectricoFieldChange`: Handler genérico de campos

### `useCupsGasManagement`
Gestión completa de CUPS gas (CRUD y handlers).

**Estructura similar a `useCupsElectricosManagement`**

### `useModalPrecios`
Maneja el modal de ventanas de precios y búsqueda de tarifas.

**Retorna:**
- `showModalPrecios`: Estado del modal
- `modalRowIndex`: Índice de la fila actual
- `ventanaOptions`: Opciones de ventanas disponibles
- `buscarVentanasPrecios`: Función para buscar ventanas
- `handleOpenModalPrecios`: Abrir modal
- `handleCloseModalPrecios`: Cerrar modal

### `useServicioIntegracion`
Maneja la lógica del servicio de integración para tarifas.

**Retorna:**
- `servicio_Integracion`: Servicio actual
- `tipoCups`: Tipo de CUPS ('luz' o 'gas')
- Setters correspondientes

## 🧩 Componentes

### `ClientDataSection`
Sección para ingresar datos del cliente (documento, razón social, fecha).

### `ActionButtons`
Botones de acción principal (Guardar contrato).

### `TabNavigator`
Navegación visual entre tabs de CUPS eléctricos y gas con contadores.

### `DatosComunesToggle`
Toggle para activar/desactivar el modo "Datos Comunes" (propaga cambios a todas las filas).

### `CupsElectricosTable`
Tabla completa de CUPS eléctricos con:
- Selección de comercializadora, producto, anexo
- Tipo de precio, GDO, permanencia
- Fechas inicio/fin
- Autocomplete de CUPS con filtro anti-duplicados
- Cambio titular y potencia
- Dirección, tarifa, consumo
- Gasto operativo y tarifa corporate
- Acciones: Editar, Limpiar, Eliminar
- Búsqueda de ventanas de precios

### `CupsGasTable`
Tabla completa de CUPS gas con la misma estructura que eléctricos pero adaptada para gas.

## 🔄 Flujo de Datos

1. **Usuario selecciona cliente** → `useClienteSelection` actualiza estado
2. **Cliente seleccionado** → `useCupsAntiDuplicados` filtra CUPS disponibles
3. **Usuario agrega CUPS** → Hook correspondiente maneja la adición
4. **Cambios en tabla** → Handlers actualizan estado y revalidan opciones
5. **Guardar** → Formulario de Inertia envía data al backend

## 📝 Interfaces

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

- `FormDataElectrico`: Estructura de datos para CUPS eléctrico
- `FormDataGas`: Estructura de datos para CUPS gas
- `CupsOption`: Opciones de CUPS disponibles
- `Cliente`: Datos del cliente
- `Localidad`: Información de localidades
- `VentanaOption`: Opciones de ventanas de precios

## 🎨 Características Especiales

### Modo "Datos Comunes"
Cuando está activo, los cambios en:
- Comercializadora
- Producto
- Anexo
- Fechas (inicio/fin)
- Tipo de precio

Se propagan automáticamente a todas las filas del mismo tipo (eléctrico o gas).

### Anti-duplicados
El sistema previene que un mismo CUPS aparezca en:
- Múltiples filas de eléctricos
- Múltiples filas de gas
- Simultáneamente en eléctricos Y gas

### Búsqueda de Ventanas de Precios
Integración con Corporate Go para buscar tarifas automáticas basadas en:
- Servicio de integración
- Tipo de contrato
- Tarifa actual

## 🚀 Mejoras Implementadas

1. **Separación de responsabilidades**: Lógica separada de presentación
2. **Reutilización**: Hooks y componentes reutilizables
3. **Mantenibilidad**: Código más fácil de mantener y extender
4. **Testabilidad**: Hooks y utilidades son fácilmente testables
5. **TypeScript**: Tipado fuerte en toda la aplicación
6. **Organización**: Estructura clara y predecible

## 📦 Próximos Pasos (Opcional)

Para continuar mejorando el módulo:

1. Extraer las tablas inline a componentes separados
2. Agregar tests unitarios para hooks
3. Documentar props de componentes con JSDoc
4. Agregar validaciones en tiempo real
5. Implementar debounce en búsquedas

## 🔧 Mantenimiento

Al agregar nuevas funcionalidades:

1. **Nueva lógica de negocio** → Crear hook en `hooks/`
2. **Nuevo componente UI** → Crear en `components/`
3. **Nueva utilidad** → Agregar en `utils/`
4. **Nueva interfaz** → Agregar en `Contratos/Interfaces/Interfaces.ts`

Mantener siempre la separación de responsabilidades.