import React, { useEffect, useMemo, useState } from 'react';
import { Alert, Col, Form, Modal, Row, Table } from 'react-bootstrap';
import { MapPin, Zap, Flame, Plus, Trash2, Edit3, Check, X } from 'lucide-react';
import '../Dashboard.css';
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"
            dialogClassName="saas-modal-dialog"
            contentClassName="saas-modal-content"
        >
            <div className="saas-modal-header">
                <div className="d-flex align-items-center gap-2.5">
                    <div className="saas-icon-badge indigo">
                        <MapPin size={18} />
                    </div>
                    <div>
                        <div className="saas-modal-title">Nuevo punto de suministro</div>
                        <span className="saas-modal-subtitle">
                            Registra un nuevo punto de suministro y configura sus códigos CUPS
                        </span>
                    </div>
                </div>
                <button
                    type="button"
                    className="saas-modal-close-btn"
                    onClick={onHide}
                    title="Cerrar modal"
                    aria-label="Cerrar modal"
                >
                    <X size={16} />
                </button>
            </div>

            <Form onSubmit={handleSubmit} autoComplete="off">
                <Modal.Body className="saas-modal-body">
                    {serverError && <Alert variant="danger" className="py-2 mb-3">{serverError}</Alert>}
                    {loadingCatalogs && <Alert variant="info" className="py-2 mb-3">Cargando catálogos...</Alert>}

                    {/* Segmented Tabs SaaS */}
                    <div className="saas-modal-tabs">
                        <button
                            type="button"
                            className={`saas-modal-tab ${activeTab === 'datos' ? 'active' : ''}`}
                            onClick={() => setActiveTab('datos')}
                        >
                            <MapPin size={14} />
                            <span>Datos del punto</span>
                        </button>
                        <button
                            type="button"
                            className={`saas-modal-tab ${activeTab === 'electrico' ? 'active' : ''}`}
                            onClick={() => setActiveTab('electrico')}
                        >
                            <Zap size={14} style={{ color: '#d97706' }} />
                            <span>CUPS Eléctricos</span>
                            <span className="saas-modal-tab-badge">
                                {cupsEle.length}
                            </span>
                        </button>
                        <button
                            type="button"
                            className={`saas-modal-tab ${activeTab === 'gas' ? 'active' : ''}`}
                            onClick={() => setActiveTab('gas')}
                        >
                            <Flame size={14} style={{ color: '#e11d48' }} />
                            <span>CUPS Gas</span>
                            <span className="saas-modal-tab-badge">
                                {cupsGas.length}
                            </span>
                        </button>
                    </div>

                    {activeTab === 'datos' && (
                        <div className="saas-section-box mb-0">
                            <Row className="g-3 mb-3">
                                <Col md={3}>
                                    <Form.Group controlId="CodTipVia" className="saas-form-group mb-0">
                                        <Form.Label className="saas-form-label">Tipo de vía</Form.Label>
                                        <Form.Select
                                            name="CodTipVia"
                                            className="saas-form-select"
                                            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={7}>
                                    <Form.Group controlId="NomViaPunSum" className="saas-form-group mb-0">
                                        <Form.Label className="saas-form-label">Calle / Vía *</Form.Label>
                                        <Form.Control
                                            type="text"
                                            name="NomViaPunSum"
                                            className="saas-form-control"
                                            value={form.NomViaPunSum}
                                            onChange={handleChange}
                                            isInvalid={!!errors.NomViaPunSum}
                                            required
                                            maxLength={100}
                                        />
                                        <Form.Control.Feedback type="invalid">{errors.NomViaPunSum}</Form.Control.Feedback>
                                    </Form.Group>
                                </Col>
                                <Col md={2}>
                                    <Form.Group controlId="NumViaPunSum" className="saas-form-group mb-0">
                                        <Form.Label className="saas-form-label">Número</Form.Label>
                                        <Form.Control
                                            type="text"
                                            name="NumViaPunSum"
                                            className="saas-form-control"
                                            value={form.NumViaPunSum}
                                            onChange={handleChange}
                                        />
                                    </Form.Group>
                                </Col>
                            </Row>

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

                            <Row className="g-3 mb-3">
                                <Col md={5}>
                                    <Form.Group controlId="CodProUI" className="saas-form-group mb-0">
                                        <Form.Label className="saas-form-label">Provincia</Form.Label>
                                        <Form.Select
                                            value={codProUI}
                                            className="saas-form-select"
                                            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={4}>
                                    <Form.Group controlId="CodLoc" className="saas-form-group mb-0">
                                        <Form.Label className="saas-form-label">Localidad *</Form.Label>
                                        <Form.Select
                                            name="CodLoc"
                                            className="saas-form-select"
                                            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" className="saas-form-group mb-0">
                                        <Form.Label className="saas-form-label">Código Postal</Form.Label>
                                        <Form.Control
                                            type="text"
                                            name="CPLocSoc"
                                            className="saas-form-control font-monospace"
                                            value={form.CPLocSoc}
                                            readOnly
                                            disabled
                                            isInvalid={!!errors.CPLocSoc}
                                        />
                                    </Form.Group>
                                </Col>
                            </Row>

                            <Row className="g-3 mb-3">
                                <Col md={3}>
                                    <Form.Group controlId="EstPunSum" className="saas-form-group mb-0">
                                        <Form.Label className="saas-form-label">Estado</Form.Label>
                                        <Form.Select
                                            name="EstPunSum"
                                            className="saas-form-select"
                                            value={form.EstPunSum}
                                            onChange={handleChange}
                                        >
                                            <option value={1}>Activo</option>
                                            <option value={0}>Inactivo / Suspendido</option>
                                        </Form.Select>
                                    </Form.Group>
                                </Col>
                                <Col md={9}>
                                    <Form.Group controlId="TelPunSum" className="saas-form-group mb-0">
                                        <Form.Label className="saas-form-label">Teléfono de contacto</Form.Label>
                                        <Form.Control
                                            type="text"
                                            name="TelPunSum"
                                            className="saas-form-control"
                                            value={form.TelPunSum}
                                            onChange={handleChange}
                                            maxLength={9}
                                            placeholder="Ej. 910000000"
                                        />
                                    </Form.Group>
                                </Col>
                            </Row>

                            <Row className="g-3">
                                <Col md={12}>
                                    <Form.Group controlId="ObsPunSum" className="saas-form-group mb-0">
                                        <Form.Label className="saas-form-label">Observaciones</Form.Label>
                                        <Form.Control
                                            as="textarea"
                                            rows={2}
                                            maxLength={200}
                                            name="ObsPunSum"
                                            className="saas-form-control"
                                            value={form.ObsPunSum}
                                            onChange={handleChange}
                                            placeholder="Notas adicionales sobre el punto de suministro..."
                                        />
                                    </Form.Group>
                                </Col>
                            </Row>
                        </div>
                    )}

                    {activeTab === 'electrico' && (
                        <div className="saas-section-box mb-0">
                            <div className="d-flex justify-content-between align-items-center mb-3">
                                <div className="d-flex align-items-center gap-2">
                                    <div className="saas-icon-badge primary" style={{ width: 28, height: 28 }}>
                                        <Zap size={14} style={{ color: '#d97706' }} />
                                    </div>
                                    <div>
                                        <h6 className="mb-0" style={{ fontSize: '0.875rem', fontWeight: 700, color: '#0f172a' }}>
                                            CUPS Eléctricos Asociados
                                        </h6>
                                        <span style={{ fontSize: '0.72rem', color: '#64748b' }}>
                                            Configura las potencias y tarifa contratada
                                        </span>
                                    </div>
                                </div>
                                <button type="button" className="saas-btn-primary" onClick={addEle}>
                                    <Plus size={13} />
                                    <span>Añadir CUPS Eléctrico</span>
                                </button>
                            </div>
                            {!!errors.cups && <Alert variant="warning" className="py-2 mb-3">{errors.cups}</Alert>}
                            <div style={{ overflowX: 'auto' }}>
                                <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 py-4">
                                                    No hay CUPS eléctricos añadidos
                                                </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
                                                                className="saas-form-control font-monospace"
                                                                value={view.cups || ''}
                                                                onChange={(e) => patchEleDraft(row._key, 'cups', e.target.value.toUpperCase())}
                                                                isInvalid={invalidCups}
                                                            />
                                                        ) : (
                                                            <span className="font-monospace" style={{ fontSize: '0.8125rem' }}>{view.cups || '-'}</span>
                                                        )}
                                                    </td>
                                                    <td>
                                                        {isEdit ? (
                                                            <Form.Select
                                                                className="saas-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"
                                                                step="0.01"
                                                                className="saas-form-control"
                                                                value={(view.conAnual as any) || ''}
                                                                onChange={(e) => patchEleDraft(row._key, 'conAnual', e.target.value)}
                                                            />
                                                        ) : (
                                                            view.conAnual ?? '-'
                                                        )}
                                                    </td>
                                                    <td>{isEdit ? <Form.Control type="number" step="0.01" className="saas-form-control" value={(view.potencia1 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia1', e.target.value)} /> : (view.potencia1 ?? '-')}</td>
                                                    <td>{isEdit ? <Form.Control type="number" step="0.01" className="saas-form-control" value={(view.potencia2 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia2', e.target.value)} /> : (view.potencia2 ?? '-')}</td>
                                                    <td>{isEdit ? <Form.Control type="number" step="0.01" className="saas-form-control" value={(view.potencia3 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia3', e.target.value)} /> : (view.potencia3 ?? '-')}</td>
                                                    <td>{isEdit ? <Form.Control type="number" step="0.01" className="saas-form-control" value={(view.potencia4 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia4', e.target.value)} /> : (view.potencia4 ?? '-')}</td>
                                                    <td>{isEdit ? <Form.Control type="number" step="0.01" className="saas-form-control" value={(view.potencia5 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia5', e.target.value)} /> : (view.potencia5 ?? '-')}</td>
                                                    <td>{isEdit ? <Form.Control type="number" step="0.01" className="saas-form-control" value={(view.potencia6 as any) || ''} onChange={(e) => patchEleDraft(row._key, 'potencia6', e.target.value)} /> : (view.potencia6 ?? '-')}</td>
                                                    <td>
                                                        {isEdit ? (
                                                            <Form.Select
                                                                className="saas-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>
                                                        ) : (
                                                            <span className={`saas-badge-status ${(Number(view.estado) || 1) === 1 ? 'active' : 'suspended'}`}>
                                                                {(Number(view.estado) || 1) === 1 ? 'Activo' : 'Inactivo'}
                                                            </span>
                                                        )}
                                                    </td>
                                                    <td className="text-nowrap">
                                                        {isEdit ? (
                                                            <div className="d-flex align-items-center gap-1">
                                                                <button
                                                                    type="button"
                                                                    className="saas-action-btn-sm success"
                                                                    title="Guardar fila"
                                                                    onClick={() => saveEditEle(row)}
                                                                >
                                                                    <Check size={13} />
                                                                </button>
                                                                <button
                                                                    type="button"
                                                                    className="saas-action-btn-sm"
                                                                    title="Cancelar edición"
                                                                    onClick={() => cancelEditEle(row)}
                                                                >
                                                                    <X size={13} />
                                                                </button>
                                                            </div>
                                                        ) : (
                                                            <div className="d-flex align-items-center gap-1">
                                                                <button
                                                                    type="button"
                                                                    className="saas-action-btn-sm"
                                                                    title="Editar CUPS"
                                                                    onClick={() => startEditEle(row)}
                                                                >
                                                                    <Edit3 size={13} />
                                                                </button>
                                                                <button
                                                                    type="button"
                                                                    className="saas-action-btn-sm danger"
                                                                    title="Eliminar CUPS"
                                                                    onClick={() => removeEle(row)}
                                                                >
                                                                    <Trash2 size={13} />
                                                                </button>
                                                            </div>
                                                        )}
                                                    </td>
                                                </tr>
                                            );
                                        })}
                                    </tbody>
                                </Table>
                            </div>
                        </div>
                    )}

                    {activeTab === 'gas' && (
                        <div className="saas-section-box mb-0">
                            <div className="d-flex justify-content-between align-items-center mb-3">
                                <div className="d-flex align-items-center gap-2">
                                    <div className="saas-icon-badge rose" style={{ width: 28, height: 28 }}>
                                        <Flame size={14} style={{ color: '#e11d48' }} />
                                    </div>
                                    <div>
                                        <h6 className="mb-0" style={{ fontSize: '0.875rem', fontWeight: 700, color: '#0f172a' }}>
                                            CUPS Gas Asociados
                                        </h6>
                                        <span style={{ fontSize: '0.72rem', color: '#64748b' }}>
                                            Configura el caudal diario y tarifa de gas
                                        </span>
                                    </div>
                                </div>
                                <button type="button" className="saas-btn-primary" onClick={addGas}>
                                    <Plus size={13} />
                                    <span>Añadir CUPS Gas</span>
                                </button>
                            </div>
                            {!!errors.cups && <Alert variant="warning" className="py-2 mb-3">{errors.cups}</Alert>}
                            <div style={{ overflowX: 'auto' }}>
                                <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 py-4">
                                                    No hay CUPS de gas añadidos
                                                </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
                                                                className="saas-form-control font-monospace"
                                                                value={view.cups || ''}
                                                                onChange={(e) => patchGasDraft(row._key, 'cups', e.target.value.toUpperCase())}
                                                                isInvalid={invalidCups}
                                                            />
                                                        ) : (
                                                            <span className="font-monospace" style={{ fontSize: '0.8125rem' }}>{view.cups || '-'}</span>
                                                        )}
                                                    </td>
                                                    <td>
                                                        {isEdit ? (
                                                            <Form.Select
                                                                className="saas-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"
                                                                step="0.01"
                                                                className="saas-form-control"
                                                                value={(view.conAnual as any) || ''}
                                                                onChange={(e) => patchGasDraft(row._key, 'conAnual', e.target.value)}
                                                            />
                                                        ) : (
                                                            view.conAnual ?? '-'
                                                        )}
                                                    </td>
                                                    <td>
                                                        {isEdit ? (
                                                            <Form.Control
                                                                type="number"
                                                                step="0.01"
                                                                className="saas-form-control"
                                                                value={(view.caudal_diario as any) || ''}
                                                                onChange={(e) => patchGasDraft(row._key, 'caudal_diario', e.target.value)}
                                                            />
                                                        ) : (
                                                            view.caudal_diario ?? '-'
                                                        )}
                                                    </td>
                                                    <td>
                                                        {isEdit ? (
                                                            <Form.Select
                                                                className="saas-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>
                                                        ) : (
                                                            <span className={`saas-badge-status ${(Number(view.estado) || 1) === 1 ? 'active' : 'suspended'}`}>
                                                                {(Number(view.estado) || 1) === 1 ? 'Activo' : 'Inactivo'}
                                                            </span>
                                                        )}
                                                    </td>
                                                    <td className="text-nowrap">
                                                        {isEdit ? (
                                                            <div className="d-flex align-items-center gap-1">
                                                                <button
                                                                    type="button"
                                                                    className="saas-action-btn-sm success"
                                                                    title="Guardar fila"
                                                                    onClick={() => saveEditGas(row)}
                                                                >
                                                                    <Check size={13} />
                                                                </button>
                                                                <button
                                                                    type="button"
                                                                    className="saas-action-btn-sm"
                                                                    title="Cancelar edición"
                                                                    onClick={() => cancelEditGas(row)}
                                                                >
                                                                    <X size={13} />
                                                                </button>
                                                            </div>
                                                        ) : (
                                                            <div className="d-flex align-items-center gap-1">
                                                                <button
                                                                    type="button"
                                                                    className="saas-action-btn-sm"
                                                                    title="Editar CUPS"
                                                                    onClick={() => startEditGas(row)}
                                                                >
                                                                    <Edit3 size={13} />
                                                                </button>
                                                                <button
                                                                    type="button"
                                                                    className="saas-action-btn-sm danger"
                                                                    title="Eliminar CUPS"
                                                                    onClick={() => removeGas(row)}
                                                                >
                                                                    <Trash2 size={13} />
                                                                </button>
                                                            </div>
                                                        )}
                                                    </td>
                                                </tr>
                                            );
                                        })}
                                    </tbody>
                                </Table>
                            </div>
                        </div>
                    )}
                </Modal.Body>

                <div className="saas-modal-footer">
                    <button
                        type="button"
                        className="saas-btn-outline"
                        onClick={onHide}
                        disabled={loading}
                    >
                        Cancelar
                    </button>
                    <button
                        type="submit"
                        className="saas-btn-primary"
                        disabled={loading}
                    >
                        {loading ? (
                            <span>Guardando...</span>
                        ) : (
                            <>
                                <Check size={14} />
                                <span>Crear punto de suministro</span>
                            </>
                        )}
                    </button>
                </div>
            </Form>
        </Modal>    );
};

export default CrearPuntoSuministroModal;