import React, { useEffect, useMemo, useState } from "react";
import { Modal, Form, Row, Col, Alert, Table } 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";
import { MapPin, Zap, Flame, Plus, Trash2, Edit3, Check, X, Building2 } from "lucide-react";
import "../Dashboard.css";
import { formatAdvertenciaPropuestasHtml } from "../../../../utils/advertenciaPropuestasFormatter";

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);
      setLoading(false);
      hideLoading();
      onHide();
      if (onUpdated) onUpdated((response?.data?.data || form) as PuntoSuministro);

      const advertencia = response?.data?.advertencia_propuestas;

      if (advertencia) {
        await Swal.fire({
          title: "Actualizado con advertencia",
          html: formatAdvertenciaPropuestasHtml(advertencia),
          icon: "warning",
          confirmButtonText: "Entendido",
          confirmButtonColor: "#2563eb",
        });
      } else {
        await Swal.fire({
          title: "Actualizado",
          text: "Punto de suministro actualizado correctamente.",
          icon: "success",
          timer: 1800,
          showConfirmButton: false
        });
      }
    } catch (error: any) {
      setLoading(false);
      hideLoading();
      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"
      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">Editar Punto de Suministro</div>
            <span className="saas-modal-subtitle">
              Punto #{form.CodPunSum || punto?.CodPunSum || ""} • Ubicación y configuración técnica de suministro
            </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>}
          {isLoadingAux && <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}
                    >
                      <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={(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" 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 ?? 1}
                      onChange={handleChange}
                    >
                      <option value={1}>Activo</option>
                      <option value={0}>Inactivo / Suspendido</option>
                    </Form.Select>
                  </Form.Group>
                </Col>
                <Col md={4}>
                  <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>
                <Col md={5}>
                  <Form.Group controlId="RefCasPunSum" className="saas-form-group mb-0">
                    <Form.Label className="saas-form-label">Referencia Catastral</Form.Label>
                    <Form.Control
                      type="text"
                      name="RefCasPunSum"
                      className="saas-form-control font-monospace"
                      value={form.RefCasPunSum || ""}
                      onChange={handleChange}
                      maxLength={20}
                      placeholder="Ej. 1234567AB1234C"
                    />
                  </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 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 py-4">
                          No hay CUPS eléctricos registrados en este punto
                        </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} saas-form-control`}
                                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} 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 className={styles.colConsumo}>
                            {isEdit ? (
                              <Form.Control
                                className={`${styles.inputCelda} ${styles.inputNumerico} saas-form-control`}
                                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} saas-form-control`}
                                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} saas-form-control`}
                                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} saas-form-control`}
                                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} saas-form-control`}
                                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} saas-form-control`}
                                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} saas-form-control`}
                                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} 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={`${styles.colAcciones} 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 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 py-4">
                          No hay CUPS de gas registrados en este punto
                        </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} saas-form-control`}
                                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} 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 className={styles.colConsumo}>
                            {isEdit ? (
                              <Form.Control
                                className={`${styles.inputCelda} ${styles.inputNumerico} saas-form-control`}
                                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} saas-form-control`}
                                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} 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={`${styles.colAcciones} 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>Guardar cambios</span>
              </>
            )}
          </button>
        </div>
      </Form>
    </Modal>
  );
};

export default EditarPuntoSuministroModal;