// CupsElectricSection.tsx
import {
    Card,
    Col, Form, Row, Button,
    InputGroup
} from "react-bootstrap";
import { forwardRef, useEffect, useState, useMemo, useRef } from "react"; // Agregado useMemo
import axios from "axios";
import { Typeahead } from "react-bootstrap-typeahead";
import { useForm } from "@inertiajs/react";
import { formatToYYYYMMDD } from '../../Utils';
import { Cliente, CupsElectricSectionProps, CupsOption, FormDataElectrico, Localidad, TarifaElectricaOption, VentanaOption } from "../Interfaces/Interfaces";
import { initialFormDataElectrico } from "../Interfaces/constants";

const CupsElectricSectionMultiClienteMultiPunto = forwardRef<HTMLFormElement, CupsElectricSectionProps>(
    ({ comercializadoras, productos, anexos, tipoprecio, datos, cupsData, clienteId, clientes, localidades, onChange }, ref) => {

    console.log("CupsElectricSectionMultiClienteMultiPunto renderizado con datos:", datos);
    const [localidadesOptions, setLocalidadesOptions] = useState<Localidad[]>([]);
    const [cupsOptions, setCupsOptions] = useState<CupsOption[]>([]);

    const { data: formDataElectrico, setData: setFormDataElectrico, reset: resetFormDataElectrico } = useForm<FormDataElectrico>(initialFormDataElectrico);
    const inputRef = useRef();

    const currentServicioIntegracion = useMemo(() => {
        const selectedCom = comercializadoras.find((com: any) =>
                com.CodCom == parseInt(formDataElectrico.comercializadora)
        );
        return selectedCom ? selectedCom.Servicio_Integracion : null;
    }, [formDataElectrico.comercializadora, comercializadoras]);

    const [productosFiltrados, setProductosFiltrados] = useState([]);
    const [anexosFiltrados, setAnexosFiltrados] = useState([]);
    const [tarifaOptions, setTarifaOptions] = useState<TarifaElectricaOption[]>([]);
    const [ventanaOptions, setVentanaOptions] = useState<VentanaOption[]>([]);
    const [formErrors, setFormErrors] = useState<{ [key: string]: string }>({});
    const [showErrors, setShowErrors] = useState(false);
    const [isLoading, setIsLoading] = useState(false)
    const [clientesOptions, setClientesOptions] = useState<Cliente[]>([]);
    const [busqueda, setBusqueda] = useState('');
    const [selectedCliente, setSelectedCliente] = useState<any>([]);

    const handleBuscarSipsCups = () => {
            axios.post(route('sips.consumo'), { cups: formDataElectrico.codigoCups, tipo: 'luz' })
                .then(res => {
                    const data = res.data.selectFinal[0];
                    console.log("Datos recibidos de SIPS:", data);
                    if (data) {
                        if (tarifaOptions.length > 0 ){
                            const tarifaSeleccionada = tarifaOptions.find(tarifa => tarifa.NomTarEle === data.Tarifa);
                            if (tarifaSeleccionada) {
                                setFormDataElectrico(prev => ({
                                    ...prev,
                                    tarifa: tarifaSeleccionada.CodTarEle,
                                    nombreTarifa: tarifaSeleccionada.NomTarEle,
                                }));
                            }
                        }
                        setFormDataElectrico(prev => ({
                            ...prev,
                            potencia1: data.CPotP1M1,
                            potencia2: data.CPotP2M1,
                            potencia3: data.CPotP3M1,
                            potencia4: data.CPotP4M1,
                            potencia5: data.CPotP5M1,
                            potencia6: data.CPotP6M1,
                        }));
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        };


    const handleCupsDataChange = (cups: CupsOption | null) => {
        // Si recibe un objeto CUPS, rellena el formulario
        if (cups) {
                setFormDataElectrico(prev => ({
                ...prev,
                cupsId: cups.cupsId,
                codigoCups: cups.codigoCups.substring(0,20),
                direccion: cups.direccion,
                tarifa: cups.tarifa,
                consumo_kw: cups.ConAnuCup || '0',
                potencia1: cups.PotConP1 || '0',
                potencia2: cups.PotConP2 || '0',
                potencia3: cups.PotConP3 || '0',
                potencia4: cups.PotConP4 || '0',
                potencia5: cups.PotConP5 || '0',
                potencia6: cups.PotConP6 || '0',
                EscPunSum: cups.EscPunSum || '',
                PlaPunSum: cups.PlaPunSum || '',
                PuePunSum: cups.PuePunSum || '',
                codigo_postal: cups.CPLocSoc || '',
                corpoGo: cups.corpoGo || '',
                Id_Tarifa_Automatica: cups.Id_Tarifa_Automatica || '',
            }));
            // Ejecutar buscarVentanasPrecios si nombreTarifa y Servicio_Integracion están disponibles

            if (cups.nombreTarifa && currentServicioIntegracion) {
                buscarVentanasPrecios(currentServicioIntegracion);
            }
            //handleBuscarLocalidades(cups.CPLocSoc);
            const localidad = localidadesOptions.find(loc => loc.CPLoc === cups.CPLocSoc);
            if (localidad) {
                setFormDataElectrico(prev => ({
                    ...prev,
                    codigo_postal: localidad.CPLoc,
                    localidad: localidad.DesLoc,
                    provincia: localidad.provincia.DesPro
                }));
            }
        } else {
            // Si recibe null, limpia los campos relacionados
            setFormDataElectrico(prev => ({
                ...prev,
                cupsId: '',
                cups_electrico: '',
                direccion: '',
                tarifa: '',
                consumo_kw: '',
                potencia1: '',
                potencia2: '',
                potencia3: '',
                potencia4: '',
                potencia5: '',
                potencia6: '',
                EscPunSum: '',
                PlaPunSum: '',
                PuePunSum: '',
                codigo_postal: '',
                corpoGo:'',
                Id_Tarifa_Automatica:'',
            }));
            // Opcional: Limpiar las opciones del desplegable si es necesario
            //setCupsOptions([]);
        }
    };

    // useEffect para filtrar productos de electricidad
    useEffect(() => {
        console.log("Filtrando productos con comercializadora:");
        if (formDataElectrico.comercializadora) {
            setProductosFiltrados(
                productos.filter((producto: any) => producto.CodCom == formDataElectrico.comercializadora)
            );
        } else {
            setProductosFiltrados([]);
            // Limpia campos relacionados si no hay comercializadora, solo si no están ya vacíos
            const shouldUpdateFormData =
                formDataElectrico.producto !== '' ||
                formDataElectrico.productoNombre !== '' ||
                formDataElectrico.CodigoServicio !== '' ||
                formDataElectrico.anexo !== '' ||
                formDataElectrico.anexoNombre !== '';

            if (shouldUpdateFormData) {
                setFormDataElectrico(prev => ({
                    ...prev,
                    producto: '',
                    productoNombre: '',
                    codigoServicioProducto: '',
                    anexo: '',
                    anexoNombre: ''
                }));
            }
        }
    }, [formDataElectrico.comercializadora, productos]);

    useEffect(() => {
        //filtrar cupsOptions por clienteId
        if (selectedCliente && cupsData) {
            const filteredCups = cupsData.filter(cup => cup.CodCli === selectedCliente[0]?.CodCli);
            setCupsOptions(filteredCups);
        } else {
            setCupsOptions(cupsData || []);
        }
    }, [selectedCliente[0]?.CodCli]);
    // useEffect para filtrar anexos de electricidad
    useEffect(() => {
        console.log("Filtrando anexos de electricidad");
        if (formDataElectrico.producto) {
            setAnexosFiltrados(
                anexos.filter((anexo: any) => anexo.CodPro == formDataElectrico.producto)
            );
        } else {
            setAnexosFiltrados([]);
            // Limpia campos relacionados si no hay producto, solo si no están ya vacíos
            const shouldUpdateAnexo = formDataElectrico.anexo !== '' || formDataElectrico.anexoNombre !== '';
            if (shouldUpdateAnexo) {
                setFormDataElectrico(prev => ({
                    ...prev,
                    anexo: '',
                    anexoNombre: ''
                }));
            }
        }
    }, [formDataElectrico.producto, anexos]);


    const handleComercializadoraChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
        const nuevaComercializadora = event.target.value;
        const selectedText = event.target.options[event.target.selectedIndex].text;

        setFormDataElectrico(prev => ({
            ...prev,
            comercializadora: nuevaComercializadora,
            comercializadoraNombre: selectedText,
            producto: '',
            productoNombre: '',
            codigoServicioProducto: '',
            anexo: '',
            anexoNombre: ''
        }));
        setFormErrors(prev => ({
            ...prev,
            comercializadora: '', // Limpia el error de comercializadora
        }));
    };

    const handleProductoChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
        const nuevoProducto = event.target.value;

        const seleccionado: any = productosFiltrados.find((registro: any) =>
            registro.CodPro == nuevoProducto
        );

        if (seleccionado) {
            setFormDataElectrico(prev => ({
                ...prev,
                producto: nuevoProducto,
                codigoServicioProducto: seleccionado.CodigoServicio,
                productoNombre: seleccionado.DesPro,
                anexo: '',
                anexoNombre: ''
            }));
        } else {
            setFormDataElectrico(prev => ({
                ...prev,
                producto: '',
                codigoServicioProducto: '',
                productoNombre: '',
                anexo: '',
                anexoNombre: ''
            }));
        }
        setFormErrors(prev => ({
            ...prev,
            producto: '', // Limpia el error de producto
        }));
    };

    const buscarTarifas = () => {
        axios.get(route('tarifa.electrica.buscar'))
            .then(res => {
                setTarifaOptions(res.data.data);
            })
            .catch((e) => console.error(e));
    };

    //inicitalizar
    useEffect(()=>{
        setClientesOptions(clientes || []);
        setFormDataElectrico(datos);
    },[])

    useEffect(() => {

        buscarTarifas();
        setLocalidadesOptions(localidades || []);
        setCupsOptions(cupsData || []);

        setFormDataElectrico({
            ...datos,
            comercializadora: datos.comercializadora || '',
            comercializadoraNombre: datos.comercializadoraNombre || '',
            producto: datos.producto || '',
            productoNombre: datos.productoNombre || '',
            CodigoServicio: datos.CodigoServicio || '',
            anexo: datos.anexo || '',
            anexoNombre: datos.anexoNombre || '',
            tipoprecio: datos.tipoprecio || '',
            cupsId: datos.cupsId || '',
            codigoCups: datos.codigoCups || '',
            direccion: datos.direccion || '',
            EscPunSum: datos.EscPunSum || '',
            PlaPunSum: datos.PlaPunSum || '',
            PuePunSum: datos.PuePunSum || '',
            localidad: datos.localidad || '',
            provincia: datos.provincia || '',
            codigo_postal: datos.codigo_postal || '',
            tarifa: datos.tarifa || '',
            nombreTarifa: datos.nombreTarifa || '',
            Id_Tarifa_Automatica: datos.Id_Tarifa_Automatica || '',
            corpoGo: datos.corpoGo || '',
            consumo_kw: datos.consumo_kw || '',
            potencia1: datos.potencia1 || '',
            potencia2: datos.potencia2 || '',
            potencia3: datos.potencia3 || '',
            potencia4: datos.potencia4 || '',
            potencia5: datos.potencia5 || '',
            potencia6: datos.potencia6 || '',
            comentarios: datos.comentarios || '',
            fechaInicio: datos.fechaInicio || '',
            fechaFin: datos.fechaFin || '',
        });

        // Si hay datos de cliente existentes, configurar el selectedCliente
        if (datos.documento_fiscal && datos.razon_social) {
            // Crear un objeto cliente simulado para el Typeahead
            const clienteSimulado = {
                NumCifCli: datos.documento_fiscal,
                RazSocCli: datos.razon_social
            };
            setSelectedCliente([clienteSimulado]);
        }
    }, [datos]);

    const saveElectricoForm = () => {
        setShowErrors(true);
        const currentErrors: { [key: string]: string } = {};
        let hasValidationErrors = false;

        // Define los campos obligatorios para la validación
        const requiredFields: Array<keyof FormDataElectrico> = [
            'razon_social',
            'documento_fiscal',
            'codigoCups',
            'direccion',
            'localidad',
            'provincia',
            'codigo_postal',
            'tarifa',
            'nombreTarifa',
            'cupsId',
            'consumo_kw',
            'comercializadora',
            'producto',
            'anexo',
            'fechaInicio',
            'fechaFin',
            'tipoprecio',
            'potencia1',
            'potencia2',
            /*'potencia3',
            'potencia4',
            'potencia5',
            'potencia6'*/
            'EscPunSum',
            'PlaPunSum',
            'PuePunSum',
        ];

        requiredFields.forEach(key => {
            const value = formDataElectrico[key];
            if (typeof value === 'string') {
                if (value.trim() === '' || (key === 'tipoprecio' && value === null)) {
                    currentErrors[key] = `El campo es obligatorio.`;
                    hasValidationErrors = true;
                }
            } else if (value === null || value === undefined) {
                currentErrors[key] = `El campo es obligatorio.`;
                hasValidationErrors = true;
            }
        });

        // Validación específica para Id_Tarifa_Automatica si ventanaOptions no está vacío
        if (ventanaOptions.length > 0 && formDataElectrico.Id_Tarifa_Automatica.trim() === '') {
            currentErrors['Id_Tarifa_Automatica'] = 'Debe seleccionar una ventana de precios.';
            hasValidationErrors = true;
        }


        setFormErrors(currentErrors);
        if (hasValidationErrors) {
            return;
        }
        setShowErrors(false);

        // Si llegamos aquí, el formulario es válido y se puede proceder.
        onChange(formDataElectrico);
    };

    const buscarVentanasPrecios = (Servicio_Integracion: string) => {
        if (!Servicio_Integracion || formDataElectrico.nombreTarifa === '') {
            console.warn("buscarVentanasPrecios llamado sin Servicio_Integracion o nombreTarifa en eléctrico");
            return;
        }

        axios.post(route('tarifas.integracion'),
            {
                gama: formDataElectrico.CodigoServicio,
                tipo_contrato: formDataElectrico.tipoprecio,
                tipo_tarifas: "luz",
                tarifa_luz: formDataElectrico.tarifa, // Asegúrate que sea 'tarifa'
                tarifa_MIB: "1",
                tipo_contrato_luz: "1",
                servicio: Servicio_Integracion
            })
            .then(res => {
                setVentanaOptions(res.data.data);
                if (res.data.data.length === 1) {
                    if (formDataElectrico.Id_Tarifa_Automatica !== res.data.data[0].TarifaCUPS) {
                        setFormDataElectrico('Id_Tarifa_Automatica', res.data.data[0].TarifaCUPS);
                    }
                } else if (formDataElectrico.Id_Tarifa_Automatica !== '') {
                    setFormDataElectrico(prev => ({ ...prev, Id_Tarifa_Automatica: '' }));
                }
            }).catch((e) => {
                console.error("Error al buscar ventanas de precios (eléctrico):", e);
                setVentanaOptions([]);
                if (formDataElectrico.Id_Tarifa_Automatica !== '') {
                    setFormDataElectrico(prev => ({ ...prev, Id_Tarifa_Automatica: '' }));
                }
            });
    };

    // useEffect para buscar ventanas de precios (eléctrico)
    useEffect(() => {
        const isReadyForSearch = currentServicioIntegracion &&
                                formDataElectrico.nombreTarifa && formDataElectrico.nombreTarifa !== '' &&
                                formDataElectrico.CodigoServicio && formDataElectrico.CodigoServicio !== '' &&
                                formDataElectrico.tipoprecio && formDataElectrico.tipoprecio !== '' &&
                                formDataElectrico.tipoprecio !== '0';

        if (isReadyForSearch) {
            buscarVentanasPrecios(currentServicioIntegracion);
        } else {
            setVentanaOptions([]);
            if (formDataElectrico.Id_Tarifa_Automatica !== '') {
                setFormDataElectrico(prev => ({ ...prev, Id_Tarifa_Automatica: '' }));
            }
        }
    }, [formDataElectrico.nombreTarifa, formDataElectrico.CodigoServicio, formDataElectrico.tipoprecio, currentServicioIntegracion]);


    // Función para obtener la selección de Typeahead basada en formDataElectrico
    const getSelectedTypeaheadValue = (options: any[], value: string, labelKey: string) => {
        if (value && options.length > 0) {
            const found = options.find(opt => opt[labelKey] === value);
            return found ? [found] : [];
        }
        return [];
    };


        return (
            <Card className="border-0 shadow-sm">
                <Card.Header className="py-3">
                    <h5 className="mb-0 fw-semibold">
                        <i className="bx bx-bolt me-2"></i>
                        Información del Contrato Eléctrico - Multi Cliente Multi Punto
                    </h5>
                </Card.Header>
                <Card.Body className="p-4">

                    {/* Sección: Información del Cliente */}
                    <div className="mb-4">
                        <h6 className="text-muted mb-3 fw-semibold border-bottom pb-2">
                            <i className="bx bx-user me-2"></i>
                            Datos del Cliente
                        </h6>
                        <Row className="g-3">
                            <Col lg={3} md={6} sm={12}>
                                <Form.Label htmlFor="documento_fiscal" className="form-label fw-medium">
                                    Nº Documento Fiscal Cliente
                                </Form.Label>
                                <Typeahead
                                    id="documento_fiscal"
                                    labelKey="NumCifCli"
                                    selected={selectedCliente}
                                    onChange={(selected: any[]) => {
                                        const cliente = selected.length > 0 ? (selected[0] as Cliente) : null;
                                        if (cliente) {
                                            //uso esto porque por estandar y comun en todos los componentes
                                            // se usa clienteId para identificar al cliente
                                            clienteId = cliente.CodCli;
                                            setFormDataElectrico({
                                                ...formDataElectrico,
                                                documento_fiscal: cliente.NumCifCli,
                                                razon_social: cliente.RazSocCli});
                                            setSelectedCliente([cliente]); // esto es importante
                                            setFormErrors(prev => ({
                                                ...prev,
                                                documento_fiscal: '', // limpio el error si se selecciona un cliente
                                                razon_social: '' // limpio el error si se selecciona un cliente
                                            }));
                                        }else{
                                            setSelectedCliente([]);
                                        }
                                    }}
                                    options={clientesOptions}
                                    placeholder="Buscar por CIF/NIF..."
                                    isLoading={isLoading}
                                    minLength={1}
                                    isInvalid={showErrors && !!formErrors.documento_fiscal}
                                    style={{ width: '100%' }}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.documento_fiscal}
                                </Form.Control.Feedback>
                            </Col>

                            <Col lg={9} md={6} sm={12}>
                                <Form.Label htmlFor="razon_social" className="form-label fw-medium">
                                    Razón Social Cliente / Nombre Cliente
                                </Form.Label>
                                <Typeahead disabled
                                    id="razon_social"
                                    labelKey="RazSocCli"
                                    selected={selectedCliente}
                                    onChange={(selected: any[]) => {
                                        console.log(selected);
                                        if (selected.length > 0) {
                                            const cliente = selected[0];
                                            setFormDataElectrico({
                                                ...formDataElectrico,
                                                documento_fiscal: cliente.NumCifCli,
                                                razon_social: cliente.RazSocCli});
                                            setSelectedCliente([selected]); // esto es importante
                                            setFormErrors(prev => ({
                                                ...prev,
                                                documento_fiscal: '', // limpio el error si se selecciona un cliente
                                                razon_social: '' // limpio el error si se selecciona un cliente
                                            }));
                                        }else {
                                            setSelectedCliente([]); // esto es importante
                                        }
                                    }}
                                    options={clientesOptions}
                                    placeholder="Buscar por Razón Social.."
                                    isLoading={isLoading}
                                    minLength={3}
                                    isInvalid={showErrors && !!formErrors.razon_social}
                                    style={{ width: '100%' }}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.razon_social}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>
                    </div>

                    {/* Sección: Información Comercial */}
                    <div className="mb-4">
                        <h6 className="text-muted mb-3 fw-semibold border-bottom pb-2">
                            <i className="bx bx-building me-2"></i>
                            Datos Comerciales
                        </h6>
                        <Row className="g-3">
                            {/* Comercializadora */}
                            <Col lg={4} md={6} sm={12}>
                                <Form.Label htmlFor="comercializadoraElec" className="form-label fw-medium">
                                    Comercializadora
                                </Form.Label>
                                <InputGroup hasValidation>
                                    <Form.Select
                                        id="comercializadoraElec"
                                        name="comercializadora"
                                        className="form-select"
                                        value={formDataElectrico.comercializadora || ''}
                                        onChange={handleComercializadoraChange}
                                        isInvalid={showErrors && !!formErrors.comercializadora}
                                    >
                                        <option value="">Seleccione una comercializadora</option>
                                        {
                                            comercializadoras.map((registro: any) => (
                                                <option key={registro.CodCom} value={registro.CodCom}>
                                                    {registro.NomComCom}
                                                </option>
                                            ))
                                        }
                                    </Form.Select>
                                    <Form.Control.Feedback type="invalid">
                                        {formErrors.comercializadora}
                                    </Form.Control.Feedback>
                                </InputGroup>
                            </Col>

                            {/* Producto */}
                            <Col lg={3} md={6} sm={12}>
                                <Form.Label htmlFor="productoElec" className="form-label fw-medium">
                                    Producto
                                </Form.Label>
                                <InputGroup hasValidation>
                                    <Form.Select
                                        id="productoElec"
                                        name="producto"
                                        className="form-select"
                                        value={formDataElectrico.producto || ''}
                                        onChange={handleProductoChange}
                                        isInvalid={showErrors && !!formErrors.producto}
                                    >
                                        <option value="">Seleccione un producto</option>
                                        {
                                            productosFiltrados
                                                .map((registro: any) => (
                                                    <option key={registro.CodPro} value={registro.CodPro}>
                                                        {registro.DesPro}
                                                    </option>
                                                ))
                                        }
                                    </Form.Select>
                                    <Form.Control.Feedback type="invalid">
                                        {formErrors.producto}
                                    </Form.Control.Feedback>
                                </InputGroup>
                            </Col>

                            {/* Anexo */}
                            <Col lg={3} md={6} sm={12}>
                                <Form.Label htmlFor="anexoElec" className="form-label fw-medium">
                                    Anexo
                                </Form.Label>
                                <Form.Select
                                    id="anexoElec"
                                    name="anexo"
                                    className="form-select"
                                    value={formDataElectrico.anexo || ''}
                                    onChange={(e) => {
                                        const selectedValue = e.target.value;
                                        const selectedIndex = e.target.selectedIndex;
                                        const selectedText = selectedIndex !== -1 ? e.target.options[selectedIndex].text : '';
                                        setFormDataElectrico(prev => ({
                                            ...prev,
                                            anexo: selectedValue,
                                            anexoNombre: selectedText,
                                        }));
                                        setFormErrors(prev => ({
                                            ...prev,
                                            anexo: '', // Limpia el error de anexo
                                        }));
                                    }}
                                    isInvalid={showErrors && !!formErrors.anexo}
                                >
                                    <option value="">Seleccione un anexo</option>
                                    {
                                        anexosFiltrados.map((registro: any) => (
                                            <option key={registro.CodAnePro} value={registro.CodAnePro}>
                                                {registro.DesAnePro}
                                            </option>
                                        ))
                                    }
                                </Form.Select>
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.anexo}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Tipo Precio */}
                            <Col lg={2} md={6} sm={12}>
                                <Form.Label htmlFor="tipoPrecioElec" className="form-label fw-medium">
                                    Tipo Precio
                                </Form.Label>
                                <Form.Select
                                    id="tipoPrecioElec"
                                    name="tipoprecio"
                                    className="form-select"
                                    onChange={(e) =>{
                                        setFormDataElectrico("tipoprecio", e.target.value);
                                        setFormErrors(prev => ({
                                            ...prev,
                                            tipoprecio: '', // Limpia el error de tipoprecio
                                        }));
                                    }}
                                    value={formDataElectrico.tipoprecio || ''}
                                    isInvalid={showErrors && !!formErrors.tipoprecio}
                                >
                                    <option value="">Seleccione tipo precio</option>
                                    {
                                        tipoprecio
                                            .map((registro: any) => (
                                                <option key={registro.id} value={registro.id}>
                                                    {registro.descripcion}
                                                </option>
                                            ))
                                    }
                                </Form.Select>
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.tipoprecio}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>
                    </div>

                    {/* Sección: Información Técnica */}
                    <div className="mb-4">
                        <h6 className="text-muted mb-3 fw-semibold border-bottom pb-2">
                            <i className="bx bx-cog me-2"></i>
                            Datos Técnicos
                        </h6>
                        <Row className="g-3">
                            {/* Cups Eléctrico + botón */}
                            <Col lg={6} md={6} sm={12}>
                                <Form.Label htmlFor={!formDataElectrico.codigoCups ? "cupsElectricoTypeahead" : "cupsElectricoInput"} className="form-label fw-medium">
                                    Cups Eléctrico
                                </Form.Label>
                                { /* Typeahead para buscar CUPS Eléctrico */}
                                {!formDataElectrico.codigoCups && (
                                <InputGroup hasValidation className="w-100">
                                    <div className="flex-grow-1" style={{ width: '90%' }}>
                                        <Typeahead
                                            id="cupsElectricoTypeahead"
                                            labelKey="codigoCups"
                                            options={cupsOptions}
                                            selected={getSelectedTypeaheadValue(cupsOptions, formDataElectrico.codigoCups, 'codigoCups')}

                                            onChange={(selected) => {

                                                const cupsSeleccionado = selected.length > 0 ?
                                                    (selected[0] as CupsOption) : null;

                                                handleCupsDataChange(cupsSeleccionado);

                                                if (selected.length === 0) {
                                                    //setCupsOptions([]);
                                                    setFormDataElectrico('codigoCups', '');
                                                }
                                            }}
                                            placeholder="Buscar CUPS.."
                                            isLoading={false}
                                            minLength={0}
                                            isInvalid={showErrors && !!formErrors.codigoCups}
                                            style={{ width: '100%' }}
                                        />
                                    </div>
                                    <Button
                                        variant="outline-secondary"
                                        id="buscarCupsBtnElecMulti"
                                        onClick={handleBuscarSipsCups}
                                        className="border-start-0"
                                        style={{ width: '5%', minWidth: '40px' }}
                                    >
                                        <i className="bx bx-search"></i>
                                    </Button>
                                    <Form.Control.Feedback type="invalid">
                                        {formErrors.cups_electrico}
                                    </Form.Control.Feedback>
                                </InputGroup>
                                )}
                                {formDataElectrico.codigoCups && (
                                    <InputGroup hasValidation className="w-100">
                                        <div className="flex-grow-1" style={{ width: '90%' }}>
                                            <Form.Control
                                                type="text"
                                                id="cupsElectricoInput"
                                                name="codigoCups"
                                                value={formDataElectrico.codigoCups}
                                                onChange={(e) => setFormDataElectrico('codigoCups', e.target.value)}
                                                placeholder="CUPS Eléctrico"
                                                isInvalid={showErrors && !!formErrors.codigoCups}
                                                style={{ width: '100%' }}
                                            />
                                        </div>
                                        <Button
                                            variant="outline-secondary"
                                            id="buscarCupsBtnElecMulti"
                                            onClick={handleBuscarSipsCups}
                                            className="border-start-0"
                                            style={{ width: '5%', minWidth: '40px' }}
                                        >
                                            <i className="bx bx-search"></i>
                                        </Button>
                                        <Form.Control.Feedback type="invalid">
                                            {formErrors.codigoCups}
                                        </Form.Control.Feedback>
                                    </InputGroup>
                                )}
                            </Col>

                            {/* Tarifa */}
                            <Col lg={2} md={6} sm={12}>
                                <Form.Label htmlFor="tarifaElec" className="form-label fw-medium">
                                    Tarifa
                                </Form.Label>
                                <Form.Select
                                    id="tarifaElec"
                                    name="tarifa"
                                    value={formDataElectrico.tarifa}
                                    onChange={(e) => {
                                        const selectedValue = e.target.value;
                                        const selectedIndex = e.target.selectedIndex;
                                        const selectedText = selectedIndex !== -1 ? e.target.options[selectedIndex].text : '';

                                        setFormDataElectrico((prevData) => ({
                                            ...prevData,
                                            tarifa: selectedValue,
                                            nombreTarifa: selectedText,
                                            Id_Tarifa_Automatica: ''
                                        }));
                                    }}
                                    isInvalid={showErrors && !!formErrors.tarifa}
                                >
                                    <option value="">Seleccione una tarifa</option>
                                    {
                                        tarifaOptions.map((registro: TarifaElectricaOption) => (
                                            <option key={registro.CodTarEle} value={registro.CodTarEle}>
                                                {registro.NomTarEle}
                                            </option>
                                        ))
                                    }
                                </Form.Select>
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.tarifa}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Consumo */}
                            <Col lg={2} md={6} sm={12}>
                                <Form.Label htmlFor="consumoElec" className="form-label fw-medium">
                                    Consumo (kWh)
                                </Form.Label>
                                <Form.Control
                                    type="number"
                                    step="0.01"
                                    id="consumoElec"
                                    name="consumo_kw"
                                    value={formDataElectrico.consumo_kw}
                                    onChange={(e) => setFormDataElectrico('consumo_kw', e.target.value)}
                                    placeholder="0.00"
                                    isInvalid={showErrors && !!formErrors.consumo_kw}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.consumo_kw}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>

                        <Row className="g-3 mt-2">
                            {/* Ventana */}
                            <Col lg={12} md={6} sm={12} hidden={ventanaOptions.length === 0}>
                                <Form.Label htmlFor="ventanaElec" className="form-label fw-medium">
                                    Ventana
                                </Form.Label>
                                <Form.Select
                                    id="ventanaElec"
                                    name="Id_Tarifa_Automatica"
                                    onChange={(e) =>{
                                        const selected = e.target.value;
                                        const selectedOption = ventanaOptions.find(option => option.TarifaCUPS === selected);
                                        const fechaInicio = selectedOption ? selectedOption.FechaInicioPoliza : '';
                                        const fechaFin = selectedOption ? selectedOption.FechaFinalPoliza : '';

                                        setFormDataElectrico( prev => ({
                                            ...prev ,
                                            "Id_Tarifa_Automatica" : e.target.value,
                                            "fechaInicio": formatToYYYYMMDD(fechaInicio) || '',
                                            "fechaFin": formatToYYYYMMDD(fechaFin) || ''})
                                    )}}
                                    value={formDataElectrico.Id_Tarifa_Automatica}
                                    isInvalid={showErrors && !!formErrors.Id_Tarifa_Automatica}
                                >
                                    <option value="">Seleccione una ventana</option>
                                    {
                                        ventanaOptions.map((registro: VentanaOption) => (
                                            <option key={registro.TarifaCUPS} value={registro.TarifaCUPS}>
                                                {'Código: ' + registro.TarifaCUPS + ' ' + registro.FechaInicioPoliza + ' ' + registro.FechaFinalPoliza}
                                            </option>
                                        ))
                                    }
                                </Form.Select>
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.Id_Tarifa_Automatica}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>

                        {/* Sección: Potencias */}
                        <div className="mt-4">
                            <h6 className="text-muted mb-3 fw-semibold">
                                <i className="bx bx-zap me-2"></i>
                                Potencias Contratadas
                            </h6>
                            <Row className="g-3">
                                {/* Mapeamos un array del 1 al 6 para generar los campos de potencia */}
                                {[1, 2, 3, 4, 5, 6].map((i) => (
                                    <Col lg={2} md={4} sm={6} xs={6} key={`potencia-col-${i}`}>
                                        <Form.Group>
                                            <Form.Label htmlFor={`potencia${i}`} className="form-label fw-medium">
                                                P{i}
                                                {/* Puedes hacer la Potencia 1 requerida visiblemente */}
                                                {i === 1 && <span className="text-danger ms-1">*</span>}
                                            </Form.Label>
                                            <Form.Control
                                                type="number" // Usa type="number" para permitir solo números
                                                step="0.01" // Permite decimales si las potencias lo requieren
                                                id={`potencia${i}`}
                                                name={`potencia${i}`} // Importante para la validación del backend
                                                // Evitamos que un valor booleano llegue al value (el control espera string|number|string[]|undefined)
                                                value={
                                                    typeof formDataElectrico[`potencia${i}` as keyof FormDataElectrico] === 'boolean'
                                                        ? ''
                                                        : ((formDataElectrico[`potencia${i}` as keyof FormDataElectrico] as string | number | undefined) ?? '')
                                                }
                                                onChange={(e) => setFormDataElectrico(`potencia${i}` as keyof FormDataElectrico, e.target.value)}
                                                // Aplicamos la validación usando el estado de errores
                                                isInvalid={showErrors && !!formErrors[`potencia${i}` as keyof FormDataElectrico]}
                                                placeholder={`P${i}`}
                                                className="text-center"
                                            />
                                            <Form.Control.Feedback type="invalid">
                                                {/* Mostramos el mensaje de error específico para este campo */}
                                                {formErrors[`potencia${i}` as keyof FormDataElectrico]}
                                            </Form.Control.Feedback>
                                        </Form.Group>
                                    </Col>
                                ))}
                            </Row>
                        </div>

                        {/* Sección: Fechas */}
                        <Row className="g-3 mt-3">
                            {/* Fecha De Inicio */}
                            <Col lg={3} md={6} sm={12}>
                                <Form.Label htmlFor="fechaInicio" className="form-label fw-medium">
                                    Fecha Inicio
                                </Form.Label>
                                <Form.Control
                                    type="date" disabled={ventanaOptions.length != 0}
                                    id="fechaInicio"
                                    name="fechaInicio"
                                    value={formDataElectrico.fechaInicio}
                                    onChange={(e) => setFormDataElectrico('fechaInicio', e.target.value)}
                                    placeholder="Fecha Inicio"
                                    isInvalid={showErrors && !!formErrors.fechaInicio}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.fechaInicio}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Fecha De Fin */}
                            <Col lg={3} md={6} sm={12}>
                                <Form.Label htmlFor="fechaFinal" className="form-label fw-medium">
                                    Fecha Final
                                </Form.Label>
                                <Form.Control
                                    type="date" disabled={ventanaOptions.length != 0}
                                    id="fechaFinal"
                                    name="fechaFin"
                                    value={formDataElectrico.fechaFin}
                                    onChange={(e) => setFormDataElectrico('fechaFin', e.target.value)}
                                    placeholder="Fecha Final"
                                    isInvalid={showErrors && !!formErrors.fechaFin}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.fechaFin}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>
                    </div>

                    {/* Sección: Información de Dirección */}
                    <div className="mb-4">
                        <h6 className="text-muted mb-3 fw-semibold border-bottom pb-2">
                            <i className="bx bx-map me-2"></i>
                            Información de Dirección
                        </h6>
                        <Row className="g-3">
                            {/* Dirección */}
                            <Col lg={6} md={12} sm={12}>
                                <Form.Label htmlFor="direccionElec" className="form-label fw-medium">
                                    Dirección
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    id="direccionElec"
                                    name="direccion"
                                    value={formDataElectrico.direccion}
                                    onChange={(e) => setFormDataElectrico('direccion', e.target.value)}
                                    placeholder="Dirección completa"
                                    isInvalid={showErrors && !!formErrors.direccion}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.direccion}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Escalera */}
                            <Col lg={2} md={4} sm={6} xs={6}>
                                <Form.Label htmlFor="escaleraElec" className="form-label fw-medium">
                                    Escalera
                                </Form.Label>
                                <Form.Control
                                    type="text" maxLength={5}
                                    id="escaleraElec"
                                    name="EscPunSum"
                                    value={formDataElectrico.EscPunSum}
                                    onChange={(e) => setFormDataElectrico('EscPunSum', e.target.value)}
                                    placeholder="Ej. B"
                                    isInvalid={showErrors && !!formErrors.EscPunSum}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.EscPunSum}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Planta */}
                            <Col lg={2} md={4} sm={6} xs={6}>
                                <Form.Label htmlFor="plantaElec" className="form-label fw-medium">
                                    Planta
                                </Form.Label>
                                <Form.Control
                                    type="text" maxLength={5}
                                    id="plantaElec"
                                    name="PlaPunSum"
                                    value={formDataElectrico.PlaPunSum}
                                    onChange={(e) => setFormDataElectrico('PlaPunSum', e.target.value)}
                                    placeholder="Ej. 2A"
                                    isInvalid={showErrors && !!formErrors.PlaPunSum}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.PlaPunSum}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Puerta */}
                            <Col lg={2} md={4} sm={6} xs={6}>
                                <Form.Label htmlFor="puertaElec" className="form-label fw-medium">
                                    Puerta
                                </Form.Label>
                                <Form.Control
                                    type="text" maxLength={5}
                                    id="puertaElec"
                                    name="PuePunSum"
                                    value={formDataElectrico.PuePunSum}
                                    onChange={(e) => setFormDataElectrico('PuePunSum', e.target.value)}
                                    placeholder="Ej. 1"
                                    isInvalid={showErrors && !!formErrors.PuePunSum}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.PuePunSum}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>

                        <Row className="g-3 mt-2">
                            {/* Código Postal */}
                            <Col lg={3} md={6} sm={12}>
                                <Form.Label htmlFor="codigoPostalElec" className="form-label fw-medium">
                                    Código Postal
                                </Form.Label>
                                {/* Codigo postal */}
                                {!formDataElectrico.codigo_postal  && (
                                <InputGroup hasValidation>
                                    <Typeahead
                                        id="codigoPostalElec"
                                        labelKey="CPLoc"
                                        options={localidadesOptions}
                                        selected={getSelectedTypeaheadValue(localidadesOptions, formDataElectrico.codigo_postal, 'CPLoc')}
                                        onChange={(selected) => {
                                            if (selected.length > 0) {
                                                const localidad = selected[0] as Localidad;
                                                setFormDataElectrico(prev => ({
                                                    ...prev,
                                                    codigo_postal: localidad.CPLoc,
                                                    localidad: localidad.DesLoc,
                                                    provincia: localidad.provincia.DesPro
                                                }));
                                            } else {
                                                setFormDataElectrico(prev => ({
                                                    ...prev,
                                                    codigo_postal: '',
                                                    localidad: '',
                                                    provincia: ''
                                                }));
                                            }
                                        }}
                                        placeholder="Buscar por Código Postal.."
                                        isLoading={false}
                                        minLength={1}
                                        isInvalid={showErrors && !!formErrors.codigo_postal}
                                    />
                                    <Form.Control.Feedback type="invalid">
                                        {formErrors.codigo_postal}
                                    </Form.Control.Feedback>
                                </InputGroup>
                                )}
                                {formDataElectrico.codigo_postal && (
                                    <Form.Control
                                        type="text"
                                        id="codigoPostalElec"
                                        name="codigo_postal"
                                        value={formDataElectrico.codigo_postal}
                                        onChange={(e) => setFormDataElectrico('codigo_postal', e.target.value)}
                                        placeholder="Código Postal"
                                        isInvalid={showErrors && !!formErrors.codigo_postal}
                                    />
                                )}
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.codigo_postal}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Localidad */}
                            <Col lg={4} md={6} sm={12}>
                                <Form.Label htmlFor="localidadElec" className="form-label fw-medium">
                                    Localidad
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    id="localidadElec"
                                    name="localidad"
                                    onChange={(e) => setFormDataElectrico('localidad', e.target.value)}
                                    disabled
                                    value={formDataElectrico.localidad}
                                    placeholder="Localidad"
                                    isInvalid={showErrors && !!formErrors.localidad}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.localidad}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Provincia */}
                            <Col lg={5} md={12} sm={12}>
                                <Form.Label htmlFor="provinciaElec" className="form-label fw-medium">
                                    Provincia
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    id="provinciaElec"
                                    name="provincia"
                                    onChange={(e) => setFormDataElectrico('provincia', e.target.value)}
                                    disabled
                                    value={formDataElectrico.provincia}
                                    placeholder="Provincia"
                                    isInvalid={showErrors && !!formErrors.provincia}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.provincia}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>
                    </div>

                    {/* Sección: Comentarios */}
                    <div className="mb-3">
                        <h6 className="text-muted mb-3 fw-semibold border-bottom pb-2">
                            <i className="bx bx-message-square-dots me-2"></i>
                            Comentarios Adicionales
                        </h6>
                        <Row>
                            <Col md={12}>
                                <Form.Label htmlFor="comentarioElectrico" className="form-label fw-medium">
                                    Comentario
                                </Form.Label>
                                <Form.Control
                                    as="textarea"
                                    rows={4}
                                    id="comentarioElectrico"
                                    name="comentarios"
                                    value={formDataElectrico.comentarios}
                                    onChange={(e) => setFormDataElectrico('comentarios', e.target.value)}
                                    placeholder="Comentarios adicionales sobre el contrato eléctrico..."
                                    isInvalid={showErrors && !!formErrors.comentarios}
                                    className="resize-none"
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.comentarios}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>
                    </div>
                </Card.Body>
                <div className="d-flex">
                    <button
                        type="button"
                        className="m-0 mx-auto btn btn-primary right"
                        onClick={() => saveElectricoForm()}
                    >
                        Registrar Cups Eléctrico
                    </button>
                </div>
            </Card>
        );
    }
);

CupsElectricSectionMultiClienteMultiPunto.displayName = 'CupsElectricSectionMultiClienteMultiPunto';

export default CupsElectricSectionMultiClienteMultiPunto;