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

const initialFormDataElectrico: FormDataElectrico = {
    cupsId: '',
    cups_electrico: '',
    direccion: '',
    EscPunSum: '',
    PlaPunSum: '',
    PuePunSum: '',
    localidad: '',
    provincia: '',
    codigo_postal: '',
    tarifa: '',
    nombreTarifa: '',
    Id_Tarifa_Automatica: '',
    consumo_kw: '',
    potencia1: '',
    potencia2: '',
    potencia3: '',
    potencia4: '',
    potencia5: '',
    potencia6: '',
    comercializadora: '',
    comercializadoraNombre: '',
    codigoServicioProducto: '',
    producto: '',
    productoNombre: '',
    anexo: '',
    anexoNombre: '',
    fechaInicio: '',
    fechaFin: '',
    tipoprecio: '',
    comentarios: '',
    corpoGo: '',
    ...INITIAL_SERVICIOS_CONTRATO_VALUES,
};

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

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

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

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

        const [productosFiltrados, setProductosFiltrados] = useState([]);
        const [anexosFiltrados, setAnexosFiltrados] = useState([]);
        const [tarifaOptions, setTarifaOptions] = useState<TarifaElectricaOption[]>([]);
        const [ventanaOptions, setVentanaOptions] = useState<VentanaOption[]>([]);

        const [formErrors, setFormErrors] = useState<{ [key: string]: string }>({});
        const [showErrors, setShowErrors] = useState(false);
        const [selectedCliente, setSelectedCliente] = useState<any>([]);
        const [bLocalidad, setbLocalidad] = useState<boolean>(false);

        const handleBuscarSipsCups = () => {
            const payload: { cups: string; tipo: string; cod_com?: number } = {
                cups: formDataElectrico.cups_electrico,
                tipo: 'luz',
            };
            if (formDataElectrico.comercializadora) {
                payload.cod_com = parseInt(String(formDataElectrico.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.NomTarEle === data.Tarifa);
                            if (tarifaSeleccionada) {
                                setFormDataElectrico(prev => ({
                                    ...prev,
                                    tarifa: tarifaSeleccionada.CodTarEle,
                                    nombreTarifa: tarifaSeleccionada.NomTarEle,
                                }));
                            }
                        }
                        setFormDataElectrico(prev => ({
                            ...prev,
                            potencia1: data.CPotP1M1,
                            potencia2: data.CPotP2M1,
                            potencia3: data.CPotP3M1,
                            potencia4: data.CPotP4M1,
                            potencia5: data.CPotP5M1,
                            potencia6: data.CPotP6M1,
                        }));
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        };

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

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

        // useEffect para filtrar anexos de electricidad
        useEffect(() => {
            if (formDataElectrico.producto) {
                setAnexosFiltrados(
                    anexos.filter((anexo: any) => anexo.CodPro == formDataElectrico.producto)
                );
            } else {
                setAnexosFiltrados([]);
                // Limpia campos relacionados si no hay producto, solo si no están ya vacíos
                const shouldUpdateAnexo = formDataElectrico.anexo !== '' || formDataElectrico.anexoNombre !== '';
                if (shouldUpdateAnexo) {
                    setFormDataElectrico(prev => ({
                        ...prev,
                        anexo: '',
                        anexoNombre: ''
                    }));
                }
            }
        }, [formDataElectrico.producto, anexos]);

        useEffect(() => {
            buscarTarifas();
            setLocalidadesOptions(localidades || []);
            //handleBuscarCups(1);
            setCupsOptions(cupsData || []);
            // Inicializa el formulario con los datos proporcionados
            setFormDataElectrico({
                ...datos,
                comercializadora: datos.comercializadora || '',
                comercializadoraNombre: datos.comercializadoraNombre || '',
                producto: datos.producto || '',
                productoNombre: datos.productoNombre || '',
                codigoServicioProducto: datos.codigoServicioProducto || '',
                anexo: datos.anexo || '',
                anexoNombre: datos.anexoNombre || '',
                tipoprecio: datos.tipoprecio || '',
                cupsId: datos.cupsId || '',
                cups_electrico: datos.cups_electrico || '',
                direccion: datos.direccion || '',
                EscPunSum: datos.EscPunSum || '',
                PlaPunSum: datos.PlaPunSum || '',
                PuePunSum: datos.PuePunSum || '',
                localidad: datos.localidad || '',
                provincia: datos.provincia || '',
                codigo_postal: datos.codigo_postal || '',
                tarifa: datos.tarifa || '',
                nombreTarifa: datos.nombreTarifa || '',
                Id_Tarifa_Automatica: datos.Id_Tarifa_Automatica || '',
                consumo_kw: datos.consumo_kw || '',
                potencia1: datos.potencia1 || '',
                potencia2: datos.potencia2 || '',
                potencia3: datos.potencia3 || '',
                potencia4: datos.potencia4 || '',
                potencia5: datos.potencia5 || '',
                potencia6: datos.potencia6 || '',
                comentarios: datos.comentarios || '',
                fechaInicio: datos.fechaInicio || '',
                fechaFin: datos.fechaFin || '',
                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,
            });
        }, []);

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

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

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

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

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

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


        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 Electricidad:", cups);
                 setFormDataElectrico(prev => ({
                    ...prev,
                    cupsId: cups.cupsId,
                    cups_electrico: cups.codigoCups.substring(0,20),
                    direccion: cups.direccion,
                    tarifa: cups.tarifa,
                    consumo_kw: cups.ConAnuCup || '0',
                    potencia1: cups.PotConP1 || '0',
                    potencia2: cups.PotConP2 || '0',
                    potencia3: cups.PotConP3 || '0',
                    potencia4: cups.PotConP4 || '0',
                    potencia5: cups.PotConP5 || '0',
                    potencia6: cups.PotConP6 || '0',
                    EscPunSum: cups.EscPunSum || '',
                    PlaPunSum: cups.PlaPunSum || '',
                    PuePunSum: cups.PuePunSum || '',
                    codigo_postal: cups.CPLocSoc || '',
                }));
                // 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) {
                    setFormDataElectrico(prev => ({
                        ...prev,
                        codigo_postal: localidad.CPLoc,
                        localidad: localidad.DesLoc,
                        provincia: localidad.provincia.DesPro
                    }));
                }
            } else {
                // Si recibe null, limpia los campos relacionados
                if (import.meta.env.DEV) console.log("Limpiando datos del formulario de Gas.");
                setFormDataElectrico(prev => ({
                    ...prev,
                    cupsId: '',
                    cups_electrico: '',
                    direccion: '',
                    tarifa: '',
                    consumo_kw: '',
                    potencia1: '',
                    potencia2: '',
                    potencia3: '',
                    potencia4: '',
                    potencia5: '',
                    potencia6: '',
                    EscPunSum: '',
                    PlaPunSum: '',
                    PuePunSum: '',
                    codigo_postal: '',
                }));
                // Opcional: Limpiar las opciones del desplegable si es necesario
                setCupsOptions([]);
            }
        };

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

            // Define los campos obligatorios para la validación
            const requiredFields: Array<keyof FormDataElectrico> = [
                'cups_electrico',
                'direccion',
                'localidad',
                'provincia',
                'codigo_postal',
                'tarifa',
                'consumo_kw',
                'comercializadora',
                'producto',
                'tipoprecio',
            ];

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

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


            setFormErrors(currentErrors);

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

            setShowErrors(false);
            // Si llegamos aquí, el formulario es válido y se puede proceder.
            if (import.meta.env.DEV) console.log("Formulario eléctrico válido. Datos a enviar:", formDataElectrico);
            onChange(formDataElectrico);

            if (import.meta.env.DEV) console.log("--- Validación eléctrica completada con éxito y formulario reseteado ---");
            return true;
        };

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

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

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

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

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

        return (
            <Card>
                <Card.Header className="bg-light">
                    <h4>Datos de Cups Eléctrico</h4>
                    <p className="text-muted">
                        Procederemos a diligenciar los datos del cup eléctrico
                    </p>
                </Card.Header>
                <Card.Body>
                    
                    <Row className="g-3 mt-1">
                        {/* Cups Eléctrico + botón */}
                        <Col lg={6} md={6} sm={12}>
                                <Form.Label htmlFor="cupsElectricoTypeahead" className="form-label fw-medium">
                                    Cups Eléctrico
                                </Form.Label>
                                { /* Typeahead para buscar CUPS Eléctrico */}
                                {!formDataElectrico.cups_electrico && (
                                <InputGroup hasValidation className="w-100">
                                    <div className="flex-grow-1" style={{ width: '90%' }}>
                                        <Typeahead
                                            id="cupsElectricoTypeahead1"
                                            labelKey="codigoCups"
                                            options={cupsOptions}
                                            selected={getSelectedTypeaheadValue(cupsOptions, formDataElectrico.cups_electrico, 'CUPsEle')}
                                            onChange={(selected) => {

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

                                                handleCupsDataChange(cupsSeleccionado);
                                                if (import.meta.env.DEV) console.log("CUPS seleccionado:", selected);

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

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

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

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

                    </Row>

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

                    {/* Sección: 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="direccion1" className="form-label">
                                    Dirección
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    id="direccion1"
                                    name="direccion"
                                    value={formDataElectrico.direccion}
                                    onChange={(e) => setFormDataElectrico('direccion', e.target.value)}
                                    placeholder="Dirección completa"
                                    isInvalid={showErrors && !!formErrors.direccion}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.direccion}
                                </Form.Control.Feedback>
                            </Col>

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

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

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

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

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

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

                    <ServiciosContratoFormSection
                        values={formDataElectrico}
                        idPrefix="elec-ref"
                        onChange={(key: ServicioContratoKey, checked) =>
                            setFormDataElectrico((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="comentario1" className="form-label">
                                    Comentario
                                </Form.Label>
                                <Form.Control
                                    as="textarea"
                                    rows={4}
                                    id="comentario1"
                                    name="comentarios"
                                    value={formDataElectrico.comentarios}
                                    onChange={(e) => setFormDataElectrico('comentarios', e.target.value)}
                                    placeholder="Comentarios adicionales sobre el contrato eléctrico..."
                                    isInvalid={showErrors && !!formErrors.comentarios}
                                    className="resize-none"
                                />
                                <Form.Control.Feedback type="invalid">
                                    {formErrors.comentarios}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>
                    </div>
                </Card.Body>
                <div className="d-flex">
                    <button
                        type="button"
                        className="m-0 mx-auto btn btn-primary right"
                        onClick={() => saveElectricoForm()}
                    >
                        Registrar Cups Eléctrico
                    </button>
                </div>
            </Card>
        );
    }
);

CupsElectricSection.displayName = 'CupsElectricSection';

export default CupsElectricSection;