import React, { useEffect, useMemo, useState } from 'react';
import { Alert, Badge, Button, Col, Form, Modal, Nav, Row, Table } from 'react-bootstrap';
import Swal from 'sweetalert2';
import { getProvinciaConLocalidades, getProvincias } from '../../../../services/dataService';
import { buscarTarifasElectricas, buscarTarifasGas } from '../../Funciones/apiServices';

interface CrearPuntoSuministroModalProps {
    show: boolean;
    onHide: () => void;
    codCli: number;
    onCreate: (payload: {
        CodCli: number;
        NomViaPunSum: string;
        NumViaPunSum?: string;
        CodTipVia?: number | null;
        CodLoc: number;
        CPLocSoc?: string;
        BloPunSum?: string;
        EscPunSum?: string;
        PlaPunSum?: string;
        PuePunSum?: string;
        TelPunSum?: string;
        EstPunSum?: number;
        ObsPunSum?: string;
        cupsElectrico?: Array<{
            cups?: string;
            CodTarElec?: number | string;
            conAnual?: number | string;
            potencia1?: number | string;
            potencia2?: number | string;
            potencia3?: number | string;
            potencia4?: number | string;
            potencia5?: number | string;
            potencia6?: number | string;
            estado?: number | string;
        }>;
        cupsGas?: Array<{
            cups?: string;
            CodTarGas?: number | string;
            conAnual?: number | string;
            caudal_diario?: number | string;
            estado?: number | string;
        }>;
    }) => Promise<void>;
}

type LocalidadOption = {
    CodLoc: number;
    DesLoc: string;
    CPLoc: string;
    provincia?: { CodPro?: number; DesPro?: string };
};

type ProvinciaOption = { CodPro: number; DesPro: string };
type TarifaElectricaOption = { CodTarEle: number | string; NomTarEle: string };
type TarifaGasOption = { CodTarGas: number | string; NomTarGas: string };
type TipoViaOption = { CodTipVia: number; DesTipVia: string };

type CupsEleRow = {
    _key: string;
    cups?: string;
    CodTarElec?: number | string;
    conAnual?: number | string;
    potencia1?: number | string;
    potencia2?: number | string;
    potencia3?: number | string;
    potencia4?: number | string;
    potencia5?: number | string;
    potencia6?: number | string;
    estado?: number | string;
};

type CupsGasRow = {
    _key: string;
    cups?: string;
    CodTarGas?: number | string;
    conAnual?: number | string;
    caudal_diario?: number | string;
    estado?: number | string;
};

const TELEPHONE_FIELDS = new Set(['TelPunSum']);
const SHORT_TEXT_FIELDS = new Set(['BloPunSum', 'EscPunSum', 'PlaPunSum', 'PuePunSum']);

