// CupsGasSection.tsx
import {
    Card,
    Col, Form, Row, Button,
    InputGroup
} from "react-bootstrap";
import { forwardRef, useEffect, useState, useMemo } from "react";
import axios from "axios";
import { Typeahead } from "react-bootstrap-typeahead";
import { useForm } from "@inertiajs/react";
import { formatToYYYYMMDD } from '../../Utils';
import { Cliente, CupsGasSectionProps, CupsOption, FormDataGas, Localidad, TarifaGasOption, VentanaOption } from "../Interfaces/Interfaces";

const initialFormDataGas: FormDataGas = {
    razon_social: '',
    documento_fiscal: '',
    cupsGasId: '',
    codigoCups: '',
    direccionGas: '',
    escaleraGas: '',
    EscPunSum: '',
    PlaPunSum: '',
    PuePunSum: '',
    localidadGas: '',
    provinciaGas: '',
    codigo_postal: '',
    tarifaGas: '',
    nombreTarifa: '',
    Id_Tarifa_Automatica: '',
    consumoGas: '',
    caudal_diario: '',
    comercializadora: '',
    comercializadoraNombre: '',
    CodigoServicio: '',
    producto: '',
    productoNombre: '',
    anexo: '',
    anexoNombre: '',
    tipoprecio: '',
    comentarioGas: '',
    fechaInicio: '',
    fechaFin: '',
    corpoGo:  '',
};

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

        const [localidadesOptions, setLocalidadesOptions] = useState<Localidad[]>([]);
        const [cupsOptions, setCupsOptions] = useState<CupsOption[]>([]);

        const { data: formDataGas, setData: setFormDataGas, reset: resetFormDataGas } = useForm<FormDataGas>(initialFormDataGas);

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

        const [productosFiltrados, setProductosFiltrados] = useState([]);
        const [anexosFiltrados, setAnexosFiltrados] = useState([]);
        const [tarifaOptions, setTarifaOptions] = useState<TarifaGasOption[]>([]);
        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: formDataGas.codigoCups, tipo: 'gas' })
                .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.NomTarGas === data.Tarifa);
                            if (tarifaSeleccionada) {
                                setFormDataGas(prev => ({
                                    ...prev,
                                    tarifa: tarifaSeleccionada.CodTarGas,
                                    nombreTarifa: tarifaSeleccionada.NomTarGas,
                                }));
                            }
                        }
                        setFormDataGas(prev => ({
                            ...prev,
                            tarifaGas: data.CodTarGas,
                            nombreTarifa: data.NomTarGas,
                            consumoGas: data.Consumo_kWh_P1,
                            caudal_diario: data.Caudal_Max_Dia_kWhd
                        }));
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        };

        // useEffect para filtrar productos
        useEffect(() => {
            if (formDataGas.comercializadora) {
                setProductosFiltrados(
                    productos.filter((producto: any) => producto.CodCom == formDataGas.comercializadora)
                );
            } else {
                setProductosFiltrados([]);
                const shouldUpdateFormData =
                    formDataGas.producto !== '' ||
                    formDataGas.productoNombre !== '' ||
                    formDataGas.CodigoServicio !== '' ||
                    formDataGas.anexo !== '' ||
                    formDataGas.anexoNombre !== '';

                if (shouldUpdateFormData) {
                    setFormDataGas(prev => ({
                        ...prev,
                        producto: '',
                        productoNombre: '',
                        CodigoServicio: '',
                        anexo: '',
                        anexoNombre: ''
                    }));
                }
            }
        }, [formDataGas.comercializadora, productos]); // Dependencias simplificadas

        // useEffect para filtrar anexos
        useEffect(() => {
            if (formDataGas.producto) {
                setAnexosFiltrados(
                    anexos.filter((anexo: any) => anexo.CodPro == formDataGas.producto)
                );
            } else {
                setAnexosFiltrados([]);
                const shouldUpdateAnexo = formDataGas.anexo !== '' || formDataGas.anexoNombre !== '';
                if (shouldUpdateAnexo) {
                    setFormDataGas(prev => ({
                        ...prev,
                        anexo: '',
                        anexoNombre: ''
                    }));
                }
            }
        }, [formDataGas.producto, anexos]); // Dependencias simplificadas

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

            setFormDataGas(prev => ({
                ...prev,
                comercializadora: nuevaComercializadora,
                comercializadoraNombre: selectedText,
                producto: '',
                productoNombre: '',
                codigoServicioProducto: '',
                anexo: '',
                anexoNombre: ''
            }));
        };


        const handleCupsDataChange = (cups: CupsOption | null) => {
            // Si recibe un objeto CUPS, rellena el formulario
            if (cups) {
                console.log("Actualizando formulario con CUPS de Gas:", cups);
                setFormDataGas(prev => ({
                    ...prev,
                    cupsGasId: cups.cupsGasId || '',
                    cupsGas: cups.codigoCups.substring(0, 20) || '',
                    direccionGas: cups.direccion || '',
                    nombreTarifa: cups.nombreTarifa || '',
                    tarifaGas: cups.tarifa || '',
                    consumoGas: cups.ConAnuCup || '',
                    caudal_diario: cups.DerAccKW || '',
                    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);
                }

                const localidad = localidadesOptions.find(loc => loc.CPLoc === cups.CPLocSoc);
                if (localidad) {
                    setFormDataGas(prev => ({
                        ...prev,
                        codigo_postal: localidad.CPLoc,
                        localidadGas: localidad.DesLoc,
                        provinciaGas: localidad.provincia.DesPro
                    }));
                }

            } else {
                // Si recibe null, limpia los campos relacionados
                console.log("Limpiando datos del formulario de Gas.");
                setFormDataGas(prev => ({
                    ...prev,
                    cupsGasId: '',
                    // No reseteamos 'cupsGas' aquí para que el usuario no pierda lo que escribió manualmente
                    direccionGas: '',
                    tarifaGas: '',
                    nombreTarifa: '',
                    consumoGas: '',
                    caudal_diario: '',
                    // ... y cualquier otro campo que deba limpiarse
                }));
                // Opcional: Limpiar las opciones del desplegable si es necesario
                //setCupsOptions([]);
            }
        };

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

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

            if (seleccionado) {
                setFormDataGas(prev => ({
                    ...prev,
                    producto: nuevoProducto,
                    codigoServicioProducto: seleccionado.CodigoServicio,
                    productoNombre: seleccionado.DesPro,
                    anexo: '',
                    anexoNombre: ''
                }));
            } else {
                setFormDataGas(prev => ({
                    ...prev,
                    producto: '',
                    codigoServicioProducto: '',
                    productoNombre: '',
                    anexo: '',
                    anexoNombre: ''
                }));
            }
        };

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


        useEffect(() => {
            console.log("ClienteId cambiado:", selectedCliente[0]?.CodCli);
            //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]);

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


        useEffect(() => {

            buscarTarifas();
            setLocalidadesOptions(localidades || []);
            setCupsOptions(cupsData || []);
            setClientesOptions(clientes || []);
            console.log(datos);
            // Inicialización estricta según la interfaz FormDataGas
            setFormDataGas({
                razon_social: datos.razon_social || '',
                documento_fiscal: datos.documento_fiscal || '',
                cupsGasId: datos.cupsGasId || '',
                codigoCups: datos.codigoCups || '',
                direccionGas: datos.direccionGas || '',
                escaleraGas: datos.escaleraGas || '',
                localidadGas: datos.localidadGas || '',
                EscPunSum: datos.EscPunSum || '',
                PlaPunSum: datos.PlaPunSum || '',
                PuePunSum: datos.PuePunSum || '',
                provinciaGas: datos.provinciaGas || '',
                codigo_postal: datos.codigo_postal || '',
                tarifaGas: datos.tarifaGas || '',
                nombreTarifa: datos.nombreTarifa || '',
                corpoGo: datos.corpoGo || '',
                Id_Tarifa_Automatica: datos.Id_Tarifa_Automatica || '',
                consumoGas: datos.consumoGas || '',
                caudal_diario: datos.caudal_diario || '',
                comercializadora: datos.comercializadora || '',
                comercializadoraNombre: datos.comercializadoraNombre || '',
                CodigoServicio: datos.CodigoServicio || '',
                producto: datos.producto || '',
                productoNombre: datos.productoNombre || '',
                anexo: datos.anexo || '',
                anexoNombre: datos.anexoNombre || '',
                tipoprecio: datos.tipoprecio || '',
                comentarioGas: datos.comentarioGas || '',
                fechaInicio: datos.fechaInicio || '',
                fechaFin: datos.fechaFin || '',
                codigoServicioProducto: datos.codigoServicioProducto || '',
            });

            // Inicializa el cliente seleccionado para el Typeahead
            if (datos.documento_fiscal && datos.razon_social) {
                setSelectedCliente([{
                    NumCifCli: datos.documento_fiscal,
                    RazSocCli: datos.razon_social
                }]);
            }
        }, [datos]);


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

            // Define los campos obligatorios para la validación
            const requiredFields: Array<keyof FormDataGas> = [
                'razon_social',
                'documento_fiscal',
                'codigoCups',
                'direccionGas',
                'localidadGas',
                'provinciaGas',
                'tarifaGas',
                'nombreTarifa',
                'consumoGas',
                'caudal_diario',
                'comercializadora',
                'producto',
                'anexo',
                'fechaInicio',
                'fechaFin',
                'tipoprecio',
            ];

            requiredFields.forEach(key => {
                const value = formDataGas[key];
                if (typeof value === 'string') {
                    // Considera '0' como vacío si es un valor para select que significa "no seleccionado"
                    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 && formDataGas.Id_Tarifa_Automatica.trim() === '') {
                currentErrors['Id_Tarifa_Automatica'] = 'Debe seleccionar una ventana de precios.';
                hasValidationErrors = true;
            }

            setFormErrors(currentErrors);

            if (hasValidationErrors) {
                console.warn("Validación fallida. Por favor, revisa los campos requeridos.", currentErrors);
                return;
            }

            setShowErrors(false);
            console.log("Formulario de gas válido. Datos a enviar:", formDataGas);
            onChange(formDataGas);
            console.log("--- Validación completada con éxito y formulario reseteado ---");
        };

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

            axios.post(route('tarifas.integracion'),
                {
                    gama: formDataGas.CodigoServicio,
                    tipo_contrato: formDataGas.tipoprecio,
                    tipo_tarifas: "gas",
                    tarifa_gas: formDataGas.tarifaGas,
                    tarifa_MIB: "1",
                    tipo_contrato_gas: "1",
                    servicio: Servicio_Integracion

                })
                .then(res => {
                    setVentanaOptions(res.data.data);
                    if (res.data.data.length === 1) {
                        if (formDataGas.Id_Tarifa_Automatica !== res.data.data[0].TarifaCUPS) {
                            setFormDataGas('Id_Tarifa_Automatica', res.data.data[0].TarifaCUPS);
                        }
                    } else if (formDataGas.Id_Tarifa_Automatica !== '') {
                        setFormDataGas(prev => ({ ...prev, Id_Tarifa_Automatica: '' }));
                    }
                }).catch((e) => {
                    console.error("Error al buscar ventanas de precios:", e);
                    setVentanaOptions([]);
                    if (formDataGas.Id_Tarifa_Automatica !== '') {
                        setFormDataGas(prev => ({ ...prev, Id_Tarifa_Automatica: '' }));
                    }
                });
        };

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

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


        // Función para obtener la selección de Typeahead basada en formDataGas
        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 [];
        };

        // Función para obtener el cliente seleccionado basado en los datos existentes
        const getSelectedClienteValue = () => {
            if (formDataGas.documento_fiscal && formDataGas.razon_social) {
                return [{
                    NumCifCli: formDataGas.documento_fiscal,
                    RazSocCli: formDataGas.razon_social
                }];
            }
            return selectedCliente;
        };

        return (
            <Card className="border-0 shadow-sm">
                <Card.Header className="py-3">
                    <h5 className="mb-0 fw-semibold">
                        <i className="bx bx-flame me-2"></i>
                        Información del Contrato de Gas - 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;
                                            setFormDataGas({
                                                ...formDataGas,
                                                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={getSelectedClienteValue()}
                                    onChange={(selected: any[]) => {
                                        console.log(selected);
                                        if (selected.length > 0) {
                                            const cliente = selected[0];
                                            setFormDataGas({
                                                ...formDataGas,
                                                documento_fiscal: cliente.NumCifCli,
                                                razon_social: cliente.RazSocCli});
                                            setSelectedCliente(selected); // esto es importante
                                            console.log(selected);
                                        }
                                    }}
                                    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="comercializadora" className="form-label fw-medium">
                                    Comercializadora
                                </Form.Label>
                                <InputGroup hasValidation>
                                    <Form.Select
                                        id="comercializadora"
                                        name="comercializadora"
                                        className="form-select"
                                        value={formDataGas.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="producto" className="form-label fw-medium">
                                    Producto
                                </Form.Label>
                                <InputGroup hasValidation>
                                    <Form.Select
                                        id="producto"
                                        name="producto"
                                        className="form-select"
                                        value={formDataGas.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="anexo" className="form-label fw-medium">
                                    Anexo
                                </Form.Label>
                                <Form.Select
                                    id="anexo"
                                    name="anexo"
                                    className="form-select"
                                    value={formDataGas.anexo || ''}
                                    onChange={(e) => {
                                        const selectedValue = e.target.value;
                                        const selectedIndex = e.target.selectedIndex;
                                        const selectedText = selectedIndex !== -1 ? e.target.options[selectedIndex].text : '';

                                        setFormDataGas(prev => ({
                                            ...prev,
                                            anexo: selectedValue,
                                            anexoNombre: selectedText,
                                        }));
                                    }}
                                    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="tipoPrecio" className="form-label fw-medium">
                                    Tipo Precio
                                </Form.Label>
                                <Form.Select
                                    id="tipoPrecio"
                                    name="tipoprecio"
                                    className="form-select"
                                    onChange={(e) => {
                                        setFormDataGas("tipoprecio", e.target.value);
                                    }}
                                    value={formDataGas.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 Gas + botón */}
                            <Col lg={6} md={6} sm={12}>
                                <Form.Label htmlFor={!formDataGas.codigoCups ? "cupsGasTypeahead" : "cupsGasInput"} className="form-label fw-medium">
                                    Cups Gas
                                </Form.Label>
                                { /* Typeahead para buscar CUPS Gas */}
                                {!formDataGas.codigoCups && (
                                <InputGroup hasValidation className="w-100">
                                    <div className="flex-grow-1" style={{ width: '90%' }}>
                                        <Typeahead
                                            id="cupsGasTypeahead"
                                            labelKey="codigoCups"
                                            options={cupsOptions}
                                            selected={getSelectedTypeaheadValue(cupsOptions, formDataGas.codigoCups, 'codigoCups')}
                                            onChange={(selected) => {
                                                const cupsSeleccionado = selected.length > 0 ?
                                                        (selected[0] as CupsOption) : null;
                                                // Llama a la función reutilizable
                                                handleCupsDataChange(cupsSeleccionado);

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

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

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

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

                            {/* Caudal Diario */}
                            <Col lg={2} md={6} sm={12}>
                                <Form.Label htmlFor="caudalDiario" className="form-label fw-medium">
                                    Caudal (kWh/día)
                                </Form.Label>
                                <Form.Control
                                    type="number"
                                    step="0.01"
                                    id="caudalDiario"
                                    name="caudal_diario"
                                    value={formDataGas.caudal_diario}
                                    onChange={(e) => setFormDataGas('caudal_diario', e.target.value)}
                                    placeholder="0.00"
                                    isInvalid={showErrors && !!formErrors.caudal_diario}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.caudal_diario}
                                </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="ventanaGas" className="form-label fw-medium">
                                    Ventana
                                </Form.Label>
                                <Form.Select
                                    id="ventanaGas"
                                    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 : '';

                                        setFormDataGas( prev => ({
                                            ...prev ,
                                            "Id_Tarifa_Automatica" : e.target.value,
                                            "fechaInicio": formatToYYYYMMDD(fechaInicio) || '',
                                            "fechaFin": formatToYYYYMMDD(fechaFin) || ''})
                                    )}}
                                    value={formDataGas.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: 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={formDataGas.fechaInicio}
                                    onChange={(e) => setFormDataGas('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="fechaFin" className="form-label fw-medium">
                                    Fecha Final
                                </Form.Label>
                                <Form.Control
                                    type="date" disabled={ventanaOptions.length != 0}
                                    id="fechaFin"
                                    name="fechaFin"
                                    value={formDataGas.fechaFin}
                                    onChange={(e) => setFormDataGas('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="direccionGas" className="form-label fw-medium">
                                    Dirección
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    id="direccionGas"
                                    name="direccionGas"
                                    value={formDataGas.direccionGas}
                                    onChange={(e) => setFormDataGas('direccionGas', e.target.value)}
                                    placeholder="Dirección completa"
                                    isInvalid={showErrors && !!formErrors.direccionGas}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.direccionGas}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Escalera */}
                            <Col lg={2} md={4} sm={6} xs={6}>
                                <Form.Label htmlFor="escaleraElec" className="form-label">
                                    Escalera
                                </Form.Label>
                                <Form.Control
                                    type="text" maxLength={5}
                                    id="escaleraElec"
                                    name="EscPunSum"
                                    value={formDataGas.EscPunSum}
                                    onChange={(e) => setFormDataGas('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">
                                    Planta
                                </Form.Label>
                                <Form.Control
                                    type="text" maxLength={5}
                                    id="plantaElec"
                                    name="PlaPunSum"
                                    value={formDataGas.PlaPunSum}
                                    onChange={(e) => setFormDataGas('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">
                                    Puerta
                                </Form.Label>
                                <Form.Control
                                    type="text" maxLength={5}
                                    id="puertaElec"
                                    name="PuePunSum"
                                    value={formDataGas.PuePunSum}
                                    onChange={(e) => setFormDataGas('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="codigoPostalGas" className="form-label fw-medium">
                                    Código Postal
                                </Form.Label>
                                {/* Codigo postal */}
                                {!formDataGas.codigo_postal  && (
                                <InputGroup hasValidation>
                                    <Typeahead
                                        id="codigoPostalGas"
                                        labelKey="CPLoc"
                                        options={localidadesOptions}
                                        selected={getSelectedTypeaheadValue(localidadesOptions, formDataGas.codigo_postal, 'CPLoc')}
                                        onChange={(selected) => {
                                            if (selected.length > 0) {
                                                const localidad = selected[0] as Localidad;
                                                setFormDataGas(prev => ({
                                                    ...prev,
                                                    codigo_postal: localidad.CPLoc,
                                                    localidadGas: localidad.DesLoc,
                                                    provinciaGas: localidad.provincia.DesPro
                                                }));
                                            } else {
                                                setFormDataGas(prev => ({
                                                    ...prev,
                                                    codigo_postal: '',
                                                    localidadGas: '',
                                                    provinciaGas: ''
                                                }));
                                            }
                                        }}
                                        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>
                                )}
                                {formDataGas.codigo_postal && (
                                    <Form.Control
                                        type="text"
                                        id="codigoPostalGas"
                                        name="codigo_postal"
                                        value={formDataGas.codigo_postal}
                                        onChange={(e) => setFormDataGas('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="localidadGas" className="form-label fw-medium">
                                    Localidad
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    id="localidadGas"
                                    name="localidadGas"
                                    onChange={(e) => setFormDataGas('localidadGas', e.target.value)}
                                    disabled
                                    value={formDataGas.localidadGas}
                                    placeholder="Localidad"
                                    isInvalid={showErrors && !!formErrors.localidadGas}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.localidadGas}
                                </Form.Control.Feedback>
                            </Col>

                            {/* Provincia */}
                            <Col lg={5} md={12} sm={12}>
                                <Form.Label htmlFor="provinciaGas" className="form-label fw-medium">
                                    Provincia
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    id="provinciaGas"
                                    name="provinciaGas"
                                    onChange={(e) => setFormDataGas('provinciaGas', e.target.value)}
                                    disabled
                                    value={formDataGas.provinciaGas}
                                    placeholder="Provincia"
                                    isInvalid={showErrors && !!formErrors.provinciaGas}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.provinciaGas}
                                </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="comentarioGas" className="form-label fw-medium">
                                    Comentario
                                </Form.Label>
                                <Form.Control
                                    as="textarea"
                                    rows={4}
                                    id="comentarioGas"
                                    name="comentarioGas"
                                    value={formDataGas.comentarioGas}
                                    onChange={(e) => setFormDataGas('comentarioGas', e.target.value)}
                                    placeholder="Comentarios adicionales sobre el contrato de gas..."
                                    isInvalid={showErrors && !!formErrors.comentarioGas}
                                    className="resize-none"
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.comentarioGas}
                                </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={() => saveGasForm()}
                    >
                        Registrar Cups Gas
                    </button>
                </div>
            </Card>
        );
    }
);

CupsGasSectionMultiClienteMultiPunto.displayName = 'CupsGasSectionMultiClienteMultiPunto';

export default CupsGasSectionMultiClienteMultiPunto;