import React, { useEffect, useState } from 'react';
import { Head, router, useForm, usePage } from '@inertiajs/react';
import Layout from '../../../Layouts';
import {
  Card,
  Col,
  Container,
  Form,
  Row,
  Button,
  InputGroup,
  Table,
  Badge,
} from 'react-bootstrap';
import BreadCrumb from '../../../Components/Common/BreadCrumb';
import Swal from 'sweetalert2';
import { Typeahead } from 'react-bootstrap-typeahead';
import { TarifaElectricaOption, TarifaGasOption, Cliente } from '../Contratos/Interfaces/Interfaces';
import { buscarTarifasElectricas, buscarTarifasGas } from '../Funciones/apiServices';
import { getClientes, getProvincias, getProvinciaConLocalidades, getLocalidad, refreshCupsElectricos, refreshCupsGas, refreshTarifasElectricas, refreshTarifasGas } from '../../../services/dataService';
import estilosFoco from '../Contratos/Shared/estilosFocoAccesible.module.css';
import styles from './CupsTablaInline.module.css';
import { programarEnfoqueCampoFormulario } from '../Contratos/utils/validacionFormulario';
import CupsHistorialTab from '../Cups/Shared/CupsHistorialTab';
import { invalidateHistorialCupsCache, useHistorialCups } from '../Cups/hooks/useHistorialCups';
import {
  EneonTabs,
  EneonTabsCard,
  EneonTabsCardBody,
  EneonTabsCardHeader,
  EneonTabPanel,
} from '../Shared/Tabs';
import CupsHistorialContextBar from './Shared/CupsHistorialContextBar';
import seccionStyles from './Shared/CupsPuntoSeccion.module.css';
import { Flame, Zap, History } from 'lucide-react';
import { useLoading } from '../../../LoadingContext';

type Localidad = {
  CPLoc: string;
  DesLoc: string;
  CodLoc: number;
};