const CrearPuntoSuministroModal: React.FC<CrearPuntoSuministroModalProps> = ({ show, onHide, codCli, onCreate }) => {
    const [loading, setLoading] = useState(false);
    const [loadingCatalogs, setLoadingCatalogs] = useState(false);
    const [serverError, setServerError] = useState<string>('');
    const [errors, setErrors] = useState<Record<string, string>>({});
    const [activeTab, setActiveTab] = useState<'datos' | 'electrico' | 'gas'>('datos');
    const [provincias, setProvincias] = useState<ProvinciaOption[]>([]);
    const [localidades, setLocalidades] = useState<LocalidadOption[]>([]);
    const [tiposVia, setTiposVia] = useState<TipoViaOption[]>([]);
    const [tarifasEle, setTarifasEle] = useState<TarifaElectricaOption[]>([]);
    const [tarifasGas, setTarifasGas] = useState<TarifaGasOption[]>([]);
    const [codProUI, setCodProUI] = useState<number | ''>('');
    const [form, setForm] = useState({
        CodTipVia: '',
        NomViaPunSum: '',
        NumViaPunSum: '',
        BloPunSum: '',
        CodLoc: '',
        CPLocSoc: '',
        EscPunSum: '',
        PlaPunSum: '',
        PuePunSum: '',
        TelPunSum: '',
        EstPunSum: 1,
        ObsPunSum: '',
    });
    const [cupsEle, setCupsEle] = useState<CupsEleRow[]>([]);
    const [cupsGas, setCupsGas] = useState<CupsGasRow[]>([]);
    const [editEle, setEditEle] = useState<Set<string>>(new Set());
    const [editGas, setEditGas] = useState<Set<string>>(new Set());
    const [draftEle, setDraftEle] = useState<Record<string, CupsEleRow>>({});
    const [draftGas, setDraftGas] = useState<Record<string, CupsGasRow>>({});

    useEffect(() => {
        if (!show) return;
        setServerError('');
        setErrors({});
        setActiveTab('datos');
        setCodProUI('');
        setLocalidades([]);
        setCupsEle([]);
        setCupsGas([]);
        setEditEle(new Set());
        setEditGas(new Set());
        setDraftEle({});
        setDraftGas({});
        setForm({
            CodTipVia: '',
            NomViaPunSum: '',
            NumViaPunSum: '',
            BloPunSum: '',
            CodLoc: '',
            CPLocSoc: '',
            EscPunSum: '',
            PlaPunSum: '',
            PuePunSum: '',
            TelPunSum: '',
            EstPunSum: 1,
            ObsPunSum: '',
        });
    }, [show]);

    const handleChange = (e: React.ChangeEvent<any>) => {
        const { name, value } = e.target;
        let normalizedValue = value;
        if (TELEPHONE_FIELDS.has(name)) {
            normalizedValue = String(value || '').replace(/\D/g, '').slice(0, 9);
        } else if (SHORT_TEXT_FIELDS.has(name)) {
            normalizedValue = String(value || '').slice(0, 3);
        }
        setForm((prev) => ({ ...prev, [name]: normalizedValue }));
        if (errors[name]) {
            setErrors((prev) => ({ ...prev, [name]: '' }));
        }
    };

    useEffect(() => {
        if (!show) return;
        const load = async () => {
            try {
                setLoadingCatalogs(true);
                const [provinciasRes, tiposViaRes, tarifasEleRes, tarifasGasRes] = await Promise.all([
                    getProvincias(),
                    fetch(route("tipo-via.listar") as string).then((r) => r.json()),
                    buscarTarifasElectricas(),
                    buscarTarifasGas(),
                ]);
                setProvincias((provinciasRes?.data || []) as ProvinciaOption[]);
                setTiposVia((tiposViaRes?.data || []) as TipoViaOption[]);
                setTarifasEle((tarifasEleRes || []) as TarifaElectricaOption[]);
                setTarifasGas((tarifasGasRes || []) as TarifaGasOption[]);
            } catch {
                setServerError('No se pudieron cargar los catálogos auxiliares.');
            } finally {
                setLoadingCatalogs(false);
            }
        };
        load();
    }, [show]);

    const handleProvinciaChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
        const codPro = e.target.value ? Number(e.target.value) : '';
        setCodProUI(codPro);
        setErrors((prev) => ({ ...prev, CodLoc: '', CPLocSoc: '' }));
        setForm((prev) => ({ ...prev, CodLoc: '', CPLocSoc: '' }));
        if (!codPro) {
            setLocalidades([]);
            return;
        }
        try {
            const response = await getProvinciaConLocalidades(codPro);
            setLocalidades(response?.data?.localidades || []);
        } catch {
            setLocalidades([]);
            setServerError('No se pudieron cargar las localidades para la provincia seleccionada.');
        }
    };

    const handleLocalidadChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const codLoc = e.target.value;
        const loc = localidades.find((l) => Number(l.CodLoc) === Number(codLoc));
        setForm((prev) => ({
            ...prev,
            CodLoc: codLoc,
            CPLocSoc: loc?.CPLoc || '',
        }));
        setErrors((prev) => ({ ...prev, CodLoc: '', CPLocSoc: '' }));
    };

    const localidadesFiltradas = useMemo(() => localidades, [localidades]);

    const effectiveEleRows = useMemo(
        () => cupsEle.map((row) => (editEle.has(row._key) ? (draftEle[row._key] || row) : row)),
        [cupsEle, editEle, draftEle]
    );
    const effectiveGasRows = useMemo(
        () => cupsGas.map((row) => (editGas.has(row._key) ? (draftGas[row._key] || row) : row)),
        [cupsGas, editGas, draftGas]
    );

    const validateCups = (cups: string): boolean => {
        if (!cups) return false;
        return cups.toUpperCase().startsWith('ES') && cups.length >= 20;
    };

    const startEditEle = (row: CupsEleRow) => {
        setEditEle((prev) => new Set(prev).add(row._key));
        setDraftEle((prev) => ({ ...prev, [row._key]: { ...row } }));
    };

    const startEditGas = (row: CupsGasRow) => {
        setEditGas((prev) => new Set(prev).add(row._key));
        setDraftGas((prev) => ({ ...prev, [row._key]: { ...row } }));
    };

    const saveEditEle = (row: CupsEleRow) => {
        const draft = draftEle[row._key] || row;
        setCupsEle((prev) => prev.map((r) => (r._key === row._key ? { ...draft } : r)));
        setEditEle((prev) => {
            const next = new Set(prev);
            next.delete(row._key);
            return next;
        });
        setDraftEle((prev) => {
            const next = { ...prev };
            delete next[row._key];
            return next;
        });
    };

    const saveEditGas = (row: CupsGasRow) => {
        const draft = draftGas[row._key] || row;
        setCupsGas((prev) => prev.map((r) => (r._key === row._key ? { ...draft } : r)));
        setEditGas((prev) => {
            const next = new Set(prev);
            next.delete(row._key);
            return next;
        });
        setDraftGas((prev) => {
            const next = { ...prev };
            delete next[row._key];
            return next;
        });
    };

    const cancelEditEle = (row: CupsEleRow) => {
        setCupsEle((prev) => prev.filter((r) => !(r._key === row._key && !row.cups && !row.CodTarElec && !row.conAnual)));
        setEditEle((prev) => {
            const next = new Set(prev);
            next.delete(row._key);
            return next;
        });
        setDraftEle((prev) => {
            const next = { ...prev };
            delete next[row._key];
            return next;
        });
    };

    const cancelEditGas = (row: CupsGasRow) => {
        setCupsGas((prev) => prev.filter((r) => !(r._key === row._key && !row.cups && !row.CodTarGas && !row.conAnual)));
        setEditGas((prev) => {
            const next = new Set(prev);
            next.delete(row._key);
            return next;
        });
        setDraftGas((prev) => {
            const next = { ...prev };
            delete next[row._key];
            return next;
        });
    };

    const patchEleDraft = (key: string, field: keyof CupsEleRow, value: any) => {
        setDraftEle((prev) => ({
            ...prev,
            [key]: {
                ...prev[key],
                [field]: value,
            },
        }));
    };

    const patchGasDraft = (key: string, field: keyof CupsGasRow, value: any) => {
        setDraftGas((prev) => ({
            ...prev,
            [key]: {
                ...prev[key],
                [field]: value,
            },
        }));
    };

    const addEle = () => {
        const key = `ele-${Date.now()}`;
        const row: CupsEleRow = { _key: key, estado: 1 };
        setCupsEle((prev) => [row, ...prev]);
        startEditEle(row);
    };

    const addGas = () => {
        const key = `gas-${Date.now()}`;
        const row: CupsGasRow = { _key: key, estado: 1 };
        setCupsGas((prev) => [row, ...prev]);
        startEditGas(row);
    };

    const removeEle = async (row: CupsEleRow) => {
        const result = await Swal.fire({
            title: 'Eliminar CUPS',
            text: '¿Deseas eliminar este CUPS eléctrico del borrador?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar',
        });
        if (!result.isConfirmed) return;
        setCupsEle((prev) => prev.filter((r) => r._key !== row._key));
    };

    const removeGas = async (row: CupsGasRow) => {
        const result = await Swal.fire({
            title: 'Eliminar CUPS',
            text: '¿Deseas eliminar este CUPS de gas del borrador?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar',
        });
        if (!result.isConfirmed) return;
        setCupsGas((prev) => prev.filter((r) => r._key !== row._key));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setServerError('');
        setErrors({});

        const newErrors: Record<string, string> = {};
        if (!form.NomViaPunSum) newErrors.NomViaPunSum = 'La calle/vía es obligatoria.';
        if (!form.CodLoc) newErrors.CodLoc = 'La localidad es obligatoria.';
        if (!codCli) newErrors.CodCli = 'El cliente es obligatorio.';

        const invalidEle = effectiveEleRows.filter((row) => row.cups && !validateCups(String(row.cups)));
        const invalidGas = effectiveGasRows.filter((row) => row.cups && !validateCups(String(row.cups)));
        if (invalidEle.length || invalidGas.length) {
            newErrors.cups = 'Hay CUPS con formato inválido (deben iniciar por ES y tener mínimo 20 caracteres).';
        }

        if (Object.keys(newErrors).length > 0) {
            setErrors(newErrors);
            setServerError('Revisa los campos obligatorios antes de guardar.');
            if (newErrors.CodLoc || newErrors.NomViaPunSum || newErrors.CodCli) setActiveTab('datos');
            if (newErrors.cups) setActiveTab(invalidEle.length ? 'electrico' : 'gas');
            return;
        }

        const confirm = await Swal.fire({
            title: '¿Crear punto de suministro?',
            text: '¿Deseas guardar el punto de suministro con los CUPS capturados?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, guardar',
            cancelButtonText: 'Cancelar',
        });
        if (!confirm.isConfirmed) return;

        setLoading(true);
        try {
            await onCreate({
                CodCli: codCli,
                CodTipVia: form.CodTipVia ? Number(form.CodTipVia) : null,
                NomViaPunSum: form.NomViaPunSum,
                NumViaPunSum: form.NumViaPunSum || '',
                BloPunSum: form.BloPunSum || '',
                CodLoc: Number(form.CodLoc),
                CPLocSoc: form.CPLocSoc || '',
                EscPunSum: form.EscPunSum || '',
                PlaPunSum: form.PlaPunSum || '',
                PuePunSum: form.PuePunSum || '',
                TelPunSum: form.TelPunSum || '',
                EstPunSum: Number(form.EstPunSum ?? 1),
                ObsPunSum: form.ObsPunSum || '',
                cupsElectrico: effectiveEleRows.map(({ _key, ...row }) => row),
                cupsGas: effectiveGasRows.map(({ _key, ...row }) => row),
            });
            onHide();
        } catch (err: any) {
            setServerError(err?.response?.data?.message || err?.message || 'No fue posible crear el punto de suministro.');
        } finally {
            setLoading(false);
        }
    };

    return (
        <Modal show={show} onHide={onHide} size="xl" centered backdrop="static">
            <Modal.Header closeButton className="modal-title text-white">
                <Modal.Title>Nuevo punto de suministro</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                {serverError && <Alert variant="danger">{serverError}</Alert>}
                {loadingCatalogs && <Alert variant="info">Cargando catálogos...</Alert>}
                <Form onSubmit={handleSubmit} autoComplete="off">
                    <Nav variant="tabs" className="mb-3">
                        <Nav.Item>
                            <Nav.Link active={activeTab === 'datos'} onClick={() => setActiveTab('datos')} style={{ cursor: 'pointer' }}>
                                Datos del punto
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item>
                            <Nav.Link active={activeTab === 'electrico'} onClick={() => setActiveTab('electrico')} style={{ cursor: 'pointer' }}>
                                CUPS Eléctricos ({cupsEle.length})
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item>
                            <Nav.Link active={activeTab === 'gas'} onClick={() => setActiveTab('gas')} style={{ cursor: 'pointer' }}>
                                CUPS Gas ({cupsGas.length})
                            </Nav.Link>
                        </Nav.Item>
                    </Nav>

                    {activeTab === 'datos' && (
                        <>
                            <Row className="mb-3">
                                <Col md={4}>
                                    <Form.Group controlId="CodTipVia">
                                        <Form.Label>Tipo de vía</Form.Label>
                                        <Form.Select
                                            name="CodTipVia"
                                            value={form.CodTipVia}
                                            onChange={handleChange}
                                        >
                                            <option value="">Seleccione...</option>
                                            {tiposVia.map((tipo) => (
                                                <option key={tipo.CodTipVia} value={tipo.CodTipVia}>
                                                    {tipo.DesTipVia}
                                                </option>
                                            ))}
                                        </Form.Select>
                                    </Form.Group>
                                </Col>
                                <Col md={6}>
                                    <Form.Group controlId="NomViaPunSum">
                                        <Form.Label>Calle / Vía</Form.Label>
                                        <Form.Control
                                            type="text"
                                            name="NomViaPunSum"
                                            value={form.NomViaPunSum}
                                            onChange={handleChange}
                                            isInvalid={!!errors.NomViaPunSum}
                                            required
                                        />
                                        <Form.Control.Feedback type="invalid">{errors.NomViaPunSum}</Form.Control.Feedback>
                                    </Form.Group>
                                </Col>
                                <Col md={2}>
                                    <Form.Group controlId="NumViaPunSum">
                                        <Form.Label>Número</Form.Label>
                                        <Form.Control type="text" name="NumViaPunSum" value={form.NumViaPunSum} onChange={handleChange} />
                                    </Form.Group>
                                </Col>
                                <Col md={2}>
                                    <Form.Group controlId="EstPunSum">
                                        <Form.Label>Estado</Form.Label>
                                        <Form.Select name="EstPunSum" value={form.EstPunSum} onChange={handleChange}>
                                            <option value={1}>Activo</option>
                                            <option value={0}>Inactivo</option>
                                        </Form.Select>
                                    </Form.Group>
                                </Col>
                            </Row>

                            <Row className="mb-3">
                                <Col md={3}><Form.Group controlId="BloPunSum"><Form.Label>Bloque</Form.Label><Form.Control type="text" name="BloPunSum" value={form.BloPunSum} onChange={handleChange} maxLength={3} /></Form.Group></Col>
                                <Col md={3}><Form.Group controlId="EscPunSum"><Form.Label>Escalera</Form.Label><Form.Control type="text" name="EscPunSum" value={form.EscPunSum} onChange={handleChange} maxLength={3} /></Form.Group></Col>
                                <Col md={3}><Form.Group controlId="PlaPunSum"><Form.Label>Planta</Form.Label><Form.Control type="text" name="PlaPunSum" value={form.PlaPunSum} onChange={handleChange} maxLength={3} /></Form.Group></Col>
                                <Col md={3}><Form.Group controlId="PuePunSum"><Form.Label>Puerta</Form.Label><Form.Control type="text" name="PuePunSum" value={form.PuePunSum} onChange={handleChange} maxLength={3} /></Form.Group></Col>
                            </Row>

                            <Row className="mb-3">
                                <Col md={6}>
                                    <Form.Group controlId="CodProUI">
                                        <Form.Label>Provincia</Form.Label>
                                        <Form.Select value={codProUI} onChange={handleProvinciaChange} disabled={loadingCatalogs}>
                                            <option value="">Seleccione...</option>
                                            {provincias.map((prov) => (
                                                <option key={prov.CodPro} value={prov.CodPro}>
                                                    {prov.DesPro}
                                                </option>
                                            ))}
                                        </Form.Select>
                                    </Form.Group>
                                </Col>
                                <Col md={3}>
                                    <Form.Group controlId="CodLoc">
                                        <Form.Label>Localidad</Form.Label>
                                        <Form.Select
                                            name="CodLoc"
                                            value={form.CodLoc}
                                            onChange={handleLocalidadChange}
                                            disabled={!codProUI}
                                            isInvalid={!!errors.CodLoc}
                                        >
                                            <option value="">Seleccione...</option>
                                            {localidadesFiltradas.map((loc) => (
                                                <option key={loc.CodLoc} value={loc.CodLoc}>
                                                    {loc.DesLoc}
                                                </option>
                                            ))}
                                        </Form.Select>
                                        <Form.Control.Feedback type="invalid">{errors.CodLoc}</Form.Control.Feedback>
                                    </Form.Group>
                                </Col>
                                <Col md={3}>
                                    <Form.Group controlId="CPLocSoc">
                                        <Form.Label>Código Postal</Form.Label>
                                        <Form.Control type="text" name="CPLocSoc" value={form.CPLocSoc} readOnly disabled isInvalid={!!errors.CPLocSoc} />
                                    </Form.Group>
                                </Col>
                            </Row>

                            <Row className="mb-3">
                                <Col md={3}><Form.Group controlId="TelPunSum"><Form.Label>Teléfono</Form.Label><Form.Control type="text" name="TelPunSum" value={form.TelPunSum} onChange={handleChange} maxLength={9} /></Form.Group></Col>
                                <Col md={9}><Form.Group controlId="ObsPunSum"><Form.Label>Observaciones</Form.Label><Form.Control as="textarea" rows={2} name="ObsPunSum" value={form.ObsPunSum} onChange={handleChange} /></Form.Group></Col>
                            </Row>
                        </>
                    )}

                    {activeTab === 'electrico' && (
                        <>
                            <div className="d-flex justify-content-between align-items-center mb-2">
                                <h6 className="mb-0">CUPS Eléctricos</h6>
                                <Button size="sm" variant="primary" onClick={addEle}>
                                    <i className="ri-add-line me-1" />
                                    Añadir CUPS Eléctrico
                                </Button>
                            </div>
                            {!!errors.cups && <Alert variant="warning" className="py-2">{errors.cups}</Alert>}
                            <Table bordered responsive hover className="table-striped align-middle">
                                <thead>
                                    <tr>
                                        <th>CUPS</th>
                                        <th>Tarifa</th>
                                        <th>Consumo</th>
                                        <th>P1</th>
                                        <th>P2</th>
                                        <th>P3</th>
                                        <th>P4</th>
                                        <th>P5</th>
                                        <th>P6</th>
                                        <th>Estado</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {cupsEle.length === 0 && <tr><td colSpan={11} className="text-center text-muted">No hay CUPS eléctricos</td></tr>}
                                    {cupsEle.map((row) => {
                                        const isEdit = editEle.has(row._key);
                                        const view = isEdit ? (draftEle[row._key] || row) : row;
                                        const invalidCups = !!view.cups && !validateCups(String(view.cups));
                                        return (
                                            <tr key={row._key}>
                                                <td>{isEdit ? <Form.Control value={view.cups || ''} onChange={(e) => patchEleDraft(row._key, 'cups', e.target.value.toUpperCase())} isInvalid={invalidCups} /> : (view.cups || '-')}</td>
                                                <td>{isEdit ? (
                                                    <Form.Select value={(view.CodTarElec as any) || ''} onChange={(e) => patchEleDraft(row._key, 'CodTarElec', e.target.value)}>
                                                        <option value="">Seleccione</option>
                                                        {tarifasEle.map((t) => <option key={t.CodTarEle} value={t.CodTarEle}>{t.NomTarEle}</option>)}
                                                    </Form.Select>
                                                ) : (view.CodTarElec ? tarifasEle.find((t) => String(t.CodTarEle) === String(view.CodTarElec))?.NomTarEle || view.CodTarElec : '-')}</td>
                                                <td>{isEdit ? <Form.Control type="number" value={(view.conAnual as any) || ''} onChange={(e) => patchEleDraft(row._key, 'conAnual', e.target.value)} /> : (view.conAnual ?? '-')}</td>
                                                <td>{isEdit ? <Form.Control type="number" value={(view.potencia1 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia1', e.target.value)} /> : (view.potencia1 ?? '-')}</td>
                                                <td>{isEdit ? <Form.Control type="number" value={(view.potencia2 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia2', e.target.value)} /> : (view.potencia2 ?? '-')}</td>
                                                <td>{isEdit ? <Form.Control type="number" value={(view.potencia3 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia3', e.target.value)} /> : (view.potencia3 ?? '-')}</td>
                                                <td>{isEdit ? <Form.Control type="number" value={(view.potencia4 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia4', e.target.value)} /> : (view.potencia4 ?? '-')}</td>
                                                <td>{isEdit ? <Form.Control type="number" value={(view.potencia5 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia5', e.target.value)} /> : (view.potencia5 ?? '-')}</td>
                                                <td>{isEdit ? <Form.Control type="number" value={(view.potencia6 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia6', e.target.value)} /> : (view.potencia6 ?? '-')}</td>
                                                <td>{isEdit ? <Form.Select value={(view.estado as any) ?? 1} onChange={(e) => patchEleDraft(row._key, 'estado', Number(e.target.value))}><option value={1}>Activo</option><option value={0}>Inactivo</option></Form.Select> : <Badge bg={(Number(view.estado) || 1) === 1 ? 'success' : 'secondary'}>{(Number(view.estado) || 1) === 1 ? 'Activo' : 'Inactivo'}</Badge>}</td>
                                                <td className="text-nowrap">
                                                    {isEdit ? (
                                                        <>
                                                            <Button size="sm" variant="success" className="me-1" onClick={() => saveEditEle(row)}><i className="ri-check-line" /></Button>
                                                            <Button size="sm" variant="secondary" onClick={() => cancelEditEle(row)}><i className="ri-close-line" /></Button>
                                                        </>
                                                    ) : (
                                                        <>
                                                            <Button size="sm" variant="warning" className="me-1" onClick={() => startEditEle(row)}><i className="ri-edit-line" /></Button>
                                                            <Button size="sm" variant="danger" onClick={() => removeEle(row)}><i className="ri-delete-bin-line" /></Button>
                                                        </>
                                                    )}
                                                </td>
                                            </tr>
                                        );
                                    })}
                                </tbody>
                            </Table>
                        </>
                    )}

                    {activeTab === 'gas' && (
                        <>
                            <div className="d-flex justify-content-between align-items-center mb-2">
                                <h6 className="mb-0">CUPS Gas</h6>
                                <Button size="sm" variant="primary" onClick={addGas}>
                                    <i className="ri-add-line me-1" />
                                    Añadir CUPS Gas
                                </Button>
                            </div>
                            {!!errors.cups && <Alert variant="warning" className="py-2">{errors.cups}</Alert>}
                            <Table bordered responsive hover className="table-striped align-middle">
                                <thead>
                                    <tr>
                                        <th>CUPS</th>
                                        <th>Tarifa</th>
                                        <th>Consumo</th>
                                        <th>Caudal diario</th>
                                        <th>Estado</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {cupsGas.length === 0 && <tr><td colSpan={6} className="text-center text-muted">No hay CUPS de gas</td></tr>}
                                    {cupsGas.map((row) => {
                                        const isEdit = editGas.has(row._key);
                                        const view = isEdit ? (draftGas[row._key] || row) : row;
                                        const invalidCups = !!view.cups && !validateCups(String(view.cups));
                                        return (
                                            <tr key={row._key}>
                                                <td>{isEdit ? <Form.Control value={view.cups || ''} onChange={(e) => patchGasDraft(row._key, 'cups', e.target.value.toUpperCase())} isInvalid={invalidCups} /> : (view.cups || '-')}</td>
                                                <td>{isEdit ? (
                                                    <Form.Select value={(view.CodTarGas as any) || ''} onChange={(e) => patchGasDraft(row._key, 'CodTarGas', e.target.value)}>
                                                        <option value="">Seleccione</option>
                                                        {tarifasGas.map((t) => <option key={t.CodTarGas} value={t.CodTarGas}>{t.NomTarGas}</option>)}
                                                    </Form.Select>
                                                ) : (view.CodTarGas ? tarifasGas.find((t) => String(t.CodTarGas) === String(view.CodTarGas))?.NomTarGas || view.CodTarGas : '-')}</td>
                                                <td>{isEdit ? <Form.Control type="number" value={(view.conAnual as any) || ''} onChange={(e) => patchGasDraft(row._key, 'conAnual', e.target.value)} /> : (view.conAnual ?? '-')}</td>
                                                <td>{isEdit ? <Form.Control type="number" value={(view.caudal_diario as any) || ''} onChange={(e) => patchGasDraft(row._key, 'caudal_diario', e.target.value)} /> : (view.caudal_diario ?? '-')}</td>
                                                <td>{isEdit ? <Form.Select value={(view.estado as any) ?? 1} onChange={(e) => patchGasDraft(row._key, 'estado', Number(e.target.value))}><option value={1}>Activo</option><option value={0}>Inactivo</option></Form.Select> : <Badge bg={(Number(view.estado) || 1) === 1 ? 'success' : 'secondary'}>{(Number(view.estado) || 1) === 1 ? 'Activo' : 'Inactivo'}</Badge>}</td>
                                                <td className="text-nowrap">
                                                    {isEdit ? (
                                                        <>
                                                            <Button size="sm" variant="success" className="me-1" onClick={() => saveEditGas(row)}><i className="ri-check-line" /></Button>
                                                            <Button size="sm" variant="secondary" onClick={() => cancelEditGas(row)}><i className="ri-close-line" /></Button>
                                                        </>
                                                    ) : (
                                                        <>
                                                            <Button size="sm" variant="warning" className="me-1" onClick={() => startEditGas(row)}><i className="ri-edit-line" /></Button>
                                                            <Button size="sm" variant="danger" onClick={() => removeGas(row)}><i className="ri-delete-bin-line" /></Button>
                                                        </>
                                                    )}
                                                </td>
                                            </tr>
                                        );
                                    })}
                                </tbody>
                            </Table>
                        </>
                    )}

                    <div className="d-flex justify-content-end mt-4">
                        <Button variant="secondary" onClick={onHide} className="me-2">
                            Cancelar
                        </Button>
                        <Button type="submit" variant="primary" disabled={loading}>
                            Guardar cambios
                        </Button>
                    </div>
                </Form>
            </Modal.Body>
        </Modal>
    );
};

export default CrearPuntoSuministroModal;