import React, { useEffect, useMemo, useState } from "react";
import { Modal, Button, Form, Row, Col, Alert, Nav, Table, Badge } from "react-bootstrap";
import Swal from "sweetalert2";
import { router } from "@inertiajs/react";
import axios from "axios";
import { PuntoSuministro } from "../../../../interfaces";
import { useLoading } from "../../../../LoadingContext";
import { getProvinciaConLocalidades, getProvincias } from "../../../../services/dataService";
import { buscarTarifasElectricas, buscarTarifasGas } from "../../Funciones/apiServices";
import styles from "../../PuntosSuministro/CupsTablaInline.module.css";

interface EditarPuntoSuministroModalProps {
  show: boolean;
  onHide: () => void;
  punto: PuntoSuministro;
  onUpdated?: (updated: PuntoSuministro) => void;
}

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

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

type CupsEleRow = {
  _key: string;
  CodCupsEle?: number;
  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;
  CodCupGas?: number;
  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 normalizeValidationErrors = (err: any): Record<string, string> => {
  if (!err || typeof err !== "object") return {};
  const parsed: Record<string, string> = {};
  Object.entries(err).forEach(([k, v]) => {
    if (Array.isArray(v)) {
      parsed[k] = String(v[0] || "");
      return;
    }
    parsed[k] = String(v || "");
  });
  return parsed;
};

const mapInitialEle = (m: any): CupsEleRow => ({
  _key: `ele-${m.CodCupsEle ?? Math.random().toString(36).slice(2)}`,
  CodCupsEle: m.CodCupsEle,
  cups: m.CUPsEle || m.cups,
  CodTarElec: m.CodTarElec,
  conAnual: m.ConAnuCup ?? m.conAnual,
  potencia1: m.PotConP1 ?? m.potencia1,
  potencia2: m.PotConP2 ?? m.potencia2,
  potencia3: m.PotConP3 ?? m.potencia3,
  potencia4: m.PotConP4 ?? m.potencia4,
  potencia5: m.PotConP5 ?? m.potencia5,
  potencia6: m.PotConP6 ?? m.potencia6,
  estado: m.EstCUPs ?? m.estado ?? 1,
});

const mapInitialGas = (m: any): CupsGasRow => ({
  _key: `gas-${m.CodCupGas ?? Math.random().toString(36).slice(2)}`,
  CodCupGas: m.CodCupGas,
  cups: m.CupsGas || m.cups,
  CodTarGas: m.CodTarGas,
  conAnual: m.ConAnuCup ?? m.conAnual,
  caudal_diario: m.caudaldiario ?? m.caudal_diario,
  estado: m.EstCUPs ?? m.estado ?? 1,
});

const toNullableString = (value: any): string | null => {
  if (value === undefined || value === null || value === "") return null;
  return String(value);
};

const EditarPuntoSuministroModal: React.FC<EditarPuntoSuministroModalProps> = ({ show, onHide, punto, onUpdated }) => {
  const [form, setForm] = useState<Partial<PuntoSuministro>>({});
  const [activeTab, setActiveTab] = useState<"datos" | "electrico" | "gas">("datos");
  const [loading, setLoading] = useState(false);
  const [isLoadingAux, setIsLoadingAux] = useState(false);
  const [errors, setErrors] = useState<{ [key: string]: string }>({});
  const [serverError, setServerError] = useState<string>("");
  const [provincias, setProvincias] = useState<ProvinciaOption[]>([]);
  const [codProUI, setCodProUI] = useState<number | "">("");
  const [localidades, setLocalidades] = useState<LocalidadOption[]>([]);
  const [tiposVia, setTiposVia] = useState<TipoViaOption[]>([]);
  const [tarifasEle, setTarifasEle] = useState<TarifaElectricaOption[]>([]);
  const [tarifasGas, setTarifasGas] = useState<TarifaGasOption[]>([]);

  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>>({});

  const { showLoading, hideLoading } = useLoading();

  useEffect(() => {
    const ele = ((punto as any)?.cups_electrico || (punto as any)?.cupsElectrico || []).map(mapInitialEle);
    const gas = ((punto as any)?.cups_gas || (punto as any)?.cupsGas || []).map(mapInitialGas);
    setForm({
      ...punto,
      CPLocSoc: (punto as any)?.localidad?.CPLoc ?? (punto as any)?.CPLocSoc ?? "",
    });
    setCupsEle(ele);
    setCupsGas(gas);
    setEditEle(new Set());
    setEditGas(new Set());
    setDraftEle({});
    setDraftGas({});
    setActiveTab("datos");
    setCodProUI((punto as any)?.localidad?.provincia?.CodPro ?? "");
    setLocalidades(
      (punto as any)?.localidad
        ? [{
            CodLoc: Number((punto as any).localidad.CodLoc),
            DesLoc: (punto as any).localidad.DesLoc,
            CPLoc: (punto as any).localidad.CPLoc ?? (punto as any).CPLocSoc ?? "",
            provincia: (punto as any).localidad.provincia,
          }]
        : []
    );
  }, [punto, show]);

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

  useEffect(() => {
    if (!codProUI) {
      setLocalidades([]);
      return;
    }
    const loadLocalidades = async () => {
      try {
        const response = await getProvinciaConLocalidades(Number(codProUI));
        setLocalidades((response?.data?.localidades || []) as LocalidadOption[]);
      } catch {
        setLocalidades([]);
      }
    };
    loadLocalidades();
  }, [codProUI]);

  useEffect(() => {
    const codLocActual = Number(form.CodLoc || 0);
    if (!codLocActual || !localidades.length) return;
    const selected = localidades.find((loc) => Number(loc.CodLoc) === codLocActual);
    if (!selected) return;

    setForm((prev) => ({
      ...prev,
      CPLocSoc: selected.CPLoc ?? prev.CPLocSoc,
    }));
  }, [form.CodLoc, localidades]);

  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]: "" }));
  };

  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 setLocalidadByCodLoc = (codLoc: string | number) => {
    const loc = localidades.find((item) => Number(item.CodLoc) === Number(codLoc));
    setForm((prev) => ({
      ...prev,
      CodLoc: loc?.CodLoc ?? undefined,
      CPLocSoc: loc ? loc.CPLoc : "",
    }) as Partial<PuntoSuministro>);
    setErrors((prev) => ({ ...prev, CodLoc: "", CPLocSoc: "" }));
  };

  const handleProvinciaChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const next = e.target.value ? Number(e.target.value) : "";
    setCodProUI(next);
    setForm((prev) => ({
      ...prev,
      CodLoc: undefined,
      CPLocSoc: "",
    }) as Partial<PuntoSuministro>);
    setErrors((prev) => ({ ...prev, CodLoc: "", CPLocSoc: "" }));
  };

  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 n = new Set(prev);
      n.delete(row._key);
      return n;
    });
    setDraftEle((prev) => {
      const n = { ...prev };
      delete n[row._key];
      return n;
    });
  };

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

  const cancelEditEle = (row: CupsEleRow) => {
    if (!row.CodCupsEle) {
      setCupsEle((prev) => prev.filter((r) => r._key !== row._key));
    }
    setEditEle((prev) => {
      const n = new Set(prev);
      n.delete(row._key);
      return n;
    });
    setDraftEle((prev) => {
      const n = { ...prev };
      delete n[row._key];
      return n;
    });
  };

  const cancelEditGas = (row: CupsGasRow) => {
    if (!row.CodCupGas) {
      setCupsGas((prev) => prev.filter((r) => r._key !== row._key));
    }
    setEditGas((prev) => {
      const n = new Set(prev);
      n.delete(row._key);
      return n;
    });
    setDraftGas((prev) => {
      const n = { ...prev };
      delete n[row._key];
      return n;
    });
  };

  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) => {
    if (!row.CodCupsEle || !form.CodPunSum) {
      setCupsEle((prev) => prev.filter((r) => r._key !== row._key));
      return;
    }
    const res = await Swal.fire({
      title: "Eliminar CUPS",
      text: "¿Deseas eliminar este CUPS eléctrico?",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Sí, eliminar",
      cancelButtonText: "Cancelar",
    });
    if (!res.isConfirmed) return;
    await axios.delete(route("puntos-suministro.cups-electrico.destroy", { punto: form.CodPunSum, cups: row.CodCupsEle }) as string);
    setCupsEle((prev) => prev.filter((r) => r._key !== row._key));
    await Swal.fire({ title: "Eliminado", icon: "success", timer: 1200, showConfirmButton: false });
  };

  const removeGas = async (row: CupsGasRow) => {
    if (!row.CodCupGas || !form.CodPunSum) {
      setCupsGas((prev) => prev.filter((r) => r._key !== row._key));
      return;
    }
    const res = await Swal.fire({
      title: "Eliminar CUPS",
      text: "¿Deseas eliminar este CUPS de gas?",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Sí, eliminar",
      cancelButtonText: "Cancelar",
    });
    if (!res.isConfirmed) return;
    await axios.delete(route("puntos-suministro.cups-gas.destroy", { punto: form.CodPunSum, cups: row.CodCupGas }) as string);
    setCupsGas((prev) => prev.filter((r) => r._key !== row._key));
    await Swal.fire({ title: "Eliminado", icon: "success", timer: 1200, showConfirmButton: false });
  };

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

    const newErrors: { [key: string]: string } = {};
    if (!form.NomViaPunSum) newErrors.NomViaPunSum = "La calle/vía es obligatoria.";
    if (!form.CodLoc) newErrors.CodLoc = "El código de localidad es obligatorio.";
    if (!form.CodCli) newErrors.CodCli = "El cliente es obligatorio.";

    const invalidEle = effectiveEleRows.filter((row) => row.cups && !validateCups(row.cups));
    const invalidGas = effectiveGasRows.filter((row) => row.cups && !validateCups(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);
      if (newErrors.CodLoc || newErrors.NomViaPunSum || newErrors.CodCli) setActiveTab("datos");
      if (newErrors.cups) setActiveTab((invalidEle.length ? "electrico" : "gas"));
      return;
    }

    const confirm = await Swal.fire({
      title: "¿Guardar cambios?",
      text: "¿Deseas actualizar el punto de suministro?",
      icon: "question",
      showCancelButton: true,
      confirmButtonText: "Sí, guardar",
      cancelButtonText: "Cancelar"
    });
    if (!confirm.isConfirmed) return;

    setLoading(true);
    showLoading();

    const payload: Record<string, any> = {
      CodCli: form.CodCli,
      TipRegDir: toNullableString(form.TipRegDir),
      CodTipVia: form.CodTipVia ?? null,
      NomViaPunSum: form.NomViaPunSum ?? "",
      NumViaPunSum: form.NumViaPunSum ?? "",
      BloPunSum: form.BloPunSum ?? "",
      EscPunSum: form.EscPunSum ?? "",
      PlaPunSum: form.PlaPunSum ?? "",
      PuePunSum: form.PuePunSum ?? "",
      CodLoc: form.CodLoc,
      CPLocSoc: form.CPLocSoc ?? "",
      TelPunSum: form.TelPunSum ?? "",
      CodTipInm: form.CodTipInm ?? null,
      RefCasPunSum: form.RefCasPunSum ?? "",
      DimPunSum: toNullableString(form.DimPunSum),
      ObsPunSum: form.ObsPunSum ?? "",
      EstPunSum: form.EstPunSum ?? 1,
      AclPunSum: form.AclPunSum ?? null,
      cupsElectrico: effectiveEleRows.map(({ _key, ...row }) => row),
      cupsGas: effectiveGasRows.map(({ _key, ...row }) => row),
    };

    try {
      const response = await axios.put(route("puntos-suministro.update", form.CodPunSum) as string, payload);
      await Swal.fire({
        title: "Actualizado",
        text: "Punto de suministro actualizado correctamente.",
        icon: "success",
        timer: 1800,
        showConfirmButton: false
      });
      if (onUpdated) onUpdated((response?.data?.data || form) as PuntoSuministro);
      onHide();
    } catch (error: any) {
      const backendErrors = normalizeValidationErrors(error?.response?.data?.errors || error?.response?.data || {});
      setErrors(backendErrors);
      setServerError("Error al actualizar. Revise los campos.");
    } finally {
      setLoading(false);
      hideLoading();
    }
  };

  return (
    <Modal show={show} onHide={onHide} size="xl" centered backdrop="static">
      <Modal.Header closeButton className="modal-title text-white">
        <Modal.Title>Editar Punto de Suministro</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {serverError && <Alert variant="danger">{serverError}</Alert>}
        {isLoadingAux && <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 ?? 1} 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}>
                      <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={(e) => setLocalidadByCodLoc(e.target.value)}
                      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>}
              <div className={styles.contenedorTablaCups}>
              <Table bordered hover className={`table-striped align-middle ${styles.tablaCups} ${styles.tablaCupsElectrico}`}>
                <thead>
                  <tr>
                    <th className={styles.colCups}>CUPS</th>
                    <th className={styles.colTarifa}>Tarifa</th>
                    <th className={styles.colConsumo}>Consumo</th>
                    <th className={styles.colPotencia}>P1</th>
                    <th className={styles.colPotencia}>P2</th>
                    <th className={styles.colPotencia}>P3</th>
                    <th className={styles.colPotencia}>P4</th>
                    <th className={styles.colPotencia}>P5</th>
                    <th className={styles.colPotencia}>P6</th>
                    <th className={styles.colEstado}>Estado</th>
                    <th className={styles.colAcciones}>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 className={styles.colCups}>{isEdit ? <Form.Control className={styles.inputCups} value={view.cups || ""} onChange={(e) => patchEleDraft(row._key, "cups", e.target.value.toUpperCase())} isInvalid={invalidCups} /> : <span className={styles.celdaCups}>{view.cups || "-"}</span>}</td>
                        <td className={styles.colTarifa}>{isEdit ? (
                          <Form.Select className={styles.inputCelda} 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 className={styles.colConsumo}>{isEdit ? <Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={view.conAnual as any || ""} onChange={(e) => patchEleDraft(row._key, "conAnual", e.target.value)} /> : <span className={styles.valorNumerico}>{view.conAnual ?? "-"}</span>}</td>
                        <td className={styles.colPotencia}>{isEdit ? <Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={view.potencia1 as any || ""} onChange={(e) => patchEleDraft(row._key, "potencia1", e.target.value)} /> : <span className={styles.valorNumerico}>{view.potencia1 ?? "-"}</span>}</td>
                        <td className={styles.colPotencia}>{isEdit ? <Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={view.potencia2 as any || ""} onChange={(e) => patchEleDraft(row._key, "potencia2", e.target.value)} /> : <span className={styles.valorNumerico}>{view.potencia2 ?? "-"}</span>}</td>
                        <td className={styles.colPotencia}>{isEdit ? <Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={view.potencia3 as any || ""} onChange={(e) => patchEleDraft(row._key, "potencia3", e.target.value)} /> : <span className={styles.valorNumerico}>{view.potencia3 ?? "-"}</span>}</td>
                        <td className={styles.colPotencia}>{isEdit ? <Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={view.potencia4 as any || ""} onChange={(e) => patchEleDraft(row._key, "potencia4", e.target.value)} /> : <span className={styles.valorNumerico}>{view.potencia4 ?? "-"}</span>}</td>
                        <td className={styles.colPotencia}>{isEdit ? <Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={view.potencia5 as any || ""} onChange={(e) => patchEleDraft(row._key, "potencia5", e.target.value)} /> : <span className={styles.valorNumerico}>{view.potencia5 ?? "-"}</span>}</td>
                        <td className={styles.colPotencia}>{isEdit ? <Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={view.potencia6 as any || ""} onChange={(e) => patchEleDraft(row._key, "potencia6", e.target.value)} /> : <span className={styles.valorNumerico}>{view.potencia6 ?? "-"}</span>}</td>
                        <td className={styles.colEstado}>{isEdit ? <Form.Select className={styles.inputCelda} 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={`${styles.colAcciones} 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>
              </div>
            </>
          )}

          {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>}
              <div className={styles.contenedorTablaCups}>
              <Table bordered hover className={`table-striped align-middle ${styles.tablaCups} ${styles.tablaCupsGas}`}>
                <thead>
                  <tr>
                    <th className={styles.colCups}>CUPS</th>
                    <th className={styles.colTarifa}>Tarifa</th>
                    <th className={styles.colConsumo}>Consumo</th>
                    <th className={styles.colCaudal}>Caudal diario</th>
                    <th className={styles.colEstado}>Estado</th>
                    <th className={styles.colAcciones}>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 className={styles.colCups}>{isEdit ? <Form.Control className={styles.inputCups} value={view.cups || ""} onChange={(e) => patchGasDraft(row._key, "cups", e.target.value.toUpperCase())} isInvalid={invalidCups} /> : <span className={styles.celdaCups}>{view.cups || "-"}</span>}</td>
                        <td className={styles.colTarifa}>{isEdit ? (
                          <Form.Select className={styles.inputCelda} 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 className={styles.colConsumo}>{isEdit ? <Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={view.conAnual as any || ""} onChange={(e) => patchGasDraft(row._key, "conAnual", e.target.value)} /> : <span className={styles.valorNumerico}>{view.conAnual ?? "-"}</span>}</td>
                        <td className={styles.colCaudal}>{isEdit ? <Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={view.caudal_diario as any || ""} onChange={(e) => patchGasDraft(row._key, "caudal_diario", e.target.value)} /> : <span className={styles.valorNumerico}>{view.caudal_diario ?? "-"}</span>}</td>
                        <td className={styles.colEstado}>{isEdit ? <Form.Select className={styles.inputCelda} 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={`${styles.colAcciones} 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>
            </>
          )}
  
          <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 EditarPuntoSuministroModal;