type CupsEle = {
  _key: string;
  CodCupsEle?: number;
  cups?: string;
  CodTarElec?: number | string;
  nombreTarifa?: 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 CupsGas = {
  _key: string;
  CodCupGas?: number;
  cups?: string;
  CodTarGas?: number | string;
  nombreTarifa?: string;
  conAnual?: number | string;
  caudal_diario?: number | string;
  estado?: number | string;
};

const construirMapaTarifas = (
  opciones: Array<{ CodTarEle?: string | number; CodTarGas?: string | number; NomTarEle?: string; NomTarGas?: string }>,
  campoId: 'CodTarEle' | 'CodTarGas',
  campoNombre: 'NomTarEle' | 'NomTarGas',
): Record<number, string> =>
  opciones.reduce((acc, t) => {
    const id = Number(t[campoId]);
    if (!Number.isNaN(id)) {
      acc[id] = t[campoNombre] ?? String(id);
    }
    return acc;
  }, {} as Record<number, string>);

const resolverNombreTarifa = (
  codTarifa: number | string | null | undefined,
  mapa: Record<number, string>,
  nombreEmbebido?: string | null,
): string => {
  if (nombreEmbebido) {
    return nombreEmbebido;
  }
  if (codTarifa == null || codTarifa === '') {
    return '-';
  }
  const id = Number(codTarifa);
  if (!Number.isNaN(id) && mapa[id]) {
    return mapa[id];
  }
  return '-';
};

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

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

const norm = (r: any) => {
  if (!r) return { data: [] };
  if (r && r.data !== undefined) return r;
  return { data: r };
};

// Using shared `Cliente` interface from Interfaces.ts

const EditarPunto = () => {
  const { punto, tarifasElectrica: tarifasElectricaInertia, tarifasGas: tarifasGasInertia } = usePage<any>().props;
  const { showLoading, hideLoading } = useLoading();

  const [clientes, setClientes] = useState<Cliente[]>([]);
  const [tarifasElectrica, setTarifasElectrica] = useState<TarifaElectricaOption[]>([]);
  const [tarifasGas, setTarifasGas] = useState<TarifaGasOption[]>([]);
  const [loadingAuxData, setLoadingAuxData] = useState(true);

  // Opciones y dependientes
  const [provincias, setProvincias] = useState<any[]>([]);
  const [localidadesPorProvincia, setLocalidadesPorProvincia] = useState<any[]>([]);
  const [selectedProvinciaId, setSelectedProvinciaId] = useState<number | ''>('');
  
  const isCreate = !punto?.CodPunSum;
  const [tarifaOptions, setTarifaOptions] = useState<TarifaElectricaOption[]>(
    () => (Array.isArray(tarifasElectricaInertia) ? tarifasElectricaInertia : []),
  );
  const [tarifaGasOptions, setTarifaGasOptions] = useState<TarifaGasOption[]>(
    () => (Array.isArray(tarifasGasInertia) ? tarifasGasInertia : []),
  );

  const { data, setData, processing, errors, put, post } = useForm<any>({
    CodCli: punto?.CodCli || null,
    CodTipVia: punto?.CodTipVia || 0,
    NomViaPunSum: punto?.NomViaPunSum || '',
    NumViaPunSum: punto?.NumViaPunSum || '',
    BloPunSum: punto?.BloPunSum || '',
    EscPunSum: punto?.EscPunSum || '',
    PlaPunSum: punto?.PlaPunSum || '',
    PuePunSum: punto?.PuePunSum || '',
    CodLoc: punto?.CodLoc || null,
    CPLocSoc: punto?.CPLocSoc || '',
    TelPunSum: punto?.TelPunSum || '',
    CodTipInm: punto?.CodTipInm || 0,
    RefCasPunSum: punto?.RefCasPunSum || '',
    DimPunSum: punto?.DimPunSum || '',
    ObsPunSum: punto?.ObsPunSum || '',
    EstPunSum: punto?.EstPunSum ?? 1,
    direccionText: punto?.NomViaPunSum || '',
    localidadText: punto?.localidad?.DesLoc || '',
    provinciaText: punto?.localidad?.provincia?.DesPro || '',
    clienteText: punto?.cliente?.RazSocCli || '',
  });

  useEffect(() => {
    getProvincias()
      .then(res => setProvincias(res.data || []))
      .catch(() => {});

    // Reverse lookup in edit mode
    if (!isCreate && punto?.CodLoc) {
      getLocalidad(punto.CodLoc).then(res => {
         if (res.data?.provincia?.CodPro) {
            setSelectedProvinciaId(res.data.provincia.CodPro);
         }
      }).catch(() => {});
    }
  }, []);

  useEffect(() => {
    if (selectedProvinciaId) {
      getProvinciaConLocalidades(selectedProvinciaId as number)
        .then(res => {
          const locs = res.data?.localidades || [];
          setLocalidadesPorProvincia(locs);
          // If in edit mode and the locality is loaded, we make sure it acts correctly
          if (punto?.CodLoc && punto?.localidad?.provincia?.CodPro === selectedProvinciaId) {
            const loc = locs.find((l: any) => l.CodLoc === punto.CodLoc);
            if (loc) {
               setData((prev: any) => ({
                 ...prev,
                 CodLoc: loc.CodLoc,
                 CPLocSoc: loc.CPLoc
               }));
            }
          }
        })
        .catch(() => {});
    } else {
      setLocalidadesPorProvincia([]);
    }
  }, [selectedProvinciaId]);

  const [frontErrors, setFrontErrors] = useState<Record<string, string>>({});
  const [selectedCliente, setSelectedCliente] = useState<any[]>(punto?.cliente ? [punto.cliente] : []);
  const [isSearchingClientes, setIsSearchingClientes] = useState(false);
  const [cupsEle, setCupsEle] = useState<CupsEle[]>(() =>
    ((punto?.cups_electrico ?? punto?.cupsElectrico) || []).map(mapInitialEle)
  );
  const [cupsGas, setCupsGas] = useState<CupsGas[]>(() =>
    ((punto?.cups_gas ?? punto?.cupsGas) || []).map(mapInitialGas)
  );
  const [editEle, setEditEle] = useState<Set<string>>(new Set());
  const [editGas, setEditGas] = useState<Set<string>>(new Set());
  const [selectedCupsEleId, setSelectedCupsEleId] = useState<number | null>(null);
  const [selectedCupsGasId, setSelectedCupsGasId] = useState<number | null>(null);
  const [activeMainTab, setActiveMainTab] = useState<string>('electrico');

  const historialEle = useHistorialCups(selectedCupsEleId, 'electrico', 'Electrico');
  const historialGas = useHistorialCups(selectedCupsGasId, 'gas', 'Gas');

  useEffect(() => {
    const keys = Object.keys(errors || {});
    if (keys.length > 0) {
      programarEnfoqueCampoFormulario(keys[0]);
    }
  }, [errors]);

  const validateRequiredFields = (): boolean => {
    const newErrors: Record<string, string> = {};
    if (!data.CodCli) newErrors.CodCli = 'El cliente es obligatorio.';
    if (!data.NomViaPunSum || String(data.NomViaPunSum).trim() === '') newErrors.NomViaPunSum = 'El nombre de la vía es obligatorio.';
    if (!data.CodLoc) newErrors.CodLoc = 'La localidad / código postal es obligatorio.';
    setFrontErrors(newErrors);
    if (Object.keys(newErrors).length > 0) {
      const html = '<div style="text-align:left;">' + Object.values(newErrors).map(v => `• ${v}`).join('<br/>') + '</div>';
      Swal.fire({ title: 'Faltan campos obligatorios', html, icon: 'warning', confirmButtonText: 'Corregir' });
      return false;
    }
    return true;
  };

  const clearFrontError = (field: string) => {
    setFrontErrors(prev => {
      const n = { ...prev } as Record<string, string>;
      if (n[field]) delete n[field];
      return n;
    });
  };

  // ✅ Búsqueda dinámica de clientes (solo cuando el usuario escribe)
  const handleSearchClientes = async (query: string) => {
    if (query.length < 3) {
      // No buscar hasta que haya al menos 3 caracteres
      if (query.length === 0 && !isCreate) {
        // Si se borra todo y estamos en editar, mantener el cliente actual
        setClientes(punto?.cliente ? [punto.cliente] : []);
      } else {
        setClientes([]);
      }
      return;
    }

    try {
      setIsSearchingClientes(true);
      const response = await getClientes(query);
      const clientesData = (response && response.data) ? response.data : [];
      setClientes(clientesData);
    } catch (error) {
      console.error('Error buscando clientes:', error);
      setClientes([]);
    } finally {
      setIsSearchingClientes(false);
    }
  };

  const seleccionarCupsEle = (codCups: number) => {
    setSelectedCupsEleId(codCups);
  };

  const seleccionarCupsGas = (codCups: number) => {
    setSelectedCupsGasId(codCups);
  };

  const abrirHistorialCupsEle = (codCups: number) => {
    seleccionarCupsEle(codCups);
    setTimeout(() => {
      document.getElementById('panel-cups-ele-historico-contenido')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }, 100);
  };

  const abrirHistorialCupsGas = (codCups: number) => {
    seleccionarCupsGas(codCups);
    setTimeout(() => {
      document.getElementById('panel-cups-gas-historico-contenido')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }, 100);
  };

  const recargarHistorialesTrasGuardar = async () => {
    const eleAfectados = new Set<number>();
    const gasAfectados = new Set<number>();

    cupsEle.forEach((row) => {
      if (editEle.has(row._key) && row.CodCupsEle) {
        eleAfectados.add(row.CodCupsEle);
      }
    });
    cupsGas.forEach((row) => {
      if (editGas.has(row._key) && row.CodCupGas) {
        gasAfectados.add(row.CodCupGas);
      }
    });

    if (selectedCupsEleId) {
      eleAfectados.add(selectedCupsEleId);
    }
    if (selectedCupsGasId) {
      gasAfectados.add(selectedCupsGasId);
    }

    eleAfectados.forEach((id) => invalidateHistorialCupsCache('electrico', id));
    gasAfectados.forEach((id) => invalidateHistorialCupsCache('gas', id));

    const recargas: Promise<void>[] = [];

    if (selectedCupsEleId) {
      recargas.push(historialEle.refetchHistorial());
    }
    if (selectedCupsGasId) {
      recargas.push(historialGas.refetchHistorial());
    }

    await Promise.all(recargas);
  };

  const cupsEleOpciones = cupsEle
    .filter((row) => row.CodCupsEle)
    .map((row) => ({ id: row.CodCupsEle!, codigo: row.cups || `CUPS #${row.CodCupsEle}` }));

  const cupsGasOpciones = cupsGas
    .filter((row) => row.CodCupGas)
    .map((row) => ({ id: row.CodCupGas!, codigo: row.cups || `CUPS #${row.CodCupGas}` }));

  const contarHistoricoEle = selectedCupsEleId && historialEle.codCupsActivo === selectedCupsEleId
    ? (historialEle.data?.pagination.total ?? 0)
    : 0;

  const contarHistoricoGas = selectedCupsGasId && historialGas.codCupsActivo === selectedCupsGasId
    ? (historialGas.data?.pagination.total ?? 0)
    : 0;

  const codigoCupsEleSeleccionado = cupsEle.find((r) => r.CodCupsEle === selectedCupsEleId)?.cups ?? null;
  const codigoCupsGasSeleccionado = cupsGas.find((r) => r.CodCupGas === selectedCupsGasId)?.cups ?? null;

  const manejarTeclaHistorialCups = (
    event: React.KeyboardEvent,
    codCups: number | undefined,
    abrir: (id: number) => void,
  ) => {
    if ((event.key === 'Enter' || event.key === ' ') && codCups) {
      event.preventDefault();
      abrir(codCups);
    }
  };
  // Eliminación directa via endpoint; sin sincronización automática

  // Sincronizar con el formulario para enviar al backend
  useEffect(() => {
    setData('cupsElectrico', cupsEle.map(({ _key, ...rest }) => rest));
  }, [cupsEle]);
  useEffect(() => {
    setData('cupsGas', cupsGas.map(({ _key, ...rest }) => rest));
  }, [cupsGas]);
  // No enviamos arrays de borrado ni sync al backend

  const tarifasEleMap = construirMapaTarifas(tarifaOptions, 'CodTarEle', 'NomTarEle');
  const tarifasGasMap = construirMapaTarifas(tarifaGasOptions, 'CodTarGas', 'NomTarGas');

  useEffect(() => {
    let mounted = true;
    const load = async () => {
      try {
        setLoadingAuxData(true);
        
         // Los clientes se cargarán dinámicamente en el Typeahead cuando el usuario busque
        const promises: Promise<any>[] = [
          buscarTarifasElectricas(),
          buscarTarifasGas(),
        ];
        
        // Solo cargar clientes si ya existe un punto (modo editar) Y tiene cliente asignado
        if (!isCreate && punto?.cliente) {
          promises.push(Promise.resolve({ data: [punto.cliente] }));
        } else {
          // En modo crear, iniciar con array vacío
          promises.push(Promise.resolve({ data: [] }));
        }
        
        const [rTarEle, rTarGas, rClientes] = await Promise.all(promises);
        if (!mounted) return;

        // Normalize responses: some services return axios responses ({ data: [...] }),
        // others may return arrays directly. Prefer r.x.data when present.
        // Normalize all responses to objects that contain `.data` (axios-style)

        const clientesData = norm(rClientes).data as Cliente[];
        const tarifasEleData = norm(rTarEle).data as TarifaElectricaOption[];
        const tarifasGasData = norm(rTarGas).data as TarifaGasOption[];

        setClientes(clientesData);
        setTarifasElectrica(tarifasEleData);
        setTarifasGas(tarifasGasData);
        setTarifaOptions(tarifasEleData);
        setTarifaGasOptions(tarifasGasData);
        
      } catch (err) {
        console.error('Error cargando datos auxiliares:', err);
      } finally {
        if (mounted) setLoadingAuxData(false);
      }
    };
    load();
    return () => { mounted = false; };
  }, []);
  const addEle = () => {
    const newKey = `ele-${Date.now()}`;
    setCupsEle(prev => [{ _key: newKey, estado: 1 }, ...prev]);
    //  Activar automáticamente el modo de edición para el nuevo CUPS
    setEditEle(prev => { const n = new Set(prev); n.add(newKey); return n; });
  };
  const addGas = () => {
    const newKey = `gas-${Date.now()}`;
    setCupsGas(prev => [{ _key: newKey, estado: 1 }, ...prev]);
    //  Activar automáticamente el modo de edición para el nuevo CUPS
    setEditGas(prev => { const n = new Set(prev); n.add(newKey); return n; });
  };

  const removeEle = (row: CupsEle) => {
    // Si existe en DB, eliminar via endpoint; si es nuevo en UI, solo quítalo de la tabla
    if (row.CodCupsEle && punto?.CodPunSum) {
      Swal.fire({ title: 'Eliminar CUPS', text: '¿Deseas eliminar este CUPS eléctrico?', icon: 'warning', showCancelButton: true, confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar' })
        .then(res => {
          if (res.isConfirmed) {
            router.delete(route('puntos-suministro.cups-electrico.destroy', { punto: punto.CodPunSum, cups: row.CodCupsEle }), {
              preserveScroll: true,
              onSuccess: () => {
                setCupsEle(prev => prev.filter(r => r._key !== row._key));
                setEditEle(prev => { const n = new Set(prev); n.delete(row._key); return n; });
                Swal.fire({ title: 'Eliminado', icon: 'success', timer: 1200, showConfirmButton: false });
              },
              onError: () => Swal.fire({ title: 'No se pudo eliminar', icon: 'error', timer: 1500, showConfirmButton: false })
            });

          }
        });
    } else {
      setCupsEle(prev => prev.filter(r => r._key !== row._key));
      setEditEle(prev => { const n = new Set(prev); n.delete(row._key); return n; });
    }
  };
  const removeGas = (row: CupsGas) => {
    if (row.CodCupGas && punto?.CodPunSum) {

      Swal.fire({ title: 'Eliminar CUPS', text: '¿Deseas eliminar este CUPS de gas?', icon: 'warning', showCancelButton: true, confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar' })
        .then(res => {
          if (res.isConfirmed) {
            router.delete(route('puntos-suministro.cups-gas.destroy', { punto: punto.CodPunSum, cups: row.CodCupGas }), {
              preserveScroll: true,
              onSuccess: () => {
                setCupsGas(prev => prev.filter(r => r._key !== row._key));
                setEditGas(prev => { const n = new Set(prev); n.delete(row._key); return n; });

                Swal.fire({ title: 'Eliminado', icon: 'success', timer: 1200, showConfirmButton: false });
              },
              onError: () => Swal.fire({ title: 'No se pudo eliminar', icon: 'error', timer: 1500, showConfirmButton: false })
            });
          }
        });
    } else {
      setCupsGas(prev => prev.filter(r => r._key !== row._key));

      setEditGas(prev => { const n = new Set(prev); n.delete(row._key); return n; });
    }
  };

  const toggleEditEle = (row: CupsEle, on?: boolean) => {
    setEditEle(prev => { const n = new Set(prev); on ?? !n.has(row._key) ? n.add(row._key) : n.delete(row._key); return n; });
  };
  const toggleEditGas = (row: CupsGas, on?: boolean) => {

    setEditGas(prev => { const n = new Set(prev); on ?? !n.has(row._key) ? n.add(row._key) : n.delete(row._key); return n; });
  };

  const handleConfirmarEle = async (row: CupsEle) => {
    const errorMsg = getCupsValidationMessage(row.cups || '');
    if (errorMsg) {
      Swal.fire({
        title: 'Formato de CUPS inválido',
        text: errorMsg,
        icon: 'error',
        confirmButtonColor: '#3085d6'
      });
      return;
    }

    const duplicadoLocal = cupsEle.some(r => r._key !== row._key && r.cups?.trim().toUpperCase() === row.cups?.trim().toUpperCase());
    if (duplicadoLocal) {
      Swal.fire({
        title: 'CUPS Duplicado',
        text: 'Este CUPS ya está agregado en la tabla de electricidad de este punto de suministro.',
        icon: 'error',
        confirmButtonColor: '#3085d6'
      });
      return;
    }

    try {
      showLoading();
      const response = await fetch(route('puntos-suministro.validar-cups', {
        cups: row.cups,
        tipo: 'electrico',
        ignore_cups_id: row.CodCupsEle || ''
      }));
      const resData = await response.json();
      hideLoading();

      if (resData.existe) {
        Swal.fire({
          title: 'CUPS ya registrado',
          text: 'El código CUPS eléctrico introducido ya existe registrado en la base de datos.',
          icon: 'warning',
          confirmButtonColor: '#3085d6'
        });
        return;
      }
    } catch (e) {
      hideLoading();
      console.error('Error al validar CUPS:', e);
    }

    toggleEditEle(row, false);
  };

  const handleConfirmarGas = async (row: CupsGas) => {
    const errorMsg = getCupsValidationMessage(row.cups || '');
    if (errorMsg) {
      Swal.fire({
        title: 'Formato de CUPS inválido',
        text: errorMsg,
        icon: 'error',
        confirmButtonColor: '#3085d6'
      });
      return;
    }

    const duplicadoLocal = cupsGas.some(r => r._key !== row._key && r.cups?.trim().toUpperCase() === row.cups?.trim().toUpperCase());
    if (duplicadoLocal) {
      Swal.fire({
        title: 'CUPS Duplicado',
        text: 'Este CUPS ya está agregado en la tabla de gas de este punto de suministro.',
        icon: 'error',
        confirmButtonColor: '#3085d6'
      });
      return;
    }

    try {
      showLoading();
      const response = await fetch(route('puntos-suministro.validar-cups', {
        cups: row.cups,
        tipo: 'gas',
        ignore_cups_id: row.CodCupGas || ''
      }));
      const resData = await response.json();
      hideLoading();

      if (resData.existe) {
        Swal.fire({
          title: 'CUPS ya registrado',
          text: 'El código CUPS de gas introducido ya existe registrado en la base de datos.',
          icon: 'warning',
          confirmButtonColor: '#3085d6'
        });
        return;
      }
    } catch (e) {
      hideLoading();
      console.error('Error al validar CUPS:', e);
    }

    toggleEditGas(row, false);
  };

  const updateEle = (row: CupsEle, field: keyof CupsEle, val: any) => {
    setCupsEle(prev => prev.map(r => {
      if (r._key !== row._key) {
        return r;
      }
      const actualizado = { ...r, [field]: val };
      if (field === 'CodTarElec') {
        actualizado.nombreTarifa = resolverNombreTarifa(val, tarifasEleMap, null);
      }
      return actualizado;
    }));
  };
  const updateGas = (row: CupsGas, field: keyof CupsGas, val: any) => {
    setCupsGas(prev => prev.map(r => {
      if (r._key !== row._key) {
        return r;
      }
      const actualizado = { ...r, [field]: val };
      if (field === 'CodTarGas') {
        actualizado.nombreTarifa = resolverNombreTarifa(val, tarifasGasMap, null);
      }
      return actualizado;
    }));
  };

  // ✅ Validación de formato de CUPS
  const validateCups = (cups: string): boolean => {
    if (!cups) return false;
    // Debe comenzar con "ES" y tener al menos 20 caracteres
    return cups.toUpperCase().startsWith('ES') && cups.length >= 20;
  };

  const getCupsValidationMessage = (cups: string): string | null => {
    if (!cups) return 'El CUPS es requerido';
    if (!cups.toUpperCase().startsWith('ES')) return 'El CUPS debe comenzar con "ES"';
    if (cups.length < 20) return `El CUPS debe tener al menos 20 caracteres (actual: ${cups.length})`;
    return null;
  };

  const guardar = () => {
    // ✅ Validar campos requeridos antes de cualquier otra validación
    if (!validateRequiredFields()) return;

    // ✅ Validar CUPS antes de guardar
    const cupsElectricosInvalidos = cupsEle.filter(row => row.cups && !validateCups(row.cups));
    const cupsGasInvalidos = cupsGas.filter(row => row.cups && !validateCups(row.cups));
    
    if (cupsElectricosInvalidos.length > 0 || cupsGasInvalidos.length > 0) {
      const errores: string[] = [];
      
      if (cupsElectricosInvalidos.length > 0) {
        errores.push(`⚡ ${cupsElectricosInvalidos.length} CUPS Eléctrico(s) con formato inválido`);
        cupsElectricosInvalidos.forEach(cup => {
          const msg = getCupsValidationMessage(cup.cups || '');
          if (msg) errores.push(`  • ${cup.cups || 'Vacío'}: ${msg}`);
        });
      }
      
      if (cupsGasInvalidos.length > 0) {
        errores.push(`🔥 ${cupsGasInvalidos.length} CUPS Gas con formato inválido`);
        cupsGasInvalidos.forEach(cup => {
          const msg = getCupsValidationMessage(cup.cups || '');
          if (msg) errores.push(`  • ${cup.cups || 'Vacío'}: ${msg}`);
        });
      }
      
      Swal.fire({
        title: '⚠️ Validación de CUPS Fallida',
        html: `<div style="text-align: left;">${errores.join('<br/>')}</div>`,
        icon: 'error',
        confirmButtonText: 'Corregir',
        confirmButtonColor: '#d33'
      });
      return;
    }
    
    Swal.fire({
      title: isCreate ? 'Crear punto' : 'Guardar cambios',
      text: isCreate
        ? `¿Deseas crear el punto de suministro para ${data.clienteText || '—'}?`
        : `¿Deseas guardar los cambios del punto en ${data.NomViaPunSum} ${data.NumViaPunSum}?`,
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: isCreate ? 'Sí, crear' : 'Sí, guardar',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({ title: 'Procesando...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
        if (isCreate) {
          router.post(route('puntos-suministro.store'), data, {
            preserveScroll: true,
            onFinish: () => Swal.close(),
            onSuccess: () => {
              Swal.fire({ title: 'Creado', icon: 'success', timer: 1500, showConfirmButton: false });
              (async () => {
                try {
                  // ✅ OPTIMIZACIÓN: No invalidar ni recargar clientes
                  await Promise.all([
                    refreshCupsElectricos(),
                    refreshCupsGas(),
                    refreshTarifasElectricas(),
                    refreshTarifasGas(),
                  ]);
                } catch (e) {
                  // ignore refresh errors
                }
                // Re-fetch auxiliar data to reflect server-side changes
                try {
                  const [rTarEle, rTarGas] = await Promise.all([
                    buscarTarifasElectricas(),
                    buscarTarifasGas(),
                  ]);
                  const tarifasEleData = norm(rTarEle).data as TarifaElectricaOption[];
                  const tarifasGasData = norm(rTarGas).data as TarifaGasOption[];
                  setTarifasElectrica(tarifasEleData);
                  setTarifasGas(tarifasGasData);
                  setTarifaOptions(tarifasEleData);
                  setTarifaGasOptions(tarifasGasData);
                  // No recargar clientes - el Typeahead los cargará cuando se necesiten
                } catch (e) { console.warn('Error al recargar auxiliares después de crear:', e); }
              })();
            },
            onError: (errors: any) => {
              const html = "<div style=\"text-align:left;\">" + Object.entries(errors || {}).map(([k, v]) => `<strong>${k}</strong>: ${Array.isArray(v) ? v.join('<br/>') : v}`).join('<br/>') + "</div>";
              Swal.fire({ title: 'Errores de validación', html, icon: 'error', confirmButtonText: 'Corregir' });
            }
          });
        } else {
          put(route('puntos-suministro.update', punto.CodPunSum), {
            preserveScroll: true,
            onFinish: () => Swal.close(),
            onSuccess: () => {
              Swal.fire({ title: 'Actualizado', icon: 'success', timer: 1500, showConfirmButton: false });
              void recargarHistorialesTrasGuardar();
              (async () => {
                try {
                  // ✅ OPTIMIZACIÓN: No invalidar ni recargar clientes
                  await Promise.all([
                    refreshCupsElectricos(),
                    refreshCupsGas(),
                    refreshTarifasElectricas(),
                    refreshTarifasGas(),
                  ]);
                } catch (e) {}
                try {
                  const [rTarEle, rTarGas] = await Promise.all([
                    buscarTarifasElectricas(),
                    buscarTarifasGas(),
                  ]);
                  const tarifasEleData = norm(rTarEle).data as TarifaElectricaOption[];
                  const tarifasGasData = norm(rTarGas).data as TarifaGasOption[];
                  setTarifasElectrica(tarifasEleData);
                  setTarifasGas(tarifasGasData);
                  setTarifaOptions(tarifasEleData);
                  setTarifaGasOptions(tarifasGasData);
                  // No recargar clientes - el Typeahead los cargará cuando se necesiten
                } catch (e) { console.warn('Error al recargar auxiliares después de actualizar:', e); }
              })();
            },
            onError: (errors: any) => {
              const html = "<div style=\"text-align:left;\">" + Object.entries(errors || {}).map(([k, v]) => `<strong>${k}</strong>: ${Array.isArray(v) ? v.join('<br/>') : v}`).join('<br/>') + "</div>";
              Swal.fire({ title: 'Errores de validación', html, icon: 'error', confirmButtonText: 'Corregir' });
            }
          });
        }
      }
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    guardar();
  };

  return (
    <React.Fragment>
      <Head title={`${isCreate ? 'Crear' : 'Editar'} Punto de Suministro`} />
      <div className="page-content">
        <Container fluid>
          <BreadCrumb title={isCreate ? 'Crear' : 'Editar'} pageTitle="Punto de Suministro" />
          <Row>
            <Col xl={12}>
              <Card>
                <Card.Header className="d-flex justify-content-between align-items-center bg-light">
                  <h4 className="card-title mb-0">{isCreate ? 'Nuevo Punto' : `Punto: ${data.NomViaPunSum || ''}`}</h4>
                </Card.Header>
                <Card.Body>
                  <div className={`${estilosFoco.contenedorAccesibleContratos} formularioPunto`}>
                  <Form onSubmit={handleSubmit}>
                    <Row className="g-4">
                      <Col md={10}>
                        <Form.Group controlId="cliente">
                          <Form.Label>Cliente</Form.Label>
                          <Typeahead
                            id="clienteTypeahead"
                            labelKey={(o: any) => `${o.RazSocCli} (${o.NumCifCli})`}
                            options={clientes}
                            selected={selectedCliente}
                            onChange={(selected) => {
                              setSelectedCliente(selected as any);
                              const sel = selected[0] as Cliente | undefined;
                              setData('CodCli', sel ? sel.CodCli : null);
                              setData('clienteText', sel ? sel.RazSocCli : '');
                              clearFrontError('CodCli');
                            }}
                            onInputChange={handleSearchClientes}
                            placeholder="Buscar cliente por nombre o CIF (mín. 3 caracteres)..."
                            minLength={3}
                            isLoading={isSearchingClientes}
                            emptyLabel={isSearchingClientes ? "Buscando..." : "No se encontraron clientes"}
                            filterBy={() => true}
                          />
                            {(frontErrors.CodCli || errors.CodCli) && (
                              <Form.Text className="text-danger small">{frontErrors.CodCli || errors.CodCli}</Form.Text>
                            )}
                        </Form.Group>
                      </Col>

                      <Col md={2}>
                        <Form.Group controlId="EstPunSum">
                          <Form.Label>Estado</Form.Label>
                          <Form.Select value={data.EstPunSum ?? ''} onChange={e => setData('EstPunSum', e.target.value === '' ? undefined : parseInt(e.target.value))}>
                            <option value="">Seleccione…</option>
                            <option value="1">Activo</option>
                            <option value="0">Inactivo</option>
                          </Form.Select>
                        </Form.Group>
                      </Col>

                    <Card.Header className="d-flex justify-content-between align-items-center bg-light">
                        <h4><h5 className="mb-2">Dirección del Punto</h5></h4>
                    </Card.Header>

                      <Col md={7}>
                        <Form.Group controlId="NomViaPunSum">
                          <Form.Label>Nombre de la vía</Form.Label>
                          <Form.Control value={data.NomViaPunSum || ''} onChange={e => { setData('NomViaPunSum', e.target.value); clearFrontError('NomViaPunSum'); }} />
                            {(frontErrors.NomViaPunSum || errors.NomViaPunSum) && (
                              <Form.Text className="text-danger small">{frontErrors.NomViaPunSum || errors.NomViaPunSum}</Form.Text>
                            )}
                        </Form.Group>
                      </Col>
                      <Col md={1}>
                        <Form.Group controlId="NumViaPunSum">
                          <Form.Label>Número</Form.Label>
                          <Form.Control value={data.NumViaPunSum || ''} onChange={e => setData('NumViaPunSum', e.target.value)} />
                        </Form.Group>
                      </Col>
                      <Col md={1}><Form.Group controlId="BloPunSum"><Form.Label>Bloque</Form.Label><Form.Control value={data.BloPunSum || ''} onChange={e => setData('BloPunSum', e.target.value)} /></Form.Group></Col>
                      <Col md={1}><Form.Group controlId="EscPunSum"><Form.Label>Escalera</Form.Label><Form.Control value={data.EscPunSum || ''} onChange={e => setData('EscPunSum', e.target.value)} /></Form.Group></Col>
                      <Col md={1}><Form.Group controlId="PlaPunSum"><Form.Label>Piso</Form.Label><Form.Control value={data.PlaPunSum || ''} onChange={e => setData('PlaPunSum', e.target.value)} /></Form.Group></Col>
                      <Col md={1}><Form.Group controlId="PuePunSum"><Form.Label>Puerta</Form.Label><Form.Control value={data.PuePunSum || ''} onChange={e => setData('PuePunSum', e.target.value)} /></Form.Group></Col>

                      {/* Provincia */}
                      <Col md={5}>
                        <Form.Group controlId="provincia">
                          <Form.Label>Provincia</Form.Label>
                          <Form.Select
                            value={selectedProvinciaId}
                            onChange={(e) => {
                              const pId = e.target.value ? parseInt(e.target.value) : '';
                              setSelectedProvinciaId(pId);
                              setData((prev: any) => ({
                                ...prev,
                                CodLoc: null,
                                CPLocSoc: ''
                              }));
                            }}
                          >
                            <option value="">Seleccione…</option>
                            {provincias.map(p => (
                              <option key={p.CodPro} value={p.CodPro}>{p.DesPro}</option>
                            ))}
                          </Form.Select>
                        </Form.Group>
                      </Col>

                      {/* Localidad */}
                      <Col md={5}>
                        <Form.Group controlId="localidad">
                          <Form.Label>Localidad</Form.Label>
                          <Form.Select
                            value={data.CodLoc || ''}
                            disabled={!selectedProvinciaId}
                            onChange={(e) => {
                              const lId = e.target.value ? parseInt(e.target.value) : '';
                              if (!lId) {
                                setData((prev: any) => ({
                                  ...prev,
                                  CodLoc: null,
                                  CPLocSoc: ''
                                }));
                                return;
                              }
                              const loc = localidadesPorProvincia.find((l: any) => l.CodLoc === lId);
                              if (loc) {
                                setData((prev: any) => ({
                                  ...prev,
                                  CodLoc: loc.CodLoc,
                                  CPLocSoc: loc.CPLoc
                                }));
                                clearFrontError('CodLoc');
                              }
                            }}
                            isInvalid={!!frontErrors.CodLoc || !!errors.CodLoc}
                          >
                            <option value="">{selectedProvinciaId ? 'Seleccione…' : 'Seleccione una provincia primero'}</option>
                            {localidadesPorProvincia.map((l: any) => (
                              <option key={l.CodLoc} value={l.CodLoc}>{l.DesLoc}</option>
                            ))}
                          </Form.Select>
                          <Form.Control.Feedback type="invalid">
                              {frontErrors.CodLoc || errors.CodLoc}
                          </Form.Control.Feedback>
                        </Form.Group>
                      </Col>

                      {/* Código Postal */}
                      <Col md={2}>
                        <Form.Group controlId="CPLocSoc">
                          <Form.Label>Código Postal</Form.Label>
                          <Form.Control
                              type="text"
                              value={data.CPLocSoc || ''}
                              readOnly
                              placeholder="Código Postal"
                          />
                        </Form.Group>
                      </Col>

                    <Card.Header className="d-flex justify-content-between align-items-center bg-light">
                        <h4><h5 className="mb-2">Otros</h5></h4>
                    </Card.Header>
                      <Col md={3}><Form.Group controlId="TelPunSum"><Form.Label>Teléfono</Form.Label><Form.Control value={data.TelPunSum || ''} onChange={e => setData('TelPunSum', e.target.value)} maxLength={9}/></Form.Group></Col>
                      <Col md={9}><Form.Group controlId="ObsPunSum"><Form.Label>Observaciones</Form.Label><Form.Control as="textarea" rows={3} value={data.ObsPunSum || ''} onChange={e => setData('ObsPunSum', e.target.value)} /></Form.Group></Col>

                      <Col xs={12} className={seccionStyles.seccionCups}>
                        <EneonTabsCard>
                          <EneonTabsCardHeader>
                            <EneonTabs
                              tabs={[
                                {
                                  id: 'electrico',
                                  label: 'CUPS Eléctricos',
                                  icon: <Zap size={18} />,
                                  variant: 'electrico',
                                  count: cupsEle.length,
                                  panelId: 'panel-cups-electrico-main',
                                },
                                {
                                  id: 'gas',
                                  label: 'CUPS Gas',
                                  icon: <Flame size={18} />,
                                  variant: 'gas',
                                  count: cupsGas.length,
                                  panelId: 'panel-cups-gas-main',
                                },
                              ]}
                              activeTabId={activeMainTab}
                              onTabChange={(tabId) => setActiveMainTab(tabId)}
                              ariaLabel="Tipos de CUPS del Punto de Suministro"
                              cardHeader={true}
                            />
                          </EneonTabsCardHeader>
                          <EneonTabsCardBody>
                            <EneonTabPanel
                              id="panel-cups-electrico-main"
                              labelledBy="tab-electrico"
                              active={activeMainTab === 'electrico'}
                            >
                              <p className={seccionStyles.ayudaSeccion}>
                                <i className="ri-information-line me-1" aria-hidden="true" />
                                Pulse el código <strong>CUPS</strong> para abrir su historial en la sección inferior, o el icono de lápiz para editar la fila.
                              </p>
                              {selectedCupsEleId && codigoCupsEleSeleccionado && (
                                <div className={`${seccionStyles.pistaSeleccion} ${seccionStyles.pistaSeleccionElectrico} mb-3`}>
                                  <span>
                                    CUPS seleccionado: <code className={seccionStyles.pistaCodigo}>{codigoCupsEleSeleccionado}</code>
                                  </span>
                                  <Button
                                    variant="link"
                                    size="sm"
                                    className="p-0 ms-2"
                                    onClick={() => {
                                      document.getElementById('panel-cups-ele-historico-contenido')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                                    }}
                                  >
                                    Ir al historial ↓
                                  </Button>
                                </div>
                              )}
                              <div className="d-flex justify-content-between align-items-center mb-2">
                                <Button variant="primary" size="sm" onClick={addEle}>
                                  <i className="ri-add-line me-1" aria-hidden="true" />
                                  Añadir CUPS Eléctrico
                                </Button>
                              </div>
                              {cupsEle.length > 0 && (
                                <div className="alert alert-info py-2 mb-2" style={{ fontSize: '0.85rem' }}>
                                  <i className="ri-lightbulb-line me-2" aria-hidden="true" />
                                  <strong>Formato CUPS:</strong> Debe comenzar con &quot;ES&quot; y tener mínimo 20 caracteres.
                                  Ejemplo: ES0021000000000000AA
                                </div>
                              )}
                              <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 Anual</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 isNewRow = !row.CodCupsEle; // Nueva fila sin ID de BD
                                      return (
                                        <tr 
                                          key={row._key}
                                          aria-selected={selectedCupsEleId === row.CodCupsEle}
                                          style={{
                                            backgroundColor: isEdit && isNewRow ? '#fff7e6' : (selectedCupsEleId === row.CodCupsEle ? '#eef4ff' : undefined),
                                            borderLeft: isEdit && isNewRow ? '4px solid orange' : (selectedCupsEleId === row.CodCupsEle ? '3px solid #0d6efd' : undefined),
                                          }}
                                        >
                                          <td className={styles.colCups}>
                                            {isEdit ? (
                                              <div>
                                                <Form.Control
                                                  className={styles.inputCups}
                                                  value={row.cups || ''}
                                                  onChange={e => updateEle(row, 'cups', e.target.value.toUpperCase())}
                                                  placeholder="ES..."
                                                  maxLength={22}
                                                  isInvalid={row.cups ? !validateCups(row.cups) : false}
                                                />
                                                {row.cups && !validateCups(row.cups) && (
                                                  <Form.Text className="text-danger small">
                                                    {getCupsValidationMessage(row.cups)}
                                                  </Form.Text>
                                                )}
                                              </div>
                                            ) : row.CodCupsEle ? (
                                              <span
                                                className={`${styles.celdaCups} ${styles.cupsEnlaceHistorial} ${row.cups && !validateCups(row.cups) ? 'text-danger' : ''}`}
                                                role="button"
                                                tabIndex={0}
                                                title="Ver historial de este CUPS"
                                                onClick={() => abrirHistorialCupsEle(row.CodCupsEle!)}
                                                onKeyDown={(e) => manejarTeclaHistorialCups(e, row.CodCupsEle, abrirHistorialCupsEle)}
                                              >
                                                {row.cups || '-'}
                                              </span>
                                            ) : (
                                              <span className={`${styles.celdaCups} ${row.cups && !validateCups(row.cups) ? 'text-danger' : ''}`}>
                                                {row.cups || '-'}
                                              </span>
                                            )}
                                          </td>
                                          <td className={styles.colTarifa}>{isEdit ? (
                                                    <Form.Select
                                                        className={styles.inputCelda}
                                                        id="tarifaElec"
                                                        name="tarifa"
                                                        value={row.CodTarElec as any || ''}
                                                        onChange={(e) => {
                                                            const selectedValue = e.target.value;
                                                            updateEle(row, 'CodTarElec', selectedValue);
                                                        }}
                                                        isInvalid={false}
                                                    ><option value="">Seleccione una tarifa</option>
                                                        {
                                                            tarifaOptions.map((registro: TarifaElectricaOption) => (
                                                                <option key={registro.CodTarEle} value={registro.CodTarEle}>
                                                                    {registro.NomTarEle}
                                                                </option>
                                                            ))
                                                        }
                                                    </Form.Select>) :
                                                    resolverNombreTarifa(row.CodTarElec, tarifasEleMap, row.nombreTarifa)}
                                          </td>
                                          <td className={styles.colConsumo}>{isEdit ? (<Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={row.conAnual as any || ''} onChange={e => updateEle(row, 'conAnual', e.target.value)} />) : (<span className={styles.valorNumerico}>{row.conAnual ?? '-'}</span>)}</td>
                                          <td className={styles.colPotencia}>{isEdit ? (<Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={row.potencia1 as any || ''} onChange={e => updateEle(row, 'potencia1', e.target.value)} />) : (<span className={styles.valorNumerico}>{row.potencia1 ?? '-'}</span>)}</td>
                                          <td className={styles.colPotencia}>{isEdit ? (<Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={row.potencia2 as any || ''} onChange={e => updateEle(row, 'potencia2', e.target.value)} />) : (<span className={styles.valorNumerico}>{row.potencia2 ?? '-'}</span>)}</td>
                                          <td className={styles.colPotencia}>{isEdit ? (<Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={row.potencia3 as any || ''} onChange={e => updateEle(row, 'potencia3', e.target.value)} />) : (<span className={styles.valorNumerico}>{row.potencia3 ?? '-'}</span>)}</td>
                                          <td className={styles.colPotencia}>{isEdit ? (<Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={row.potencia4 as any || ''} onChange={e => updateEle(row, 'potencia4', e.target.value)} />) : (<span className={styles.valorNumerico}>{row.potencia4 ?? '-'}</span>)}</td>
                                          <td className={styles.colPotencia}>{isEdit ? (<Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={row.potencia5 as any || ''} onChange={e => updateEle(row, 'potencia5', e.target.value)} />) : (<span className={styles.valorNumerico}>{row.potencia5 ?? '-'}</span>)}</td>
                                          <td className={styles.colPotencia}>{isEdit ? (<Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={row.potencia6 as any || ''} onChange={e => updateEle(row, 'potencia6', e.target.value)} />) : (<span className={styles.valorNumerico}>{row.potencia6 ?? '-'}</span>)}</td>
                                          <td className={styles.colEstado}>
                                            {isEdit ? (
                                              <Form.Select className={styles.inputCelda} value={(row.estado as any) ?? 1} onChange={e => updateEle(row, 'estado', parseInt(e.target.value))}>
                                                <option value={1}>Activo</option>
                                                <option value={0}>Inactivo</option>
                                              </Form.Select>
                                            ) : (
                                              <Badge bg={(row.estado ?? 1) === 1 ? 'success' : 'secondary'}>{(row.estado ?? 1) === 1 ? 'Activo' : 'Inactivo'}</Badge>
                                            )}
                                          </td>
                                          <td className={`${styles.colAcciones} text-nowrap`}>
                                            {isEdit ? (
                                              <>
                                                <Button size="sm" variant="success" className="me-2" onClick={() => handleConfirmarEle(row)} aria-label="Confirmar fila CUPS eléctrico"><i className="ri-check-line" aria-hidden="true" /></Button>
                                                <Button size="sm" variant="secondary" onClick={() => toggleEditEle(row, false)} aria-label="Cancelar edición CUPS eléctrico"><i className="ri-close-line" aria-hidden="true" /></Button>
                                              </>
                                            ) : (
                                              <>
                                                <Button size="sm" variant="warning" className="me-2" onClick={(e) => { e.stopPropagation(); toggleEditEle(row, true); }} aria-label="Editar fila CUPS eléctrico"><i className="ri-edit-line" aria-hidden="true" /></Button>
                                                <Button size="sm" variant="danger" onClick={(e) => { e.stopPropagation(); removeEle(row); }} aria-label="Eliminar fila CUPS eléctrico"><i className="ri-delete-bin-line" aria-hidden="true" /></Button>
                                              </>
                                            )}
                                          </td>
                                        </tr>
                                      );
                                    })}
                                  </tbody>
                                </Table>
                              </div>

                              <div className="mt-5 pt-4 border-top">
                                <h5 className="mb-3 text-dark d-flex align-items-center gap-2">
                                  <History size={18} className="text-primary" />
                                  Historial de cambios
                                </h5>
                                <CupsHistorialContextBar
                                  variant="electrico"
                                  cupsOpciones={cupsEleOpciones}
                                  selectedCupsId={selectedCupsEleId}
                                  onSelectCups={seleccionarCupsEle}
                                  onRefrescar={() => void historialEle.refetchHistorial()}
                                  loading={historialEle.loading}
                                />
                                <div className="mt-3">
                                  <CupsHistorialTab
                                    tipo="electrico"
                                    variant="electrico"
                                    codCups={selectedCupsEleId}
                                    historial={historialEle}
                                    panelId="panel-cups-ele-historico-contenido"
                                  />
                                </div>
                              </div>
                            </EneonTabPanel>

                            <EneonTabPanel
                              id="panel-cups-gas-main"
                              labelledBy="tab-gas"
                              active={activeMainTab === 'gas'}
                            >
                              <p className={seccionStyles.ayudaSeccion}>
                                <i className="ri-information-line me-1" aria-hidden="true" />
                                Pulse el código <strong>CUPS</strong> para abrir su historial en la sección inferior, o el icono de lápiz para editar la fila.
                              </p>
                              {selectedCupsGasId && codigoCupsGasSeleccionado && (
                                <div className={`${seccionStyles.pistaSeleccion} ${seccionStyles.pistaSeleccionGas} mb-3`}>
                                  <span>
                                    CUPS seleccionado: <code className={seccionStyles.pistaCodigo}>{codigoCupsGasSeleccionado}</code>
                                  </span>
                                  <Button
                                    variant="link"
                                    size="sm"
                                    className="p-0 ms-2"
                                    onClick={() => {
                                      document.getElementById('panel-cups-gas-historico-contenido')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                                    }}
                                  >
                                    Ir al historial ↓
                                  </Button>
                                </div>
                              )}
                              <div className="d-flex justify-content-between align-items-center mb-2">
                                <Button variant="primary" size="sm" onClick={addGas}>
                                  <i className="ri-add-line me-1" aria-hidden="true" />
                                  Añadir CUPS Gas
                                </Button>
                              </div>
                              {cupsGas.length > 0 && (
                                <div className="alert alert-info py-2 mb-2" style={{ fontSize: '0.85rem' }}>
                                  <i className="ri-lightbulb-line me-2" aria-hidden="true" />
                                  <strong>Formato CUPS:</strong> Debe comenzar con &quot;ES&quot; y tener mínimo 20 caracteres.
                                  Ejemplo: ES0021000000000000AA
                                </div>
                              )}
                              <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 Anual</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 isNewRow = !row.CodCupGas; // Nueva fila sin ID de BD
                                      return (
                                        <tr 
                                          key={row._key}
                                          aria-selected={selectedCupsGasId === row.CodCupGas}
                                          style={{
                                            backgroundColor: isEdit && isNewRow ? '#fff7e6' : (selectedCupsGasId === row.CodCupGas ? '#eef4ff' : undefined),
                                            borderLeft: isEdit && isNewRow ? '4px solid orange' : (selectedCupsGasId === row.CodCupGas ? '3px solid #0d6efd' : undefined),
                                          }}
                                        >
                                          <td className={styles.colCups}>
                                            {isEdit ? (
                                              <div>
                                                <Form.Control
                                                  className={styles.inputCups}
                                                  value={row.cups || ''}
                                                  onChange={e => updateGas(row, 'cups', e.target.value.toUpperCase())}
                                                  placeholder="ES..."
                                                  maxLength={22}
                                                  isInvalid={row.cups ? !validateCups(row.cups) : false}
                                                />
                                                {row.cups && !validateCups(row.cups) && (
                                                  <Form.Text className="text-danger small">
                                                    {getCupsValidationMessage(row.cups)}
                                                  </Form.Text>
                                                )}
                                              </div>
                                            ) : row.CodCupGas ? (
                                              <span
                                                className={`${styles.celdaCups} ${styles.cupsEnlaceHistorial} ${row.cups && !validateCups(row.cups) ? 'text-danger' : ''}`}
                                                role="button"
                                                tabIndex={0}
                                                title="Ver historial de este CUPS"
                                                onClick={() => abrirHistorialCupsGas(row.CodCupGas!)}
                                                onKeyDown={(e) => manejarTeclaHistorialCups(e, row.CodCupGas, abrirHistorialCupsGas)}
                                              >
                                                {row.cups || '-'}
                                              </span>
                                            ) : (
                                              <span className={`${styles.celdaCups} ${row.cups && !validateCups(row.cups) ? 'text-danger' : ''}`}>
                                                {row.cups || '-'}
                                              </span>
                                            )}
                                          </td>
                                          <td className={styles.colTarifa}>{isEdit ? (
                                                    <Form.Select
                                                        className={styles.inputCelda}
                                                        id="tarifaGas1"
                                                        name="tarifaGas"
                                                        value={row.CodTarGas as any || ''}
                                                        onChange={(e) => {
                                                            const selectedValue = e.target.value;
                                                            updateGas(row, 'CodTarGas', selectedValue);
                                                        }}
                                                        isInvalid={false}
                                                    ><option value="">Seleccione una tarifa</option>
                                                        {
                                                            tarifaGasOptions.map((registro: TarifaGasOption) => (
                                                                <option key={registro.CodTarGas} value={registro.CodTarGas}>
                                                                    {registro.NomTarGas}
                                                                </option>
                                                            ))
                                                        }
                                                    </Form.Select>) :
                                                    resolverNombreTarifa(row.CodTarGas, tarifasGasMap, row.nombreTarifa)}
                                          </td>
                                          <td className={styles.colConsumo}>{isEdit ? (<Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={row.conAnual as any || ''} onChange={e => updateGas(row, 'conAnual', e.target.value)} />) : (<span className={styles.valorNumerico}>{row.conAnual ?? '-'}</span>)}</td>
                                          <td className={styles.colCaudal}>{isEdit ? (<Form.Control className={`${styles.inputCelda} ${styles.inputNumerico}`} type="number" step="0.01" value={row.caudal_diario as any || ''} onChange={e => updateGas(row, 'caudal_diario', e.target.value)} />) : (<span className={styles.valorNumerico}>{row.caudal_diario ?? '-'}</span>)}</td>
                                          <td className={styles.colEstado}>
                                            {isEdit ? (
                                              <Form.Select className={styles.inputCelda} value={(row.estado as any) ?? 1} onChange={e => updateGas(row, 'estado', parseInt(e.target.value))}>
                                                <option value={1}>Activo</option>
                                                <option value={0}>Inactivo</option>
                                              </Form.Select>
                                            ) : (
                                              <Badge bg={(row.estado ?? 1) === 1 ? 'success' : 'secondary'}>{(row.estado ?? 1) === 1 ? 'Activo' : 'Inactivo'}</Badge>
                                            )}
                                          </td>
                                          <td className={`${styles.colAcciones} text-nowrap`}>
                                            {isEdit ? (
                                              <>
                                                <Button size="sm" variant="success" className="me-2" onClick={() => handleConfirmarGas(row)} aria-label="Confirmar fila CUPS gas"><i className="ri-check-line" aria-hidden="true" /></Button>
                                                <Button size="sm" variant="secondary" onClick={() => toggleEditGas(row, false)} aria-label="Cancelar edición CUPS gas"><i className="ri-close-line" aria-hidden="true" /></Button>
                                              </>
                                            ) : (
                                              <>
                                                <Button size="sm" variant="warning" className="me-2" onClick={(e) => { e.stopPropagation(); toggleEditGas(row, true); }} aria-label="Editar fila CUPS gas"><i className="ri-edit-line" aria-hidden="true" /></Button>
                                                <Button size="sm" variant="danger" onClick={(e) => { e.stopPropagation(); removeGas(row); }} aria-label="Eliminar fila CUPS gas"><i className="ri-delete-bin-line" aria-hidden="true" /></Button>
                                              </>
                                            )}
                                          </td>
                                        </tr>
                                      );
                                    })}
                                  </tbody>
                                </Table>
                              </div>

                              <div className="mt-5 pt-4 border-top">
                                <h5 className="mb-3 text-dark d-flex align-items-center gap-2">
                                  <History size={18} className="text-primary" />
                                  Historial de cambios
                                </h5>
                                <CupsHistorialContextBar
                                  variant="gas"
                                  cupsOpciones={cupsGasOpciones}
                                  selectedCupsId={selectedCupsGasId}
                                  onSelectCups={seleccionarCupsGas}
                                  onRefrescar={() => void historialGas.refetchHistorial()}
                                  loading={historialGas.loading}
                                />
                                <div className="mt-3">
                                  <CupsHistorialTab
                                    tipo="gas"
                                    variant="gas"
                                    codCups={selectedCupsGasId}
                                    historial={historialGas}
                                    panelId="panel-cups-gas-historico-contenido"
                                  />
                                </div>
                              </div>
                            </EneonTabPanel>
                          </EneonTabsCardBody>
                        </EneonTabsCard>
                      </Col>
                    </Row>
                    <Row className="mt-4 g-3">
                      <Col md={12}>
                        <div className="d-flex justify-content-start">
                          <div className="d-grid" style={{ minWidth: 280 }}>
                            <Button variant="success" size="lg" onClick={handleSubmit} disabled={processing}>
                              {processing ? (<><span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Guardando...</>) : (<><i className="fas fa-save me-2"></i>Guardar Punto</>)}
                            </Button>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </Form>
                  </div>
                </Card.Body>
                <Card.Footer className={`text-center ${estilosFoco.contenedorAccesibleContratos}`}>
                  <Button variant="secondary" onClick={() => router.visit(route('puntos-suministro.index'))} className="me-2" aria-label="Volver al listado de puntos de suministro">
                    Volver a Puntos
                  </Button>
                </Card.Footer>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    </React.Fragment>
  );
};

EditarPunto.layout = (page: any) => <Layout children={page} />;
export default EditarPunto;