// CupsGasSection.tsx
import {
    Card,
    Col, Form, Row, Button,
    InputGroup
} from "react-bootstrap";
import {useImperativeHandle, 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 { CupsGasSectionProps, CupsOption, FormDataGas, Localidad, TarifaGasOption, VentanaOption } from "../Interfaces/Interfaces";
import { ServiciosContratoFormSection } from '../ComponentesComunes/ServiciosContratoFields';
import { INITIAL_SERVICIOS_CONTRATO_VALUES, ServicioContratoKey } from '../ComponentesComunes/serviciosContratoConfig';
import { buscarLocalidades, buscarCupsContratados } from "../../Funciones/apiServices";

const initialFormDataGas: FormDataGas = {
    cupsGasId: '',
    cupsGas: '',
    direccionGas: '',
    escaleraGas: '',
    localidadGas: '',
    provinciaGas: '',
    EscPunSum: '',
    PlaPunSum: '',
    PuePunSum: '',
    codigo_postal: '',
    //cpGas: '',
    tarifaGas: '',
    nombreTarifa: '',
    Id_Tarifa_Automatica: '',
    consumoGas: '',
    caudal_diario: '',
    comercializadora: '',
    comercializadoraNombre: '',
    codigoServicioProducto: '',
    producto: '',
    productoNombre: '',
    anexo: '',
    anexoNombre: '',
    tipoprecio: '',
    comentarioGas: '',
    fechaInicio: '',
    fechaFin: '',
    corpoGo: '',
    ...INITIAL_SERVICIOS_CONTRATO_VALUES,
};

const CupsGasSection = forwardRef<any, CupsGasSectionProps>(
    ({ comercializadoras, productos, anexos, tipoprecio, datos, clienteId, cupsData, 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 handleBuscarSipsCups = () => {
            const payload: { cups: string; tipo: string; cod_com?: number } = {
                cups: formDataGas.cupsGas,
                tipo: 'gas',
            };
            if (formDataGas.comercializadora) {
                payload.cod_com = parseInt(String(formDataGas.comercializadora), 10);
            }
            axios.post(route('sips.consumo'), payload)
                .then(res => {
                    const data = res.data.selectFinal[0];
                    if (import.meta.env.DEV) 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 (import.meta.env.DEV) console.log("Filtrando productos con comercializadora:", formDataGas.comercializadora);
            if (formDataGas.comercializadora) {
                const filteredProducts = productos.filter((producto: any) => producto.CodCom == formDataGas.comercializadora);
                if (import.meta.env.DEV) console.log("Productos filtrados:", filteredProducts);
                setProductosFiltrados(filteredProducts);
            } else {
                setProductosFiltrados([]);
                const shouldUpdateFormData =
                    formDataGas.producto !== '' ||
                    formDataGas.productoNombre !== '' ||
                    formDataGas.codigoServicioProducto !== '' ||
                    formDataGas.anexo !== '' ||
                    formDataGas.anexoNombre !== '';

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

        // useEffect para filtrar anexos
        useEffect(() => {
            if (import.meta.env.DEV) console.log("Filtrando anexos con producto:", formDataGas.producto);
            if (formDataGas.producto) {
                const filteredAnexos = anexos.filter((anexo: any) => anexo.CodPro == formDataGas.producto);
                if (import.meta.env.DEV) console.log("Anexos filtrados:", filteredAnexos);
                setAnexosFiltrados(filteredAnexos);
            } else {
                setAnexosFiltrados([]);
                const shouldUpdateAnexo = formDataGas.anexo !== '' || formDataGas.anexoNombre !== '';
                if (shouldUpdateAnexo) {
                    setFormDataGas(prev => ({
                        ...prev,
                        anexo: '',
                        anexoNombre: ''
                    }));
                }
            }
        }, [formDataGas.producto, anexos, setFormDataGas]); // Dependencias simplificadas

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

            if (import.meta.env.DEV) console.log("Cambiando comercializadora a:", nuevaComercializadora, selectedText);

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

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

            if (import.meta.env.DEV) console.log("Cambiando producto a:", nuevoProducto);

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

            if (import.meta.env.DEV) console.log("Producto seleccionado:", seleccionado);

            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 handleCupsDataChange = (cups: CupsOption | null) => {
            // Si recibe un objeto CUPS, rellena el formulario
            if (cups) {
                if (import.meta.env.DEV) console.log("Actualizando formulario con CUPS de Gas:", cups);
                setFormDataGas(prev => ({
                    ...prev,
                    cupsGasId: cups.cupsId || '',
                    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 || '',
                }));
                // Ejecutar buscarVentanasPrecios si nombreTarifa y Servicio_Integracion están disponibles

                /*if (cups.nombreTarifa && currentServicioIntegracion) {
                    buscarVentanasPrecios(currentServicioIntegracion);
                }*/

                // Buscar localidad y provincia automáticamente basándose en el código postal
                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
                if (import.meta.env.DEV) console.log("Limpiando datos del formulario de Gas.");
                setFormDataGas(prev => ({
                    ...prev,
                    cupsGasId: '',
                    cupsGas: '',
                    direccionGas: '',
                    tarifaGas: '',
                    nombreTarifa: '',
                    consumoGas: '',
                    caudal_diario: '',
                    EscPunSum: '',
                    PlaPunSum: '',
                    PuePunSum: '',
                    codigo_postal: '',
                    localidadGas: '',
                    provinciaGas: ''
                }));
            }
        };

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

        useEffect(() => {
            if (import.meta.env.DEV) console.log("Inicializando CupsGasSection con datos:", datos);
            buscarTarifas();
            setLocalidadesOptions(localidades || []);
            setCupsOptions(cupsData || []);

            const formData = {
                ...datos,
                // Asegúrate de que los campos que no vienen en `datos` se inicialicen correctamente
                cupsGasId: datos.cupsGasId || '',
                cupsGas: datos.cupsGas || '',
                direccionGas: datos.direccionGas || '',
                escaleraGas: datos.escaleraGas || '',
                localidadGas: datos.localidadGas || '',
                provinciaGas: datos.provinciaGas || '',
                tarifaGas: datos.tarifaGas || '',
                nombreTarifa: datos.nombreTarifa || '',
                Id_Tarifa_Automatica: datos.Id_Tarifa_Automatica || '',
                consumoGas: datos.consumoGas || '',
                caudal_diario: datos.caudal_diario || '',
                comercializadora: datos.comercializadora || '',
                comercializadoraNombre: datos.comercializadoraNombre || '',
                codigoServicioProducto: datos.codigoServicioProducto || '',
                producto: datos.producto || '',
                productoNombre: datos.productoNombre || '',
                anexo: datos.anexo || '',
                anexoNombre: datos.anexoNombre || '',
                tipoprecio: datos.tipoprecio || '',
                comentarioGas: datos.comentarioGas || '',
                fechaInicio: datos.fechaInicio || '',
                fechaFin: datos.fechaFin || '',
                EscPunSum: datos.EscPunSum || '',
                PlaPunSum: datos.PlaPunSum || '',
                PuePunSum: datos.PuePunSum || '',
                codigo_postal: datos.codigo_postal || '',
                cuotaFija: datos.cuotaFija ?? INITIAL_SERVICIOS_CONTRATO_VALUES.cuotaFija,
                proteccionPagos: datos.proteccionPagos ?? INITIAL_SERVICIOS_CONTRATO_VALUES.proteccionPagos,
                servicioBateriaVirtual: datos.servicioBateriaVirtual ?? INITIAL_SERVICIOS_CONTRATO_VALUES.servicioBateriaVirtual,
                servicioBasico: datos.servicioBasico ?? INITIAL_SERVICIOS_CONTRATO_VALUES.servicioBasico,
                servicioElectrodomestico: datos.servicioElectrodomestico ?? INITIAL_SERVICIOS_CONTRATO_VALUES.servicioElectrodomestico,
                servicioPremium: datos.servicioPremium ?? INITIAL_SERVICIOS_CONTRATO_VALUES.servicioPremium,
                servicioUrgencias: datos.servicioUrgencias ?? INITIAL_SERVICIOS_CONTRATO_VALUES.servicioUrgencias,
            };

            if (import.meta.env.DEV) console.log("Estableciendo formData:", formData);
            setFormDataGas(formData);
        }, [datos]);

        useEffect(() => {
            //filtrar cupsOptions por clienteId
            if (import.meta.env.DEV) console.log("ClienteId en CupsGasSection:", clienteId);
            if (clienteId && cupsData) {
                const filteredCups = cupsData.filter(cup => cup.CodCli === clienteId);
                setCupsOptions(filteredCups);
            } else {
                setCupsOptions(cupsData || []);
            }
        }, [clienteId, cupsData]);

        useImperativeHandle(ref, () => ({
            saveGasForm,
        }));

        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> = [
                'cupsGas',
                'direccionGas',
                'localidadGas',
                'provinciaGas',
                'tarifaGas',
                'consumoGas',
                'caudal_diario',
                'comercializadora',
                'producto',
                '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); // Actualiza el estado de errores

            // IMPEDIR LA EJECUCIÓN SI HAY ERRORES
            if (hasValidationErrors) {
                console.warn("Validación fallida. Por favor, revisa los campos requeridos.", currentErrors);
                return false; // Esta línea detiene la ejecución del método si hay errores.
            }

            // Si llegamos aquí, el formulario es válido y se puede proceder.
            setShowErrors(false);
            if (import.meta.env.DEV) console.log("Formulario de gas válido. Datos a enviar:", formDataGas);
            onChange(formDataGas);
            if (import.meta.env.DEV) console.log("--- Validación completada con éxito y formulario reseteado ---");
            return true;
        };

        /*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.codigoServicioProducto,
                    tipo_contrato: formDataGas.tipoprecio,
                    tipo_tarifas: "gas",
                    tarifa_gas: formDataGas.nombreTarifa,
                    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: '' }));
                    }
                });
        };*/

        // 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 [];
        };

        return (
            <Card>
                <Card.Header className="bg-light">
                    <h4>Datos de Cups Gas</h4>
                    <p className="text-muted">
                        Procederemos a diligenciar los datos del cup de gas
                    </p>
                </Card.Header>
                <Card.Body>
                    <Row className="g-3 mt-1">
                        {/* Cups Gas + botón */}
                        <Col lg={6} md={6} sm={12}>
                            <Form.Label htmlFor={!formDataGas.cupsGasId ? "cupsGasTypeahead" : "cupsGasInput"} className="form-label">
                                Cups Gas
                            </Form.Label>
                            { /* Typeahead para buscar CUPS Gas */}
                            { !formDataGas.cupsGas && (
                            <InputGroup hasValidation>
                                <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('cupsGas', '');
                                            }
                                        }}
                                        placeholder="Buscar CUPS.."
                                        isLoading={false}
                                        minLength={0}
                                        isInvalid={showErrors && !!formErrors.cupsGas}
                                        style={{ width: '100%' }}
                                    />
                                </div>
                                <Button
                                    variant="outline-secondary"
                                    id="buscarCupsBtnGasUni"
                                    onClick={handleBuscarSipsCups}
                                    style={{ width: '5%', minWidth: '40px' }}
                                    className="border-start-0"
                                >
                                    <i className="bx bx-search"></i>
                                </Button>
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.cupsGas}
                                </Form.Control.Feedback>
                            </InputGroup>
                            )}
                            { /* Input para CUPS Gas si no se usa Typeahead */}
                            {formDataGas.cupsGas && (
                                <InputGroup hasValidation>
                                    <Form.Control
                                        type="text"
                                        id="cupsGasInput"
                                        name="cupsGas"
                                        value={formDataGas.cupsGas}
                                        onChange={(e) =>
                                            setFormDataGas('cupsGas', e.target.value)
                                        }
                                        placeholder="CUPS Gas"
                                        isInvalid={showErrors && !!formErrors.cupsGas}
                                    />
                                    <Button
                                        variant="secondary"
                                        id="buscarCupsBtnGasUni"
                                        onClick={handleBuscarSipsCups}
                                    >
                                        Buscar
                                    </Button>
                                    <Form.Control.Feedback type="invalid">
                                        {formErrors.cupsGas}
                                    </Form.Control.Feedback>
                                </InputGroup>
                            )}
                        </Col>

                        {/* Tarifa */}
                        <Col md={2}>
                            <Form.Label htmlFor="tarifaGas" className="form-label">
                                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 md={2}>
                            <Form.Label htmlFor="consumoGas" className="form-label">
                                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 md={2}>
                            <Form.Label htmlFor="caudalDiario" className="form-label">
                                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>

                    {/* 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">
                                    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">
                                    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" disabled
                                        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">
                                    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">
                                    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>

                    <ServiciosContratoFormSection
                        values={formDataGas}
                        idPrefix="gas-ref"
                        onChange={(key: ServicioContratoKey, checked) =>
                            setFormDataGas((prev) => ({ ...prev, [key]: checked }))
                        }
                    />

                    {/* 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">
                                    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>
        );
    }
);

CupsGasSection.displayName = 'CupsGasSection';

export default CupsGasSection;