import React, { useState, useMemo, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import {
  LayoutDashboard, TrendingUp, ShoppingCart, Receipt, Users, Settings, Tags,
  Menu, X, Plus, Edit2, Trash2, Download, Upload, Search, Calendar, LogOut,
  Check, AlertTriangle, DollarSign, PieChart as PieChartIcon, FileText, FileSpreadsheet
} from 'lucide-react';
import {
  PieChart, Pie, Cell, BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid,
  Tooltip as RechartsTooltip, ResponsiveContainer
} from 'recharts';

const COLOR_PALETTE = ['#4f46e5', '#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8B5CF6', '#EC4899', '#10B981', '#F43F5E', '#14B8A6'];

// ============================================================================
// Cierre Operativo guarda todo en el mismo proyecto Supabase que Finanzas y
// Caja Menor (window.SB, ver supabase-client.js), con las mismas 2 cuentas.
// Las tablas op_* son compartidas entre todos los usuarios autenticados (no
// aisladas por user_id) porque este es el cierre de TODA la operación, no
// datos personales de cada quién — mismo criterio que cm_* en Caja Menor.
// ============================================================================
const periodFromDb = (r) => ({ id: r.id, month: r.month, startDate: r.start_date, endDate: r.end_date, isClosed: !!r.is_closed });
const periodToDb = (p) => ({ month: p.month, start_date: p.startDate, end_date: p.endDate, is_closed: !!p.isClosed });

const catFromDb = (r) => ({ id: r.id, name: r.name, color: r.color, parentId: r.parent_id || '', sourceCmCategoriaId: r.source_cm_categoria_id || '' });
const catToDb = (c) => ({ name: c.name, color: c.color || '#4f46e5' });

const ventaFromDb = (r) => ({ id: r.id, periodId: r.period_id, fecha: r.fecha, producto: r.producto || '', cliente: r.cliente || '', sucursal: r.sucursal || '', cantidad: Number(r.cantidad) || 0, valor: Number(r.valor) || 0, fuente: r.fuente || '', documento: r.documento || '', unidad: r.unidad || '', precioUnitario: Number(r.precio_unitario) || 0, origen: r.origen || '' });
const ventaToDb = (v) => ({ period_id: v.periodId, fecha: v.fecha || null, producto: v.producto || '', cliente: v.cliente || '', sucursal: v.sucursal || '', cantidad: Number(v.cantidad) || 0, valor: Number(v.valor) || 0, fuente: v.fuente || null, documento: v.documento || null, unidad: v.unidad || null, precio_unitario: v.precioUnitario != null ? Number(v.precioUnitario) : null });

const compraFromDb = (r) => ({ id: r.id, periodId: r.period_id, fecha: r.fecha, producto: r.producto || '', proveedor: r.proveedor || '', cantidad: Number(r.cantidad) || 0, valor: Number(r.valor) || 0, presentacion: r.presentacion || '', unidad: r.unidad || '', precioUnitario: Number(r.precio_unitario) || 0, metodoPago: r.metodo_pago || '', compradora: r.compradora || '', origen: r.origen || '' });
const compraToDb = (c) => ({ period_id: c.periodId, fecha: c.fecha || null, producto: c.producto || '', proveedor: c.proveedor || '', cantidad: Number(c.cantidad) || 0, valor: Number(c.valor) || 0, presentacion: c.presentacion || null, unidad: c.unidad || null, precio_unitario: c.precioUnitario != null ? Number(c.precioUnitario) : null, metodo_pago: c.metodoPago || null, compradora: c.compradora || null });

const gastoFromDb = (r) => ({ id: r.id, periodId: r.period_id, fecha: r.fecha, categoryId: r.category_id || '', descripcion: r.descripcion || '', proveedor: r.proveedor || '', valor: Number(r.valor) || 0, sourceCmId: r.source_cm_id || '', origen: r.origen || '' });
const gastoToDb = (g) => ({ period_id: g.periodId, fecha: g.fecha || null, category_id: g.categoryId || null, descripcion: g.descripcion || '', proveedor: g.proveedor || '', valor: Number(g.valor) || 0 });

const nominaFromDb = (r) => ({
  id: r.id, periodId: r.period_id, empleado: r.empleado || '', cargo: r.cargo || '',
  salarioBase: Number(r.salario_base) || 0, horasExtras: Number(r.horas_extras) || 0, valorHorasExtras: Number(r.valor_horas_extras) || 0,
  deducciones: Number(r.deducciones) || 0, totalPagado: Number(r.total_pagado) || 0,
  documento: r.documento || '', periodoQuincena: r.periodo_quincena || '', auxilioTransporte: Number(r.auxilio_transporte) || 0,
  valorMensualBase: Number(r.valor_mensual_base) || 0, valorQuincenaBase: Number(r.valor_quincena_base) || 0,
  valorUnitarioHoraExtra: Number(r.valor_unitario_hora_extra) || 0,
  recargoNocturnoHoras: Number(r.recargo_nocturno_horas) || 0, valorUnitarioRecargoNocturno: Number(r.valor_unitario_recargo_nocturno) || 0, valorRecargoNocturno: Number(r.valor_recargo_nocturno) || 0,
  recargoDominicalHoras: Number(r.recargo_dominical_horas) || 0, valorUnitarioRecargoDominical: Number(r.valor_unitario_recargo_dominical) || 0, valorRecargoDominical: Number(r.valor_recargo_dominical) || 0,
  horaExtraDominicalHoras: Number(r.hora_extra_dominical_horas) || 0, valorUnitarioHoraExtraDominical: Number(r.valor_unitario_hora_extra_dominical) || 0, valorHoraExtraDominical: Number(r.valor_hora_extra_dominical) || 0,
  valorTotalExtrasRecargos: Number(r.valor_total_extras_recargos) || 0, parafiscales: Number(r.parafiscales) || 0, adicionalesComisiones: Number(r.adicionales_comisiones) || 0,
  origen: r.origen || '',
});
const nominaToDb = (n) => ({
  period_id: n.periodId, empleado: n.empleado || '', cargo: n.cargo || '',
  salario_base: Number(n.salarioBase) || 0, horas_extras: Number(n.horasExtras) || 0, valor_horas_extras: Number(n.valorHorasExtras) || 0,
  deducciones: Number(n.deducciones) || 0, total_pagado: Number(n.totalPagado) || 0,
  documento: n.documento || null, periodo_quincena: n.periodoQuincena || null, auxilio_transporte: n.auxilioTransporte != null ? Number(n.auxilioTransporte) : null,
  valor_mensual_base: n.valorMensualBase != null ? Number(n.valorMensualBase) : null, valor_quincena_base: n.valorQuincenaBase != null ? Number(n.valorQuincenaBase) : null,
  valor_unitario_hora_extra: n.valorUnitarioHoraExtra != null ? Number(n.valorUnitarioHoraExtra) : null,
  recargo_nocturno_horas: n.recargoNocturnoHoras != null ? Number(n.recargoNocturnoHoras) : null, valor_unitario_recargo_nocturno: n.valorUnitarioRecargoNocturno != null ? Number(n.valorUnitarioRecargoNocturno) : null, valor_recargo_nocturno: n.valorRecargoNocturno != null ? Number(n.valorRecargoNocturno) : null,
  recargo_dominical_horas: n.recargoDominicalHoras != null ? Number(n.recargoDominicalHoras) : null, valor_unitario_recargo_dominical: n.valorUnitarioRecargoDominical != null ? Number(n.valorUnitarioRecargoDominical) : null, valor_recargo_dominical: n.valorRecargoDominical != null ? Number(n.valorRecargoDominical) : null,
  hora_extra_dominical_horas: n.horaExtraDominicalHoras != null ? Number(n.horaExtraDominicalHoras) : null, valor_unitario_hora_extra_dominical: n.valorUnitarioHoraExtraDominical != null ? Number(n.valorUnitarioHoraExtraDominical) : null, valor_hora_extra_dominical: n.valorHoraExtraDominical != null ? Number(n.valorHoraExtraDominical) : null,
  valor_total_extras_recargos: n.valorTotalExtrasRecargos != null ? Number(n.valorTotalExtrasRecargos) : null, parafiscales: n.parafiscales != null ? Number(n.parafiscales) : null, adicionales_comisiones: n.adicionalesComisiones != null ? Number(n.adicionalesComisiones) : null,
});

const formatCurrency = (value) => new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', minimumFractionDigits: 0 }).format(value || 0);

// Agrupa y suma "valor" de un conjunto de filas por una clave (cliente, producto, proveedor, etc.)
// Agrupa por nombre "normalizado" (sin tildes, sin mayúsculas/minúsculas, sin
// espacios de más) para que variantes como "Comercializadora... S.A.S" y
// "COMERCIALIZADORA... S.A.S" no queden como dos filas separadas con el
// total partido — se fusionan en una sola, sumando ambas, y se muestra la
// variante de escritura que más se repite como etiqueta.
function groupSum(rows, keyFn) {
  const map = {};
  rows.forEach(r => {
    const raw = (keyFn(r) || '').trim() || 'Sin dato';
    const key = normalizeCatName(raw);
    if (!map[key]) map[key] = { name: raw, value: 0, counts: {} };
    map[key].value += Number(r.valor) || 0;
    map[key].counts[raw] = (map[key].counts[raw] || 0) + 1;
    if (map[key].counts[raw] > (map[key].counts[map[key].name] || 0)) map[key].name = raw;
  });
  return Object.values(map).map(({ name, value }) => ({ name, value })).sort((a, b) => b.value - a.value);
}

// Agrupa filas de ventas o compras (ambas traen producto/cantidad/valor) en un
// solo registro totalizado por producto — para poder "jugar" con desgloses:
// ver cada línea o ver el total real por referencia.
function porProductoDetallado(rows) {
  const map = {};
  rows.forEach(r => {
    const key = normalizeCatName(r.producto) || 'sin-producto';
    if (!map[key]) map[key] = { id: key, producto: r.producto || 'Sin producto', cantidad: 0, valor: 0, lineas: 0 };
    map[key].cantidad += Number(r.cantidad) || 0;
    map[key].valor += Number(r.valor) || 0;
    map[key].lineas += 1;
  });
  return Object.values(map).map(r => ({ ...r, precioPromedio: r.cantidad ? r.valor / r.cantidad : 0 }));
}

// Igual que groupSum, pero sumando también "cantidad" — para las tablas de
// Top Productos del Informe Ejecutivo (PDF), que además del valor necesitan
// mostrar el total de kilos/unidades vendidos o comprados.
function groupSumWithQty(rows, keyFn) {
  const map = {};
  rows.forEach(r => {
    const raw = (keyFn(r) || '').trim() || 'Sin dato';
    const key = normalizeCatName(raw);
    if (!map[key]) map[key] = { name: raw, value: 0, cantidad: 0, counts: {} };
    map[key].value += Number(r.valor) || 0;
    map[key].cantidad += Number(r.cantidad) || 0;
    map[key].counts[raw] = (map[key].counts[raw] || 0) + 1;
    if (map[key].counts[raw] > (map[key].counts[map[key].name] || 0)) map[key].name = raw;
  });
  return Object.values(map).map(({ name, value, cantidad }) => ({ name, value, cantidad })).sort((a, b) => b.value - a.value);
}

// Igual que porProductoDetallado, pero totalizando por cliente/proveedor en
// vez de por producto — mismo criterio de "jugar con desgloses" pedido.
function agruparTotales(rows, keyFn, nameField) {
  const map = {};
  rows.forEach(r => {
    const raw = keyFn(r);
    const key = normalizeCatName(raw) || 'sin-dato';
    if (!map[key]) map[key] = { id: key, [nameField]: raw || 'Sin dato', cantidad: 0, valor: 0, lineas: 0 };
    map[key].cantidad += Number(r.cantidad) || 0;
    map[key].valor += Number(r.valor) || 0;
    map[key].lineas += 1;
  });
  return Object.values(map).map(r => ({ ...r, precioPromedio: r.cantidad ? r.valor / r.cantidad : 0 }));
}

// Igual que agruparTotales pero sin cantidad/precio (los gastos no manejan
// cantidad) — para "Totalizar por Categoría"/"Totalizar por Proveedor" en el
// detalle de Análisis de Gastos.
function agruparValorGastos(rows, keyFn, nameField) {
  const map = {};
  rows.forEach(r => {
    const raw = keyFn(r);
    const key = normalizeCatName(raw) || 'sin-dato';
    if (!map[key]) map[key] = { id: key, [nameField]: raw || 'Sin dato', valor: 0, lineas: 0 };
    map[key].valor += Number(r.valor) || 0;
    map[key].lineas += 1;
  });
  return Object.values(map);
}

function hexToRgb(hex) {
  return hex.replace('#', '').match(/.{2}/g).map(h => parseInt(h, 16));
}
// Barra horizontal genérica para el Informe Ejecutivo (PDF) — dibujada a mano
// con rect()/text() en vez de capturar los gráficos de recharts (más liviano
// y nítido), mismo criterio ya usado en el "Resumen Ejecutivo" de Caja Menor.
function drawBarChartPdf(doc, dataPairs, x, y, width, color, title) {
  doc.setFontSize(11); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
  doc.text(title, x, y);
  const maxVal = Math.max(...dataPairs.map(d => d[1]), 1);
  const labelW = 170;
  const barMaxWidth = Math.max(width - labelW - 80, 40);
  const [r, g, b] = hexToRgb(color);
  let cy = y + 20;
  dataPairs.forEach(([name, value]) => {
    const w = Math.max((value / maxVal) * barMaxWidth, 3);
    doc.setFontSize(8.5); doc.setFont(undefined, 'normal'); doc.setTextColor(30, 41, 59);
    doc.text(name.length > 26 ? `${name.slice(0, 26)}…` : name, x, cy);
    doc.setFillColor(r, g, b);
    doc.rect(x + labelW, cy - 8, w, 11, 'F');
    doc.setFontSize(8); doc.setTextColor(30, 41, 59);
    doc.text(formatCurrency(value), x + labelW + w + 6, cy);
    cy += 18;
  });
  return cy + 8;
}

// Carga perezosa de SheetJS (window.XLSX) — compartida por las 4 plantillas/importaciones.
let xlsxLoadPromise = null;
function ensureXLSX() {
  if (window.XLSX) return Promise.resolve(window.XLSX);
  if (!xlsxLoadPromise) {
    xlsxLoadPromise = new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js';
      script.onload = () => resolve(window.XLSX);
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  return xlsxLoadPromise;
}

// Carga perezosa de jsPDF + autotable para el Informe Ejecutivo (Reportes) —
// mismo patrón/versión ya probado en caja-menor/app.jsx (autotable debe
// cargar DESPUÉS de jsPDF porque se engancha a su prototipo).
let jspdfLoadPromise = null;
function ensureJSPDF() {
  if (window.jspdf && window.jspdf.jsPDF && window.jspdf.jsPDF.API.autoTable) return Promise.resolve(window.jspdf.jsPDF);
  if (!jspdfLoadPromise) {
    jspdfLoadPromise = new Promise((resolve, reject) => {
      const s1 = document.createElement('script');
      s1.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
      s1.onload = () => {
        const s2 = document.createElement('script');
        s2.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js';
        s2.onload = () => resolve(window.jspdf.jsPDF);
        s2.onerror = reject;
        document.head.appendChild(s2);
      };
      s1.onerror = reject;
      document.head.appendChild(s1);
    });
  }
  return jspdfLoadPromise;
}

// jsPDF no compone bien el canal alfa de los PNG con transparencia (pinta esas
// zonas de negro sólido) — se "aplana" el logo sobre un canvas relleno con el
// color de fondo real del PDF antes de pasarlo a addImage. Mismo patrón que
// caja-menor/app.jsx (cmLoadFlattenedLogo/cmAddLogo). Fondo del informe es
// blanco, así que se usa el logo de texto negro para que contraste bien.
const opLogoDataUrlCache = {};
function opLoadFlattenedLogo(src, bgColor) {
  const cacheKey = `${src}|${bgColor}`;
  if (!opLogoDataUrlCache[cacheKey]) {
    opLogoDataUrlCache[cacheKey] = new Promise((resolve, reject) => {
      const img = new Image();
      img.crossOrigin = 'anonymous';
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = bgColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0);
        resolve(canvas.toDataURL('image/png'));
      };
      img.onerror = reject;
      img.src = src;
    });
  }
  return opLogoDataUrlCache[cacheKey];
}
async function opAddLogo(doc, x, y, maxHeight) {
  try {
    const dataUrl = await opLoadFlattenedLogo('../assets/logo-negro.png', '#ffffff');
    const props = doc.getImageProperties(dataUrl);
    const w = (props.width / props.height) * maxHeight;
    doc.addImage(dataUrl, 'PNG', x, y, w, maxHeight);
    return w;
  } catch (err) {
    return 0;
  }
}

function parseFecha(v) {
  if (v instanceof Date) return v.toISOString().slice(0, 10);
  if (typeof v === 'number') {
    const ms = Math.round((v - 25569) * 86400 * 1000);
    return new Date(ms).toISOString().slice(0, 10);
  }
  const s = String(v || '').trim();
  const m = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
  return m ? m[0] : null;
}
function parseNum(v) {
  if (typeof v === 'number') return v;
  const n = parseFloat(String(v || '').replace(/\./g, '').replace(',', '.'));
  return isNaN(n) ? (parseFloat(v) || 0) : n;
}

// Fecha en texto "dd/mm/yyyy" (formato del extracto de Corabastos) — parseFecha
// original solo entiende Date/serial/ISO, así que se prueba aparte sin tocarla.
function parseFechaFlexible(v) {
  const iso = parseFecha(v);
  if (iso) return iso;
  const s = String(v || '').trim();
  const m = s.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
  if (m) {
    const [, d, mo, y] = m;
    return `${y}-${mo.padStart(2, '0')}-${d.padStart(2, '0')}`;
  }
  return null;
}

// Compara nombres de categoría de forma tolerante a mayúsculas/acentos/espacios
// — para poder cruzar "Peajes" con "peajes" o " Ruta Adicional " con "ruta adicional".
const ACCENT_MAP = { á: 'a', é: 'e', í: 'i', ó: 'o', ú: 'u', ñ: 'n', ü: 'u' };
function normalizeCatName(s) {
  return String(s || '')
    .trim().toLowerCase().replace(/\s+/g, ' ')
    .replace(/[áéíóúñü]/g, ch => ACCENT_MAP[ch] || ch);
}

// Los gastos de Corabastos con descripción "Caja menor Bodega"/"Caja menor
// bodega" no son un gasto real — es efectivo que la caja de Corabastos le
// traslada a Caja Menor (una transferencia interna). El gasto de verdad ya
// queda registrado del lado de Caja Menor (o reduce su saldo), así que
// contarlo aquí TAMBIÉN duplicaría el gasto. Se detecta por texto (no por
// una marca en la importación) para que aplique también a datos ya
// importados, sin tener que volver a subir el archivo.
function esTransferenciaCajaMenor(g) {
  return g.origen === 'corabastos' && /caja\s*menor/i.test(g.descripcion || '');
}

// Huella determinística de una fila importada — permite hacer upsert (reimportar
// el mismo archivo actualiza en vez de duplicar) aunque el origen no traiga un
// número consecutivo propio. `seq` desempata filas idénticas dentro del archivo.
function rowFingerprint(fecha, valor, descripcion, seq) {
  return `${fecha}|${valor}|${normalizeCatName(descripcion)}|${seq}`;
}

// Inserta en lotes de 500 filas para no exceder límites de tamaño de payload —
// una carga mensual completa de ventas puede tener cientos o miles de filas.
async function bulkInsert(table, rows, chunkSize = 500) {
  const inserted = [];
  for (let i = 0; i < rows.length; i += chunkSize) {
    const chunk = rows.slice(i, i + chunkSize);
    const res = await window.SB.crudInsert(table, chunk);
    inserted.push(...res);
  }
  return inserted;
}
// Igual que bulkInsert pero con upsert (usado por los importadores de Corabastos
// y Gastos Generales, que deben poder reimportarse sin duplicar filas).
async function bulkUpsert(table, rows, onConflict, chunkSize = 500) {
  const upserted = [];
  for (let i = 0; i < rows.length; i += chunkSize) {
    const chunk = rows.slice(i, i + chunkSize);
    const res = await window.SB.crudUpsert(table, chunk, { onConflict });
    upserted.push(...res);
  }
  return upserted;
}

// Primer y último día del mes "YYYY-MM" (para crear el op_periodo automático
// cuando una fila importada cae en un mes que todavía no existe).
function monthBounds(monthStr) {
  const [y, m] = monthStr.split('-').map(Number);
  const start = `${monthStr}-01`;
  const lastDay = new Date(y, m, 0).getDate();
  const end = `${monthStr}-${String(lastDay).padStart(2, '0')}`;
  return { start, end };
}

// El informe de Nómina no trae una fecha real por fila, solo un texto de
// quincena tipo "1 DE JULIO - 15 DE JULIO" / "15 DE JULIO - 31 DE JULIO" — se
// detecta la quincena por el día con el que arranca ese texto.
function quincenaLabel(periodoQuincena) {
  // "1 DE JULIO - 15 DE JULIO" y "15 DE JULIO - 31 DE JULIO" comparten el
  // número 15 — usar el día INICIAL clasificaba ambas como Quincena 1. Lo
  // correcto es mirar el día FINAL del rango: si termina en ~15 es la
  // primera quincena, si termina más adelante (28-31) es la segunda.
  const nums = String(periodoQuincena || '').match(/\d{1,2}/g);
  if (!nums || nums.length < 2) return 'Sin quincena';
  const endDay = parseInt(nums[nums.length - 1], 10);
  return endDay <= 16 ? 'Quincena 1' : 'Quincena 2';
}

// El archivo de Compras usa "-" (y a veces "(sin presentacion)") como marcador
// de "sin dato" en vez de dejar la celda vacía — se limpia a cadena vacía real.
function cleanPlaceholder(v) {
  const s = String(v || '').trim();
  if (!s || s === '-' || s.toLowerCase() === '(sin presentacion)') return '';
  return s;
}

// Busca la fila de encabezado real de un archivo cuando no está en la fila 0
// (ej. el Excel de Ventas trae 2 filas de título antes del encabezado) —
// busca la primera fila cuya primera celda coincida con `firstColLabel`.
function findHeaderRow(raw, firstColLabel, maxScan = 10) {
  for (let i = 0; i < Math.min(maxScan, raw.length); i++) {
    if (String(raw[i]?.[0] || '').trim().toLowerCase() === firstColLabel) return i;
  }
  return -1;
}

function CierreOperativoApp() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState(null);
  const [loadingPeriodData, setLoadingPeriodData] = useState(false);

  const [userProfile, setUserProfile] = useState(() => {
    try {
      const saved = localStorage.getItem('op_profile_v1');
      if (saved) return JSON.parse(saved);
    } catch (e) { /* ignore */ }
    return { name: '', role: 'Responsable de Cierre' };
  });
  const [showProfileModal, setShowProfileModal] = useState(false);
  const [showUserMenu, setShowUserMenu] = useState(false);

  useEffect(() => {
    try { localStorage.setItem('op_profile_v1', JSON.stringify(userProfile)); } catch (e) { /* ignore */ }
  }, [userProfile]);

  const [periods, setPeriods] = useState([]);
  const [categories, setCategories] = useState([]);
  const [cmCategorias, setCmCategorias] = useState([]);
  const [activePeriodId, setActivePeriodId] = useState('');
  const [ventas, setVentas] = useState([]);
  const [compras, setCompras] = useState([]);
  const [gastos, setGastos] = useState([]);
  const [nomina, setNomina] = useState([]);
  const [historico, setHistorico] = useState([]);

  const [deleteConfirm, setDeleteConfirm] = useState({ isOpen: false, type: null, id: null, title: '' });
  const [toast, setToast] = useState({ show: false, message: '', type: 'success' });

  const triggerToast = (message, type = 'success') => {
    setToast({ show: true, message, type });
    setTimeout(() => setToast({ show: false, message: '', type: 'success' }), 3500);
  };

  const activePeriod = periods.find(p => p.id === activePeriodId);

  // ---- Carga inicial: periodos + categorías, una vez hay sesión activa ----
  const loadedOnceRef = useRef(false);
  useEffect(() => {
    let cancelled = false;
    async function loadInitial() {
      try {
        const [pRows, catRows, cmCatRows] = await Promise.all([
          window.SB.crudSelect('op_periodos', { order: { col: 'start_date', asc: true } }),
          window.SB.crudSelect('op_categorias_gasto', { order: { col: 'created_at', asc: true } }),
          window.SB.crudSelect('cm_categorias', { order: { col: 'name', asc: true } }),
        ]);
        if (cancelled) return;
        const mappedPeriods = pRows.map(periodFromDb);
        setPeriods(mappedPeriods);
        setCategories(catRows.map(catFromDb));
        setCmCategorias(cmCatRows.map(r => ({ id: r.id, name: r.name, color: r.color })));
        if (mappedPeriods.length) {
          const openOne = mappedPeriods.find(p => !p.isClosed);
          setActivePeriodId((openOne || mappedPeriods[mappedPeriods.length - 1]).id);
        }
        setLoadError(null);
      } catch (err) {
        console.error(err);
        if (!cancelled) setLoadError(err.message || 'Error al cargar Cierre Operativo');
      } finally {
        if (!cancelled) setLoading(false);
      }
    }
    function maybeLoad(session) {
      if (!session || loadedOnceRef.current) return;
      loadedOnceRef.current = true;
      setLoading(true);
      loadInitial();
      if (session.user?.email) {
        setUserProfile(p => (p.name ? p : { ...p, name: session.user.email.split('@')[0] }));
      }
    }
    window.SB.getSession().then(maybeLoad);
    window.SB.onAuthChange(maybeLoad);
    return () => { cancelled = true; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // ---- Datos del periodo activo (ventas/compras/gastos/nómina de ESE periodo) ----
  useEffect(() => {
    if (!activePeriodId) { setVentas([]); setCompras([]); setGastos([]); setNomina([]); return; }
    let cancelled = false;
    (async () => {
      setLoadingPeriodData(true);
      try {
        const [v, c, g, n] = await Promise.all([
          window.SB.crudSelect('op_ventas', { eq: { period_id: activePeriodId }, order: { col: 'fecha', asc: true } }),
          window.SB.crudSelect('op_compras', { eq: { period_id: activePeriodId }, order: { col: 'fecha', asc: true } }),
          window.SB.crudSelect('op_gastos', { eq: { period_id: activePeriodId }, order: { col: 'fecha', asc: true } }),
          window.SB.crudSelect('op_nomina', { eq: { period_id: activePeriodId } }),
        ]);
        if (cancelled) return;
        setVentas(v.map(ventaFromDb));
        setCompras(c.map(compraFromDb));
        setGastos(g.map(gastoFromDb));
        setNomina(n.map(nominaFromDb));
      } catch (err) {
        triggerToast(err.message || 'Error al cargar los datos del periodo', 'error');
      } finally {
        if (!cancelled) setLoadingPeriodData(false);
      }
    })();
    return () => { cancelled = true; };
  }, [activePeriodId]);

  // ---- Histórico liviano (solo period_id + valor) para la gráfica de evolución ----
  useEffect(() => {
    if (!periods.length) { setHistorico([]); return; }
    let cancelled = false;
    (async () => {
      try {
        const [vRows, cRows, gRows, nRows] = await Promise.all([
          window.SB.crudSelect('op_ventas', { select: 'period_id, valor' }),
          window.SB.crudSelect('op_compras', { select: 'period_id, valor' }),
          window.SB.crudSelect('op_gastos', { select: 'period_id, valor' }),
          window.SB.crudSelect('op_nomina', { select: 'period_id, total_pagado' }),
        ]);
        if (cancelled) return;
        const byPeriod = {};
        periods.forEach(p => { byPeriod[p.id] = { periodId: p.id, month: p.month, ventas: 0, compras: 0, gastos: 0, nomina: 0 }; });
        vRows.forEach(r => { if (byPeriod[r.period_id]) byPeriod[r.period_id].ventas += Number(r.valor) || 0; });
        cRows.forEach(r => { if (byPeriod[r.period_id]) byPeriod[r.period_id].compras += Number(r.valor) || 0; });
        gRows.forEach(r => { if (byPeriod[r.period_id]) byPeriod[r.period_id].gastos += Number(r.valor) || 0; });
        nRows.forEach(r => { if (byPeriod[r.period_id]) byPeriod[r.period_id].nomina += Number(r.total_pagado) || 0; });
        const arr = Object.values(byPeriod)
          .map(p => ({ ...p, utilidadNeta: p.ventas - p.compras - p.gastos - p.nomina }))
          .sort((a, b) => a.month.localeCompare(b.month));
        setHistorico(arr);
      } catch (err) { console.error(err); }
    })();
    return () => { cancelled = true; };
  }, [periods]);

  const handleSaveProfile = (e) => {
    e.preventDefault();
    setShowProfileModal(false);
    triggerToast('Perfil actualizado');
  };

  const metrics = useMemo(() => {
    const totalVentas = ventas.reduce((s, v) => s + (Number(v.valor) || 0), 0);
    const totalCompras = compras.reduce((s, c) => s + (Number(c.valor) || 0), 0);
    // Excluye transferencias de Corabastos a Caja Menor (no son gasto real,
    // ver esTransferenciaCajaMenor) de TODOS los totales/agrupaciones de
    // gasto — solo se conservan visibles en la tabla cruda de Gastos.
    const gastosReales = gastos.filter(g => !esTransferenciaCajaMenor(g));
    const totalGastos = gastosReales.reduce((s, g) => s + (Number(g.valor) || 0), 0);
    const totalNomina = nomina.reduce((s, n) => s + (Number(n.totalPagado) || 0), 0);
    const utilidadBruta = totalVentas - totalCompras;
    const utilidadNeta = utilidadBruta - totalGastos - totalNomina;
    const margenNeto = totalVentas > 0 ? (utilidadNeta / totalVentas * 100) : 0;
    const margenBruto = totalVentas > 0 ? (utilidadBruta / totalVentas * 100) : 0;

    const topClientes = groupSum(ventas, v => v.cliente).slice(0, 10);
    const topProductosVenta = groupSum(ventas, v => v.producto).slice(0, 10);
    const ventasPorSucursal = groupSum(ventas, v => v.sucursal).slice(0, 10);
    const ventasPorFuente = groupSum(ventas, v => v.fuente).slice(0, 10);
    const nVentas = ventas.length;
    const ticketPromedioVenta = nVentas > 0 ? totalVentas / nVentas : 0;

    const topProveedores = groupSum(compras, c => c.proveedor).slice(0, 10);
    const topProductosCompra = groupSum(compras, c => c.producto).slice(0, 10);
    const comprasPorMetodoPago = groupSum(compras, c => c.metodoPago || 'Sin dato').slice(0, 10);
    const comprasPorCompradora = groupSum(compras, c => c.compradora || 'Sin dato').slice(0, 10);
    const nCompras = compras.length;
    const ticketPromedioCompra = nCompras > 0 ? totalCompras / nCompras : 0;

    const byCat = {};
    gastosReales.forEach(g => {
      const cat = categories.find(c => c.id === g.categoryId);
      const name = cat ? cat.name : 'Sin categoría';
      const color = cat ? cat.color : '#94A3B8';
      byCat[name] = byCat[name] || { name, value: 0, color };
      byCat[name].value += Number(g.valor) || 0;
    });
    const gastosPorCategoria = Object.values(byCat).sort((a, b) => b.value - a.value);

    const ORIGEN_GASTO_LABEL = { corabastos: 'Corabastos', general: 'General', '': 'Manual / Otros' };
    const byOrigen = {};
    gastosReales.forEach(g => {
      const key = g.sourceCmId ? 'Caja Menor' : (ORIGEN_GASTO_LABEL[g.origen] || g.origen);
      byOrigen[key] = (byOrigen[key] || 0) + (Number(g.valor) || 0);
    });
    const gastosPorOrigen = Object.entries(byOrigen).map(([name, value]) => ({ name, value })).sort((a, b) => b.value - a.value);

    const totalTransferenciasCajaMenor = gastos.filter(esTransferenciaCajaMenor).reduce((s, g) => s + (Number(g.valor) || 0), 0);

    return {
      totalVentas, totalCompras, totalGastos, totalNomina, utilidadBruta, utilidadNeta, margenNeto, margenBruto,
      topClientes, topProductosVenta, ventasPorSucursal, ventasPorFuente, nVentas, ticketPromedioVenta,
      topProveedores, topProductosCompra, comprasPorMetodoPago, comprasPorCompradora, nCompras, ticketPromedioCompra,
      gastosPorCategoria, gastosPorOrigen, totalTransferenciasCajaMenor,
    };
  }, [ventas, compras, gastos, nomina, categories]);

  const executeDelete = async () => {
    const { type, id } = deleteConfirm;
    if (!type || !id) return;
    const tableByType = { venta: 'op_ventas', compra: 'op_compras', gasto: 'op_gastos', nomina: 'op_nomina', categoria: 'op_categorias_gasto', periodo: 'op_periodos' };
    const setterByType = { venta: setVentas, compra: setCompras, gasto: setGastos, nomina: setNomina };
    try {
      if (type === 'periodo') {
        if (periods.length <= 1) {
          triggerToast('No se puede eliminar el único periodo existente', 'error');
        } else {
          await window.SB.crudDelete('op_periodos', id);
          setPeriods(prev => prev.filter(p => p.id !== id));
          setActivePeriodId(prev => (prev === id ? (periods.find(p => p.id !== id)?.id || '') : prev));
          triggerToast('Periodo eliminado', 'info');
        }
      } else if (type === 'categoria') {
        await window.SB.crudDelete('op_categorias_gasto', id);
        setCategories(prev => prev.filter(c => c.id !== id));
        triggerToast('Categoría eliminada', 'info');
      } else {
        await window.SB.crudDelete(tableByType[type], id);
        setterByType[type](prev => prev.filter(x => x.id !== id));
        triggerToast('Registro eliminado', 'info');
      }
    } catch (err) {
      triggerToast(err.message || 'Error al eliminar', 'error');
    }
    setDeleteConfirm({ isOpen: false, type: null, id: null, title: '' });
  };

  // ==========================================================================
  // Navegación
  // ==========================================================================
  const Navigation = () => {
    const navItems = [
      { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
      { id: 'ventas', label: 'Ventas', icon: TrendingUp },
      { id: 'compras', label: 'Compras', icon: ShoppingCart },
      { id: 'gastos', label: 'Gastos', icon: Receipt },
      { id: 'analisis', label: 'Análisis', icon: PieChartIcon },
      { id: 'nomina', label: 'Nómina', icon: Users },
      { id: 'reportes', label: 'Reportes', icon: FileText },
      { id: 'periodos', label: 'Periodos / Cierre', icon: Settings },
    ];
    return (
      <nav className={`bg-slate-900 text-slate-300 w-64 min-h-screen flex flex-col justify-between transition-transform transform ${isMobileMenuOpen ? 'translate-x-0 fixed inset-y-0 left-0 z-50' : '-translate-x-full hidden md:translate-x-0 md:flex md:relative'}`}>
        <div>
          <div className="p-4 bg-slate-950 flex items-center justify-between shadow-md">
            <div className="flex items-center space-x-2">
              <img src="../assets/logo-blanco.png" alt="Ecocosecha" className="h-9 w-auto" />
              <div>
                <span className="text-lg font-bold text-white tracking-tight">Cierre<span className="text-indigo-400"> Operativo</span></span>
                <span className="block text-[10px] text-slate-400 font-medium">ECOCOSECHA SAS</span>
              </div>
            </div>
            <button className="md:hidden text-slate-400 hover:text-white" onClick={() => setIsMobileMenuOpen(false)}>
              <X className="h-6 w-6" />
            </button>
          </div>

          <div className="p-4 border-b border-slate-800">
            <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Periodo Activo</label>
            <select
              value={activePeriodId}
              onChange={(e) => setActivePeriodId(e.target.value)}
              className="w-full bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 ring-indigo-500/50"
            >
              {periods.length === 0 && <option value="">Sin periodos aún</option>}
              {periods.map(p => (
                <option key={p.id} value={p.id}>{p.month} ({p.isClosed ? '🔒 Cerrado' : '🔓 Abierto'})</option>
              ))}
            </select>
          </div>

          <div className="p-3 space-y-1">
            {navItems.map(item => (
              <button
                key={item.id}
                onClick={() => { setActiveTab(item.id); setIsMobileMenuOpen(false); }}
                className={`w-full flex items-center space-x-3 px-4 py-2.5 rounded-lg text-sm transition-all ${activeTab === item.id ? 'bg-indigo-600/20 text-indigo-400 font-semibold shadow-inner border-l-4 border-indigo-400' : 'hover:bg-slate-800 hover:text-white font-medium'}`}
              >
                <item.icon className={`h-5 w-5 ${activeTab === item.id ? 'text-indigo-400' : 'text-slate-400'}`} />
                <span>{item.label}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="p-4 bg-slate-950 border-t border-slate-800 text-xs text-slate-400 space-y-2">
          <div className="flex items-center justify-between text-[11px]">
            <span>Estado Periodo:</span>
            <span className={`px-2 py-0.5 rounded-full font-bold ${activePeriod?.isClosed ? 'bg-rose-500/20 text-rose-400' : 'bg-emerald-500/20 text-emerald-400'}`}>
              {activePeriod ? (activePeriod.isClosed ? 'Cerrado' : 'En Curso') : 'Sin periodo'}
            </span>
          </div>
          <p className="text-[10px] text-center text-slate-500 pt-2 border-t border-slate-900">Ecocosecha SAS · Cierre Operativo</p>
        </div>
      </nav>
    );
  };

  // ==========================================================================
  // Dashboard
  // ==========================================================================
  const KpiCard = ({ label, value, accent, sub }) => (
    <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
      <div className="text-[10px] font-bold uppercase tracking-wider text-slate-400">{label}</div>
      <div className={`text-xl font-extrabold mt-1 ${accent || 'text-slate-800'}`}>{value}</div>
      {sub && <div className="text-[11px] text-slate-400 mt-1">{sub}</div>}
    </div>
  );

  const PieBlock = ({ data, tooltipFormatter }) => (
    data.length > 0 ? (
      <div className="h-64">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie data={data} cx="50%" cy="50%" innerRadius={55} outerRadius={80} paddingAngle={4} dataKey="value">
              {data.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color || COLOR_PALETTE[index % COLOR_PALETTE.length]} />
              ))}
            </Pie>
            <RechartsTooltip formatter={tooltipFormatter || (v => formatCurrency(v))} />
          </PieChart>
        </ResponsiveContainer>
      </div>
    ) : <EmptyChart />
  );
  const EvolucionLineBlock = ({ dataKey, name, color }) => (
    historico.length > 0 ? (
      <div className="h-64">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={historico}>
            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
            <XAxis dataKey="month" tick={{ fontSize: 11, fill: '#64748B' }} />
            <YAxis tickFormatter={v => `$${(v / 1000000).toFixed(0)}M`} tick={{ fontSize: 11, fill: '#64748B' }} />
            <RechartsTooltip formatter={v => formatCurrency(v)} />
            <Line type="monotone" dataKey={dataKey} stroke={color} strokeWidth={2} dot={{ r: 3 }} name={name} />
          </LineChart>
        </ResponsiveContainer>
      </div>
    ) : <EmptyChart />
  );

  const DashboardResumen = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <KpiCard label="Ventas" value={formatCurrency(metrics.totalVentas)} accent="text-emerald-600" />
        <KpiCard label="Compras" value={formatCurrency(metrics.totalCompras)} accent="text-rose-600" />
        <KpiCard label="Gastos" value={formatCurrency(metrics.totalGastos)} accent="text-amber-600" />
        <KpiCard label="Nómina" value={formatCurrency(metrics.totalNomina)} accent="text-rose-500" />
      </div>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-slate-900 text-white p-5 rounded-xl shadow-md">
          <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400">Utilidad Bruta</div>
          <div className="text-2xl font-extrabold mt-1 text-indigo-400">{formatCurrency(metrics.utilidadBruta)}</div>
          <div className="text-[11px] text-slate-400 mt-1">Ventas − Compras</div>
        </div>
        <div className="bg-slate-900 text-white p-5 rounded-xl shadow-md">
          <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400">Margen Bruto</div>
          <div className={`text-2xl font-extrabold mt-1 ${metrics.margenBruto >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>{metrics.margenBruto.toFixed(1)}%</div>
          <div className="text-[11px] text-slate-400 mt-1">Utilidad Bruta / Ventas</div>
        </div>
        <div className="bg-slate-900 text-white p-5 rounded-xl shadow-md">
          <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400">Utilidad Neta</div>
          <div className={`text-2xl font-extrabold mt-1 ${metrics.utilidadNeta >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>{formatCurrency(metrics.utilidadNeta)}</div>
          <div className="text-[11px] text-slate-400 mt-1">Utilidad Bruta − Gastos − Nómina</div>
        </div>
        <div className="bg-slate-900 text-white p-5 rounded-xl shadow-md">
          <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400">Margen Neto</div>
          <div className={`text-2xl font-extrabold mt-1 ${metrics.margenNeto >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>{metrics.margenNeto.toFixed(1)}%</div>
          <div className="text-[11px] text-slate-400 mt-1">Utilidad Neta / Ventas</div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <ChartCard title="Top 10 Clientes (Ventas)">
          <BarBlock data={metrics.topClientes} color="#4f46e5" />
        </ChartCard>
        <ChartCard title="Top 10 Productos (Ventas)">
          <BarBlock data={metrics.topProductosVenta} color="#0ea5e9" />
        </ChartCard>
        <ChartCard title="Top 10 Proveedores (Compras)">
          <BarBlock data={metrics.topProveedores} color="#f43f5e" />
        </ChartCard>
        <ChartCard title="Gastos por Categoría">
          <PieBlock data={metrics.gastosPorCategoria} />
        </ChartCard>
        <ChartCard title="Evolución histórica (Ventas y Utilidad Neta por periodo)">
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={historico}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
                <XAxis dataKey="month" tick={{ fontSize: 11, fill: '#64748B' }} />
                <YAxis tickFormatter={v => `$${(v / 1000000).toFixed(0)}M`} tick={{ fontSize: 11, fill: '#64748B' }} />
                <RechartsTooltip formatter={v => formatCurrency(v)} />
                <Line type="monotone" dataKey="ventas" stroke="#0ea5e9" strokeWidth={2} dot={{ r: 3 }} name="Ventas" />
                <Line type="monotone" dataKey="utilidadNeta" stroke="#4f46e5" strokeWidth={2} dot={{ r: 3 }} name="Utilidad Neta" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </ChartCard>
      </div>
    </div>
  );

  const DashboardVentas = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        <KpiCard label="Total Ventas" value={formatCurrency(metrics.totalVentas)} accent="text-emerald-600" />
        <KpiCard label="Nº de Líneas Vendidas" value={metrics.nVentas.toLocaleString('es-CO')} />
        <KpiCard label="Ticket Promedio" value={formatCurrency(metrics.ticketPromedioVenta)} />
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <ChartCard title="Top 10 Clientes"><BarBlock data={metrics.topClientes} color="#4f46e5" /></ChartCard>
        <ChartCard title="Top 10 Productos"><BarBlock data={metrics.topProductosVenta} color="#0ea5e9" /></ChartCard>
        <ChartCard title="Ventas por Sucursal de Cliente"><BarBlock data={metrics.ventasPorSucursal} color="#10b981" /></ChartCard>
        <ChartCard title="Ventas por Fuente"><PieBlock data={metrics.ventasPorFuente} /></ChartCard>
        <ChartCard title="Evolución mensual de Ventas"><EvolucionLineBlock dataKey="ventas" name="Ventas" color="#0ea5e9" /></ChartCard>
      </div>
    </div>
  );

  const DashboardCompras = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        <KpiCard label="Total Compras" value={formatCurrency(metrics.totalCompras)} accent="text-rose-600" />
        <KpiCard label="Nº de Líneas Compradas" value={metrics.nCompras.toLocaleString('es-CO')} />
        <KpiCard label="Ticket Promedio" value={formatCurrency(metrics.ticketPromedioCompra)} />
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <ChartCard title="Top 10 Proveedores"><BarBlock data={metrics.topProveedores} color="#f43f5e" /></ChartCard>
        <ChartCard title="Top 10 Productos Comprados"><BarBlock data={metrics.topProductosCompra} color="#8B5CF6" /></ChartCard>
        <ChartCard title="Compras por Método de Pago"><PieBlock data={metrics.comprasPorMetodoPago} /></ChartCard>
        <ChartCard title="Compras por Compradora"><BarBlock data={metrics.comprasPorCompradora} color="#F59E0B" /></ChartCard>
        <ChartCard title="Evolución mensual de Compras"><EvolucionLineBlock dataKey="compras" name="Compras" color="#f43f5e" /></ChartCard>
      </div>
    </div>
  );

  const DashboardGastos = () => {
    const [filtroOrigenGasto, setFiltroOrigenGasto] = useState('');
    const gastosFiltrados = gastos.filter(g => !esTransferenciaCajaMenor(g)).filter(g => filtroOrigenGasto ? g.origen === filtroOrigenGasto : true);
    const totalGastosFiltrados = gastosFiltrados.reduce((s, g) => s + (Number(g.valor) || 0), 0);
    const byCat = {};
    gastosFiltrados.forEach(g => {
      const cat = categories.find(c => c.id === g.categoryId);
      const name = cat ? cat.name : 'Sin categoría';
      const color = cat ? cat.color : '#94A3B8';
      byCat[name] = byCat[name] || { name, value: 0, color };
      byCat[name].value += Number(g.valor) || 0;
    });
    const gastosPorCategoriaFiltrado = Object.values(byCat).sort((a, b) => b.value - a.value);

    return (
      <div className="space-y-6">
        <div className="flex items-center gap-3">
          <select className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white" value={filtroOrigenGasto} onChange={e => setFiltroOrigenGasto(e.target.value)}>
            <option value="">Todos los orígenes (General + Corabastos)</option>
            <option value="general">Solo General</option>
            <option value="corabastos">Solo Corabastos</option>
          </select>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
          <KpiCard label="Total Gastos" value={formatCurrency(totalGastosFiltrados)} accent="text-amber-600" />
          <KpiCard label="Nº de Categorías con Gasto" value={gastosPorCategoriaFiltrado.length} />
          <KpiCard label="Categoría con más Gasto" value={gastosPorCategoriaFiltrado[0]?.name || '—'} />
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <ChartCard title="Gastos por Categoría (torta)"><PieBlock data={gastosPorCategoriaFiltrado} /></ChartCard>
          <ChartCard title="Gastos por Categoría (ranking)"><BarBlock data={gastosPorCategoriaFiltrado} color="#f59e0b" /></ChartCard>
          <ChartCard title="Gastos por Origen"><PieBlock data={metrics.gastosPorOrigen} /></ChartCard>
          <ChartCard title="Evolución mensual de Gastos"><EvolucionLineBlock dataKey="gastos" name="Gastos" color="#f59e0b" /></ChartCard>
        </div>
      </div>
    );
  };

  const DashboardView = () => {
    const [dashboardTab, setDashboardTab] = useState('resumen');
    const TABS = [
      { id: 'resumen', label: 'Resumen General' },
      { id: 'ventas', label: 'Ventas' },
      { id: 'compras', label: 'Compras' },
      { id: 'gastos', label: 'Gastos' },
    ];
    return (
      <div className="space-y-6">
        <div className="border-b border-slate-200 pb-4">
          <h1 className="text-2xl font-bold text-slate-800">Cierre Operativo</h1>
          {activePeriod ? (
            <p className="text-slate-500 text-sm">Periodo: <span className="font-semibold text-slate-700">{activePeriod.month}</span> ({activePeriod.startDate} al {activePeriod.endDate})</p>
          ) : (
            <p className="text-slate-500 text-sm">No hay ningún periodo creado todavía — ve a <strong>Periodos / Cierre</strong> para aperturar el primero.</p>
          )}
        </div>

        <div className="flex gap-1 border-b border-slate-200">
          {TABS.map(t => (
            <button
              key={t.id}
              onClick={() => setDashboardTab(t.id)}
              className={`px-4 py-2 text-sm font-bold border-b-2 -mb-px transition-colors ${dashboardTab === t.id ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}
            >
              {t.label}
            </button>
          ))}
        </div>

        {dashboardTab === 'resumen' && <DashboardResumen />}
        {dashboardTab === 'ventas' && <DashboardVentas />}
        {dashboardTab === 'compras' && <DashboardCompras />}
        {dashboardTab === 'gastos' && <DashboardGastos />}
      </div>
    );
  };

  const ChartCard = ({ title, children }) => (
    <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
      <h3 className="text-sm font-bold text-slate-800 mb-4">{title}</h3>
      {children}
    </div>
  );
  const EmptyChart = () => (
    <div className="h-64 flex flex-col items-center justify-center text-slate-400 text-sm">
      <PieChartIcon className="h-10 w-10 mb-2 opacity-30" />
      <span>Sin datos en este periodo</span>
    </div>
  );
  // Los nombres de cliente/proveedor/producto suelen ser largos y, sin
  // truncar, el eje Y los partía en 3-4 líneas y "aplastaba" la gráfica
  // entera — se recorta el tick visualmente pero el tooltip sigue
  // mostrando el nombre completo.
  const truncateLabel = (s, n = 26) => (String(s || '').length > n ? `${String(s).slice(0, n - 1)}…` : (s || ''));

  // Recharts recorta el texto del tick por su cuenta (con su propio "…") en
  // cuanto no le alcanza el ancho, sin importar el tickFormatter — por eso
  // los nombres se veían cortadísimos aunque truncateLabel permitiera hasta
  // 30 caracteres. Un tick "custom" (un <text> propio) evita ese recorte
  // automático y muestra exactamente lo que truncateLabel decide.
  const YAxisNameTick = ({ x, y, payload }) => (
    <text x={x} y={y} dy={4} textAnchor="end" fontSize={10} fill="#334155">{truncateLabel(payload.value)}</text>
  );

  const BarBlock = ({ data, color }) => (
    data.length > 0 ? (
      <div className="h-64">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={data} layout="vertical" margin={{ left: 10, right: 16 }}>
            <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="#E2E8F0" />
            <XAxis type="number" tickFormatter={v => `$${(v / 1000).toFixed(0)}k`} tick={{ fontSize: 10, fill: '#64748B' }} />
            <YAxis type="category" dataKey="name" width={210} tick={<YAxisNameTick />} interval={0} />
            <RechartsTooltip formatter={v => formatCurrency(v)} />
            <Bar dataKey="value" fill={color} radius={[0, 6, 6, 0]} />
          </BarChart>
        </ResponsiveContainer>
      </div>
    ) : <EmptyChart />
  );

  // Con importaciones masivas, las tablas de Ventas/Compras/Gastos pueden
  // tener miles de filas — renderizarlas todas de una vez en el DOM hacía la
  // navegación muy pesada (scroll, búsqueda). Se pagina en el cliente
  // (mostrar de a TABLE_PAGE_SIZE) reutilizando este control en las 3 vistas.
  const TABLE_PAGE_SIZE = 50;
  const Pager = ({ page, setPage, total }) => {
    const totalPages = Math.max(1, Math.ceil(total / TABLE_PAGE_SIZE));
    if (total <= TABLE_PAGE_SIZE) return null;
    const from = total === 0 ? 0 : page * TABLE_PAGE_SIZE + 1;
    const to = Math.min(total, (page + 1) * TABLE_PAGE_SIZE);
    return (
      <div className="flex items-center justify-between px-4 py-3 border-t border-slate-200 text-xs text-slate-500">
        <span>Mostrando {from}–{to} de {total}</span>
        <div className="flex items-center gap-2">
          <button onClick={() => setPage(p => Math.max(0, p - 1))} disabled={page === 0} className="px-3 py-1.5 border border-slate-300 rounded-lg font-bold disabled:opacity-40 hover:bg-slate-50">Anterior</button>
          <span className="px-2 font-bold text-slate-600">{page + 1} / {totalPages}</span>
          <button onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1} className="px-3 py-1.5 border border-slate-300 rounded-lg font-bold disabled:opacity-40 hover:bg-slate-50">Siguiente</button>
        </div>
      </div>
    );
  };

  // Lista los lotes de importación (agrupados por periodo) de un origen dado
  // ('informe_ventas' / 'informe_compras' / 'informe_nomina') y deja borrar
  // el lote completo de un periodo con un clic — para deshacer una carga
  // incompleta o equivocada antes de volver a importar el archivo correcto.
  const ImportBatchManager = ({ rows, origen, table, label, onDeleted }) => {
    const [confirmBatch, setConfirmBatch] = useState(null);
    const [deleting, setDeleting] = useState(false);

    const batches = {};
    rows.filter(r => r.origen === origen).forEach(r => {
      const pid = r.periodId;
      if (!batches[pid]) {
        const p = periods.find(x => x.id === pid);
        batches[pid] = { periodId: pid, month: p?.month || 'Periodo eliminado', count: 0, valor: 0 };
      }
      batches[pid].count += 1;
      batches[pid].valor += Number(r.valor) || 0;
    });
    const list = Object.values(batches).sort((a, b) => b.month.localeCompare(a.month));
    if (!list.length) return null;

    const handleDelete = async () => {
      if (!confirmBatch) return;
      setDeleting(true);
      try {
        await window.SB.crudDeleteWhere(table, { origen, period_id: confirmBatch.periodId });
        onDeleted(confirmBatch.periodId);
        triggerToast(`${confirmBatch.count} fila(s) eliminada(s) del periodo ${confirmBatch.month}`);
        setConfirmBatch(null);
      } catch (err) {
        triggerToast(err.message || 'Error al eliminar la importación', 'error');
      } finally {
        setDeleting(false);
      }
    };

    return (
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
        <h3 className="text-sm font-bold text-slate-800 mb-1">Importaciones de "{label}" por periodo</h3>
        <p className="text-xs text-slate-400 mb-3">Si subiste un archivo incompleto o equivocado, elimina aquí el lote completo de ese periodo antes de volver a importar.</p>
        <div className="space-y-2">
          {list.map(b => (
            <div key={b.periodId} className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border border-slate-200 rounded-lg px-3 py-2">
              <div className="text-xs">
                <span className="font-bold text-slate-700">{b.month}</span>
                <span className="text-slate-400"> · {b.count} fila(s) · {formatCurrency(b.valor)}</span>
              </div>
              <button onClick={() => setConfirmBatch(b)} className="text-xs font-bold text-rose-600 hover:text-rose-700 flex items-center self-start sm:self-auto">
                <Trash2 className="h-3.5 w-3.5 mr-1" /> Eliminar este lote
              </button>
            </div>
          ))}
        </div>

        {confirmBatch && (
          <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-sm w-full overflow-hidden">
              <div className="bg-rose-600 text-white p-4">
                <h3 className="font-bold flex items-center"><AlertTriangle className="h-4 w-4 mr-2" /> Eliminar importación</h3>
              </div>
              <div className="p-6 space-y-4">
                <p className="text-sm text-slate-700">Vas a eliminar <strong>{confirmBatch.count} fila(s)</strong> de "{label}" del periodo <strong>{confirmBatch.month}</strong> ({formatCurrency(confirmBatch.valor)}). Esta acción no se puede deshacer.</p>
                <div className="flex justify-end gap-3 pt-2 border-t border-slate-200">
                  <button onClick={() => setConfirmBatch(null)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button onClick={handleDelete} disabled={deleting} className="px-4 py-2 bg-rose-600 disabled:opacity-60 text-white rounded-lg text-sm font-bold hover:bg-rose-700">{deleting ? 'Eliminando...' : 'Sí, eliminar'}</button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  };

  // Detecta filas "huérfanas" del periodo activo sin fecha — la firma típica
  // de haber usado el botón "Importar Excel" (plantilla simple) con el
  // archivo del informe completo (10 columnas), que lee columnas equivocadas
  // y deja fecha vacía en casi todas las filas. Permite limpiarlas de un clic.
  const OrphanRowsWarning = ({ rows, table, label, onDeleted }) => {
    const [showConfirm, setShowConfirm] = useState(false);
    const [deleting, setDeleting] = useState(false);
    const huerfanas = rows.filter(r => !r.fecha);
    if (!huerfanas.length) return null;

    const handleDelete = async () => {
      setDeleting(true);
      try {
        await window.SB.crudDeleteWhereNull(table, { period_id: activePeriodId }, 'fecha');
        onDeleted();
        triggerToast(`${huerfanas.length} fila(s) sin fecha eliminada(s)`);
        setShowConfirm(false);
      } catch (err) {
        triggerToast(err.message || 'Error al eliminar', 'error');
      } finally {
        setDeleting(false);
      }
    };

    return (
      <div className="bg-amber-50 border border-amber-300 rounded-xl p-4 flex flex-col sm:flex-row sm:items-start justify-between gap-3">
        <div className="flex items-start gap-3">
          <AlertTriangle className="h-5 w-5 text-amber-600 mt-0.5 flex-shrink-0" />
          <div>
            <p className="text-sm font-bold text-amber-800">{huerfanas.length} fila(s) sin fecha detectadas en "{label}" — probablemente una importación con el botón equivocado.</p>
            <p className="text-xs text-amber-700 mt-0.5">Se pueden eliminar de una vez antes de volver a importar el archivo correcto.</p>
          </div>
        </div>
        <button onClick={() => setShowConfirm(true)} className="text-xs font-bold text-rose-600 hover:text-rose-700 whitespace-nowrap flex items-center self-start"><Trash2 className="h-3.5 w-3.5 mr-1" /> Eliminar</button>

        {showConfirm && (
          <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-sm w-full overflow-hidden">
              <div className="bg-rose-600 text-white p-4"><h3 className="font-bold flex items-center"><AlertTriangle className="h-4 w-4 mr-2" /> Eliminar filas sin fecha</h3></div>
              <div className="p-6 space-y-4">
                <p className="text-sm text-slate-700">Vas a eliminar <strong>{huerfanas.length} fila(s)</strong> sin fecha de "{label}" en el periodo activo. Esta acción no se puede deshacer.</p>
                <div className="flex justify-end gap-3 pt-2 border-t border-slate-200">
                  <button onClick={() => setShowConfirm(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button onClick={handleDelete} disabled={deleting} className="px-4 py-2 bg-rose-600 disabled:opacity-60 text-white rounded-lg text-sm font-bold hover:bg-rose-700">{deleting ? 'Eliminando...' : 'Sí, eliminar'}</button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  };

  // ==========================================================================
  // Análisis — filtros específicos por cliente/sucursal (Ventas) o proveedor
  // (Compras), con totales que se recalculan según el filtro elegido. Vive
  // aparte del Dashboard porque este último muestra rankings fijos de todo
  // el periodo, mientras que aquí el usuario elige un corte específico.
  // ==========================================================================
  // Combo de texto libre + lista desplegable sobre una lista plana de strings
  // (cliente/sucursal/proveedor) — se puede escribir para buscar o elegir de
  // la lista, igual que el ProviderCombobox de Caja Menor pero sin objetos.
  const SearchableSelect = ({ value, onChange, options, placeholder }) => {
    const [query, setQuery] = useState(value || '');
    const [open, setOpen] = useState(false);
    const boxRef = useRef(null);

    useEffect(() => { setQuery(value || ''); }, [value]);
    useEffect(() => {
      function onDocClick(e) { if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false); }
      document.addEventListener('mousedown', onDocClick);
      return () => document.removeEventListener('mousedown', onDocClick);
    }, []);

    const filtered = options.filter(o => o.toLowerCase().includes(query.toLowerCase()));

    return (
      <div className="relative" ref={boxRef}>
        <input
          type="text"
          className="w-56 p-2 border border-slate-300 rounded-lg text-sm bg-white"
          placeholder={placeholder}
          value={query}
          onFocus={(e) => { setOpen(true); e.target.select(); }}
          onChange={(e) => { setQuery(e.target.value); setOpen(true); if (value) onChange(''); }}
        />
        {open && (
          <div className="absolute z-30 mt-1 w-72 max-h-56 overflow-y-auto bg-white border border-slate-200 rounded-lg shadow-lg">
            <div className="px-3 py-2 text-sm text-slate-400 hover:bg-indigo-50 cursor-pointer" onMouseDown={(e) => { e.preventDefault(); onChange(''); setQuery(''); setOpen(false); }}>{placeholder}</div>
            {filtered.map(o => (
              <div key={o} className="px-3 py-2 text-sm hover:bg-indigo-50 cursor-pointer" onMouseDown={(e) => { e.preventDefault(); onChange(o); setQuery(o); setOpen(false); }}>{o}</div>
            ))}
            {filtered.length === 0 && <div className="px-3 py-2 text-sm text-slate-400">Sin coincidencias</div>}
          </div>
        )}
      </div>
    );
  };

  const VENTAS_DETALLE_COLS = [
    { key: 'fecha', label: 'Fecha', align: 'left' },
    { key: 'cliente', label: 'Cliente', align: 'left' },
    { key: 'sucursal', label: 'Sucursal', align: 'left' },
    { key: 'producto', label: 'Producto', align: 'left' },
    { key: 'cantidad', label: 'Cantidad', align: 'right' },
    { key: 'precioUnitario', label: 'Precio Unit.', align: 'right', money: true },
    { key: 'valor', label: 'Valor', align: 'right', money: true, bold: true },
    { key: 'fuente', label: 'Fuente', align: 'left' },
  ];
  const POR_PRODUCTO_COLS = [
    { key: 'producto', label: 'Producto', align: 'left' },
    { key: 'cantidad', label: 'Cantidad Total', align: 'right' },
    { key: 'precioPromedio', label: 'Precio Promedio', align: 'right', money: true },
    { key: 'valor', label: 'Valor Total', align: 'right', money: true, bold: true },
    { key: 'lineas', label: 'Nº Líneas', align: 'right' },
  ];
  const COMPRAS_DETALLE_COLS = [
    { key: 'fecha', label: 'Fecha', align: 'left' },
    { key: 'proveedor', label: 'Proveedor', align: 'left' },
    { key: 'producto', label: 'Producto', align: 'left' },
    { key: 'presentacion', label: 'Presentación', align: 'left' },
    { key: 'cantidad', label: 'Cantidad', align: 'right' },
    { key: 'precioUnitario', label: 'Precio Unit.', align: 'right', money: true },
    { key: 'valor', label: 'Valor', align: 'right', money: true, bold: true },
    { key: 'metodoPago', label: 'Método Pago', align: 'left' },
    { key: 'compradora', label: 'Compradora', align: 'left' },
  ];
  const DetalleVistaSelect = ({ value, onChange, options }) => (
    <select className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white" value={value} onChange={e => onChange(e.target.value)}>
      <option value="desglosado">Ver desglosado (línea por línea)</option>
      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  );
  const POR_CLIENTE_COLS = [
    { key: 'cliente', label: 'Cliente', align: 'left' },
    { key: 'cantidad', label: 'Cantidad Total', align: 'right' },
    { key: 'precioPromedio', label: 'Precio Promedio', align: 'right', money: true },
    { key: 'valor', label: 'Valor Total', align: 'right', money: true, bold: true },
    { key: 'lineas', label: 'Nº Líneas', align: 'right' },
  ];
  const POR_PROVEEDOR_COLS = [
    { key: 'proveedor', label: 'Proveedor', align: 'left' },
    { key: 'cantidad', label: 'Cantidad Total', align: 'right' },
    { key: 'precioPromedio', label: 'Precio Promedio', align: 'right', money: true },
    { key: 'valor', label: 'Valor Total', align: 'right', money: true, bold: true },
    { key: 'lineas', label: 'Nº Líneas', align: 'right' },
  ];

  const AnalisisVentas = () => {
    const [filtroCliente, setFiltroCliente] = useState('');
    const [filtroSucursal, setFiltroSucursal] = useState('');
    const [vistaDetalle, setVistaDetalle] = useState('desglosado');
    // Cascada en ambos sentidos: elegir un cliente limita las sucursales a
    // las que ESE cliente realmente tiene, y viceversa — antes se mostraban
    // las sucursales de TODOS los clientes mezcladas.
    const clientes = [...new Set(ventas.filter(v => filtroSucursal ? v.sucursal === filtroSucursal : true).map(v => v.cliente).filter(Boolean))].sort();
    const sucursales = [...new Set(ventas.filter(v => filtroCliente ? v.cliente === filtroCliente : true).map(v => v.sucursal).filter(Boolean))].sort();
    useEffect(() => { if (filtroSucursal && !sucursales.includes(filtroSucursal)) setFiltroSucursal(''); }, [filtroCliente]); // eslint-disable-line react-hooks/exhaustive-deps
    useEffect(() => { if (filtroCliente && !clientes.includes(filtroCliente)) setFiltroCliente(''); }, [filtroSucursal]); // eslint-disable-line react-hooks/exhaustive-deps
    // Las notas de crédito no siempre traen la sucursal de la factura que
    // están reversando (suelen llegar con sucursal "N/A") — si se filtran
    // igual que una venta normal, se "pierden" al elegir una sucursal
    // puntual y el total sale inflado (sin descontar la nota de crédito).
    // Por eso, al filtrar por sucursal, las notas de crédito del cliente
    // elegido siempre se incluyen para que el total quede neto real.
    const filtradas = ventas.filter(v => {
      if (filtroCliente && v.cliente !== filtroCliente) return false;
      if (filtroSucursal) {
        const esNotaCredito = /nota\s*cr[ée]dito/i.test(v.fuente || '');
        if (!esNotaCredito && v.sucursal !== filtroSucursal) return false;
      }
      return true;
    });
    const totalValor = filtradas.reduce((s, v) => s + (Number(v.valor) || 0), 0);
    const totalKilos = filtradas.reduce((s, v) => s + (Number(v.cantidad) || 0), 0);
    const nReferencias = new Set(filtradas.map(v => v.producto).filter(Boolean)).size;
    const porCliente = groupSum(filtradas, v => v.cliente).slice(0, 10);
    const porSucursal = groupSum(filtradas, v => v.sucursal).slice(0, 10);
    const porProducto = groupSum(filtradas, v => v.producto).slice(0, 10);

    return (
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
          <SearchableSelect value={filtroCliente} onChange={setFiltroCliente} options={clientes} placeholder="Todos los clientes" />
          <SearchableSelect value={filtroSucursal} onChange={setFiltroSucursal} options={sucursales} placeholder="Todas las sucursales" />
          {(filtroCliente || filtroSucursal) && (
            <button onClick={() => { setFiltroCliente(''); setFiltroSucursal(''); }} className="text-xs font-bold text-slate-400 hover:text-slate-600 underline">Limpiar filtros</button>
          )}
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <KpiCard label="Total Vendido" value={formatCurrency(totalValor)} accent="text-emerald-600" />
          <KpiCard label="Total Kilos/Unidades Vendidos" value={totalKilos.toLocaleString('es-CO', { maximumFractionDigits: 1 })} sub="Suma de la columna Cantidad" />
          <KpiCard label="Nº de Referencias" value={nReferencias} />
          <KpiCard label="Nº de Líneas" value={filtradas.length} />
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <ChartCard title="Ventas por Cliente"><BarBlock data={porCliente} color="#4f46e5" /></ChartCard>
          <ChartCard title="Ventas por Sucursal"><BarBlock data={porSucursal} color="#10b981" /></ChartCard>
          <ChartCard title="Top Productos (dentro del filtro)"><BarBlock data={porProducto} color="#0ea5e9" /></ChartCard>
        </div>
        <SortableTable
          title="Detalle de Ventas"
          rows={vistaDetalle === 'porProducto' ? porProductoDetallado(filtradas) : vistaDetalle === 'porCliente' ? agruparTotales(filtradas, v => v.cliente, 'cliente') : filtradas}
          columns={vistaDetalle === 'porProducto' ? POR_PRODUCTO_COLS : vistaDetalle === 'porCliente' ? POR_CLIENTE_COLS : VENTAS_DETALLE_COLS}
          defaultSortKey="valor"
          headerRight={<DetalleVistaSelect value={vistaDetalle} onChange={setVistaDetalle} options={[
            { value: 'porProducto', label: 'Totalizar por Producto' },
            { value: 'porCliente', label: 'Totalizar por Cliente' },
          ]} />}
        />
      </div>
    );
  };

  const AnalisisCompras = () => {
    const [filtroProveedor, setFiltroProveedor] = useState('');
    const [vistaDetalle, setVistaDetalle] = useState('desglosado');
    const proveedores = useMemo(() => [...new Set(compras.map(c => c.proveedor).filter(Boolean))].sort(), [compras]);
    const filtradas = compras.filter(c => filtroProveedor ? c.proveedor === filtroProveedor : true);
    const totalValor = filtradas.reduce((s, c) => s + (Number(c.valor) || 0), 0);
    const totalKilos = filtradas.reduce((s, c) => s + (Number(c.cantidad) || 0), 0);
    const nReferencias = new Set(filtradas.map(c => c.producto).filter(Boolean)).size;
    const totalCredito = filtradas.filter(c => normalizeCatName(c.metodoPago) === 'credito').reduce((s, c) => s + (Number(c.valor) || 0), 0);
    const totalEfectivo = filtradas.filter(c => normalizeCatName(c.metodoPago) === 'efectivo').reduce((s, c) => s + (Number(c.valor) || 0), 0);
    const porProveedor = groupSum(filtradas, c => c.proveedor).slice(0, 10);
    const porProducto = groupSum(filtradas, c => c.producto).slice(0, 10);
    const porMetodo = groupSum(filtradas, c => c.metodoPago || 'Sin dato').slice(0, 10);

    return (
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
          <SearchableSelect value={filtroProveedor} onChange={setFiltroProveedor} options={proveedores} placeholder="Todos los proveedores" />
          {filtroProveedor && (
            <button onClick={() => setFiltroProveedor('')} className="text-xs font-bold text-slate-400 hover:text-slate-600 underline">Limpiar filtro</button>
          )}
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <KpiCard label="Total Comprado" value={formatCurrency(totalValor)} accent="text-rose-600" />
          <KpiCard label="Total Kilos/Unidades Comprados" value={totalKilos.toLocaleString('es-CO', { maximumFractionDigits: 1 })} sub="Suma de la columna Cantidad" />
          <KpiCard label="Nº de Referencias" value={nReferencias} />
          <KpiCard label="Nº de Líneas" value={filtradas.length} />
        </div>
        <div className="grid grid-cols-2 md:grid-cols-2 gap-4">
          <KpiCard label="Total a Crédito" value={formatCurrency(totalCredito)} accent="text-amber-600" />
          <KpiCard label="Total en Efectivo" value={formatCurrency(totalEfectivo)} accent="text-emerald-600" />
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <ChartCard title="Compras por Proveedor"><BarBlock data={porProveedor} color="#f43f5e" /></ChartCard>
          <ChartCard title="Top Productos (dentro del filtro)"><BarBlock data={porProducto} color="#8B5CF6" /></ChartCard>
          <ChartCard title="Compras por Método de Pago"><PieBlock data={porMetodo} /></ChartCard>
        </div>
        <SortableTable
          title="Detalle de Compras"
          rows={vistaDetalle === 'porProducto' ? porProductoDetallado(filtradas) : vistaDetalle === 'porProveedor' ? agruparTotales(filtradas, c => c.proveedor, 'proveedor') : filtradas}
          columns={vistaDetalle === 'porProducto' ? POR_PRODUCTO_COLS : vistaDetalle === 'porProveedor' ? POR_PROVEEDOR_COLS : COMPRAS_DETALLE_COLS}
          defaultSortKey="valor"
          headerRight={<DetalleVistaSelect value={vistaDetalle} onChange={setVistaDetalle} options={[
            { value: 'porProducto', label: 'Totalizar por Producto' },
            { value: 'porProveedor', label: 'Totalizar por Proveedor' },
          ]} />}
        />
      </div>
    );
  };

  const ORIGEN_GASTO_LABEL2 = { general: 'General', corabastos: 'Corabastos', cm: 'Caja Menor', manual: 'Manual / Otros' };
  const origenDeGasto = (g) => (g.sourceCmId ? 'cm' : (g.origen || 'manual'));
  const GASTOS_DETALLE_COLS = [
    { key: 'fecha', label: 'Fecha', align: 'left' },
    { key: 'categoriaNombre', label: 'Categoría', align: 'left' },
    { key: 'descripcion', label: 'Descripción', align: 'left' },
    { key: 'proveedor', label: 'Proveedor', align: 'left' },
    { key: 'origenLabel', label: 'Origen', align: 'left' },
    { key: 'valor', label: 'Valor', align: 'right', money: true, bold: true },
  ];
  const GASTOS_POR_CATEGORIA_COLS = [
    { key: 'categoria', label: 'Categoría', align: 'left' },
    { key: 'valor', label: 'Valor Total', align: 'right', money: true, bold: true },
    { key: 'lineas', label: 'Nº Líneas', align: 'right' },
  ];
  const GASTOS_POR_PROVEEDOR_COLS = [
    { key: 'proveedor', label: 'Proveedor', align: 'left' },
    { key: 'valor', label: 'Valor Total', align: 'right', money: true, bold: true },
    { key: 'lineas', label: 'Nº Líneas', align: 'right' },
  ];

  const AnalisisGastos = () => {
    const [filtroOrigen, setFiltroOrigen] = useState('');
    const [filtroCategoriaId, setFiltroCategoriaId] = useState('');
    const [vistaDetalle, setVistaDetalle] = useState('desglosado');
    const catNombre = (g) => categories.find(c => c.id === g.categoryId)?.name || 'Sin categoría';

    // Cascada igual que en Gastos: la categoría se limita a las que existen
    // dentro del origen elegido. Las transferencias Corabastos→Caja Menor se
    // excluyen desde acá: no son gasto real (ver esTransferenciaCajaMenor),
    // solo se conservan visibles/con badge en la tabla cruda de Gastos.
    const gastosSinTransferencias = gastos.filter(g => !esTransferenciaCajaMenor(g));
    const totalTransferenciasCM = gastos.filter(esTransferenciaCajaMenor).reduce((s, g) => s + (Number(g.valor) || 0), 0);
    const gastosDelOrigen = gastosSinTransferencias.filter(g => filtroOrigen ? origenDeGasto(g) === filtroOrigen : true);
    const categoriasDisponibles = categories.filter(c => new Set(gastosDelOrigen.map(g => g.categoryId).filter(Boolean)).has(c.id));
    useEffect(() => {
      if (filtroCategoriaId && !categoriasDisponibles.some(c => c.id === filtroCategoriaId)) setFiltroCategoriaId('');
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [filtroOrigen]);

    const filtradas = gastosDelOrigen.filter(g => filtroCategoriaId ? g.categoryId === filtroCategoriaId : true);
    const totalValor = filtradas.reduce((s, g) => s + (Number(g.valor) || 0), 0);
    const nCategorias = new Set(filtradas.map(g => g.categoryId).filter(Boolean)).size;
    const promedioLinea = filtradas.length ? totalValor / filtradas.length : 0;

    const porCategoria = groupSum(filtradas, catNombre).slice(0, 10);
    const porOrigen = groupSum(filtradas, g => ORIGEN_GASTO_LABEL2[origenDeGasto(g)]).slice(0, 10);
    const filtradasDecoradas = filtradas.map(g => ({ ...g, categoriaNombre: catNombre(g), origenLabel: ORIGEN_GASTO_LABEL2[origenDeGasto(g)] }));

    const porDiaMap = {};
    filtradas.forEach(g => { const d = g.fecha || 'Sin fecha'; porDiaMap[d] = (porDiaMap[d] || 0) + (Number(g.valor) || 0); });
    const porDia = Object.entries(porDiaMap).map(([name, value]) => ({ name, value })).sort((a, b) => a.name.localeCompare(b.name));

    return (
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
          <select className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white" value={filtroOrigen} onChange={e => setFiltroOrigen(e.target.value)}>
            <option value="">Todos los orígenes</option>
            <option value="general">General</option>
            <option value="corabastos">Corabastos</option>
            <option value="cm">Caja Menor</option>
            <option value="manual">Manual / Otros</option>
          </select>
          <select className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white" value={filtroCategoriaId} onChange={e => setFiltroCategoriaId(e.target.value)}>
            <option value="">Todas las categorías{filtroOrigen ? ` (${ORIGEN_GASTO_LABEL2[filtroOrigen]})` : ''}</option>
            {categoriasDisponibles.map(c => {
              const parent = c.parentId ? categories.find(x => x.id === c.parentId) : null;
              return <option key={c.id} value={c.id}>{parent ? `${parent.name} › ${c.name}` : c.name}</option>;
            })}
          </select>
          {(filtroOrigen || filtroCategoriaId) && (
            <button onClick={() => { setFiltroOrigen(''); setFiltroCategoriaId(''); }} className="text-xs font-bold text-slate-400 hover:text-slate-600 underline">Limpiar filtros</button>
          )}
        </div>
        {totalTransferenciasCM > 0 && (
          <div className="bg-sky-50 border border-sky-200 rounded-xl p-3 flex items-start gap-2.5">
            <AlertTriangle className="h-4 w-4 text-sky-500 mt-0.5 flex-shrink-0" />
            <p className="text-xs text-sky-800"><strong>{formatCurrency(totalTransferenciasCM)}</strong> transferidos de Corabastos a Caja Menor este periodo — no se cuentan aquí como gasto (el gasto real ya queda reflejado del lado de Caja Menor). Se pueden ver en la tabla de Gastos con el badge "🔁 Transferencia".</p>
          </div>
        )}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <KpiCard label="Total Gastado" value={formatCurrency(totalValor)} accent="text-amber-600" />
          <KpiCard label="Nº de Categorías" value={nCategorias} />
          <KpiCard label="Nº de Líneas" value={filtradas.length} />
          <KpiCard label="Promedio por Línea" value={formatCurrency(promedioLinea)} />
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <ChartCard title="Gastos por Categoría"><BarBlock data={porCategoria} color="#f59e0b" /></ChartCard>
          <ChartCard title="Valor Gastado por Día">
            {porDia.length > 0 ? (
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={porDia} margin={{ left: 0, right: 10, bottom: 10 }}>
                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
                    <XAxis dataKey="name" tick={{ fontSize: 9, fill: '#64748B' }} angle={-40} textAnchor="end" interval={Math.max(0, Math.ceil(porDia.length / 12) - 1)} height={45} />
                    <YAxis tickFormatter={v => `$${(v / 1000).toFixed(0)}k`} tick={{ fontSize: 10, fill: '#64748B' }} />
                    <RechartsTooltip formatter={v => formatCurrency(v)} />
                    <Bar dataKey="value" fill="#f59e0b" radius={[4, 4, 0, 0]} />
                  </BarChart>
                </ResponsiveContainer>
              </div>
            ) : <EmptyChart />}
          </ChartCard>
          <ChartCard title="Gastos por Origen"><PieBlock data={porOrigen} /></ChartCard>
        </div>
        <SortableTable
          title="Detalle de Gastos"
          rows={vistaDetalle === 'porCategoria' ? agruparValorGastos(filtradas, catNombre, 'categoria') : vistaDetalle === 'porProveedor' ? agruparValorGastos(filtradas, g => g.proveedor, 'proveedor') : filtradasDecoradas}
          columns={vistaDetalle === 'porCategoria' ? GASTOS_POR_CATEGORIA_COLS : vistaDetalle === 'porProveedor' ? GASTOS_POR_PROVEEDOR_COLS : GASTOS_DETALLE_COLS}
          defaultSortKey="valor"
          headerRight={<DetalleVistaSelect value={vistaDetalle} onChange={setVistaDetalle} options={[
            { value: 'porCategoria', label: 'Totalizar por Categoría' },
            { value: 'porProveedor', label: 'Totalizar por Proveedor' },
          ]} />}
        />
      </div>
    );
  };

  // Tabla de detalle de Nómina — permite ver y ORDENAR (clic en cualquier
  // encabezado) todos los empleados a la vez, en vez de solo el top 10 del
  // gráfico de barras. Pagina de a TABLE_PAGE_SIZE para no volver pesada la
  // navegación si hay muchas quincenas/periodos acumulados.
  const NOMINA_COLS = [
    { key: 'empleado', label: 'Empleado', align: 'left' },
    { key: 'periodoQuincena', label: 'Quincena', align: 'left' },
    { key: 'salarioBase', label: 'Salario Base', align: 'right', money: true },
    { key: 'horasExtras', label: 'H. Extras', align: 'right' },
    { key: 'valorHorasExtras', label: 'Valor H. Extras', align: 'right', money: true },
    { key: 'recargoNocturnoHoras', label: 'Rec. Nocturno (h)', align: 'right' },
    { key: 'valorRecargoNocturno', label: 'Valor Rec. Nocturno', align: 'right', money: true },
    { key: 'recargoDominicalHoras', label: 'Rec. Dominical (h)', align: 'right' },
    { key: 'valorRecargoDominical', label: 'Valor Rec. Dominical', align: 'right', money: true },
    { key: 'deducciones', label: 'Deducciones', align: 'right', money: true },
    { key: 'parafiscales', label: 'Parafiscales', align: 'right', money: true },
    { key: 'adicionalesComisiones', label: 'Adicionales', align: 'right', money: true },
    { key: 'totalPagado', label: 'Total Pagado', align: 'right', money: true, bold: true },
  ];
  // Tabla ordenable + paginada genérica, reutilizada por los detalles de
  // Nómina/Ventas/Compras/Productos — soporta una celda "render" propia (ej.
  // el semáforo de utilidad) además de las columnas de texto/moneda simples.
  const SortableTable = ({ title, subtitle, rows, columns, defaultSortKey, defaultSortDir, headerRight }) => {
    const [sortCol, setSortCol] = useState(defaultSortKey || columns[0]?.key);
    const [sortDir, setSortDir] = useState(defaultSortDir || 'desc');
    const [page, setPage] = useState(0);
    useEffect(() => { setPage(0); }, [rows.length]);

    const toggleSort = (key) => {
      if (sortCol === key) { setSortDir(d => (d === 'asc' ? 'desc' : 'asc')); }
      else { setSortCol(key); setSortDir('desc'); }
    };
    const sorted = [...rows].sort((a, b) => {
      const va = a[sortCol]; const vb = b[sortCol];
      if (typeof va === 'string' || typeof vb === 'string') {
        const cmp = String(va || '').localeCompare(String(vb || ''));
        return sortDir === 'asc' ? cmp : -cmp;
      }
      const cmp = (Number(va) || 0) - (Number(vb) || 0);
      return sortDir === 'asc' ? cmp : -cmp;
    });

    return (
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="p-4 border-b border-slate-200 bg-slate-50/50 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
          <div>
            <h3 className="text-sm font-bold text-slate-800">{title}</h3>
            <p className="text-xs text-slate-400 mt-0.5">{subtitle || 'Clic en un encabezado para ordenar por esa columna'}</p>
          </div>
          {headerRight}
        </div>
        <div className="overflow-x-auto max-h-[520px]">
          <table className="w-full text-sm text-left">
            <thead className="bg-slate-100 text-slate-600 text-xs uppercase font-bold sticky top-0">
              <tr>
                {columns.map(col => (
                  <th key={col.key} className={`px-4 py-3 cursor-pointer select-none hover:bg-slate-200 ${col.align === 'right' ? 'text-right' : 'text-left'}`} onClick={() => toggleSort(col.key)}>
                    {col.label}{sortCol === col.key ? (sortDir === 'asc' ? ' ▲' : ' ▼') : ''}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {sorted.slice(page * TABLE_PAGE_SIZE, (page + 1) * TABLE_PAGE_SIZE).map((r, i) => (
                <tr key={r.id ?? i} className="hover:bg-slate-50">
                  {columns.map(col => (
                    <td key={col.key} className={`px-4 py-2.5 text-xs ${col.align === 'right' ? 'text-right' : 'text-left'} ${col.bold ? 'font-bold text-slate-800' : 'text-slate-600'}`}>
                      {col.render ? col.render(r[col.key], r) : (col.money ? formatCurrency(r[col.key]) : (r[col.key] != null ? r[col.key] : '—'))}
                    </td>
                  ))}
                </tr>
              ))}
              {sorted.length === 0 && <tr><td colSpan={columns.length} className="px-6 py-10 text-center text-slate-400 text-sm">Sin datos en este filtro.</td></tr>}
            </tbody>
          </table>
        </div>
        <Pager page={page} setPage={setPage} total={sorted.length} />
      </div>
    );
  };

  const NominaDetailTable = ({ rows }) => {
    // 3 vistas: Quincena 1 sola, Quincena 2 sola, o "todo unificado" — un solo
    // registro totalizado por empleado sumando ambas quincenas del mes.
    const [vista, setVista] = useState('todo');
    // El salario base (SUELDO) es una referencia MENSUAL que el informe
    // repite igual en las dos filas de quincena de cada empleado — no es un
    // valor que se "recibe" dos veces. Sumarlo como el resto de columnas
    // duplicaba el salario mensual (ej. $6M -> $12M) en la vista unificada;
    // se excluye de la suma y se toma tal cual (ya es el mensual completo).
    const CONSTANT_KEYS = ['salarioBase'];
    const SUM_KEYS = NOMINA_COLS.filter(c => !['empleado', 'periodoQuincena', ...CONSTANT_KEYS].includes(c.key)).map(c => c.key);
    let displayRows;
    if (vista === 'q1' || vista === 'q2') {
      const label = vista === 'q1' ? 'Quincena 1' : 'Quincena 2';
      displayRows = rows.filter(n => quincenaLabel(n.periodoQuincena) === label);
    } else {
      const byEmp = {};
      rows.forEach(n => {
        const key = n.documento || n.empleado;
        if (!byEmp[key]) {
          byEmp[key] = { id: key, empleado: n.empleado, documento: n.documento, periodoQuincena: 'Todo el mes' };
          SUM_KEYS.forEach(k => { byEmp[key][k] = 0; });
          CONSTANT_KEYS.forEach(k => { byEmp[key][k] = n[k]; });
        }
        SUM_KEYS.forEach(k => { byEmp[key][k] += Number(n[k]) || 0; });
      });
      displayRows = Object.values(byEmp);
    }

    return (
      <SortableTable
        title="Detalle de todos los empleados"
        rows={displayRows}
        columns={NOMINA_COLS}
        defaultSortKey="totalPagado"
        headerRight={
          <select className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white" value={vista} onChange={e => setVista(e.target.value)}>
            <option value="todo">Todo el mes (unificado)</option>
            <option value="q1">Quincena 1</option>
            <option value="q2">Quincena 2</option>
          </select>
        }
      />
    );
  };

  const AnalisisNomina = () => {
    const [filtroEmpleado, setFiltroEmpleado] = useState('');
    const [novedadExpandida, setNovedadExpandida] = useState(null);
    const empleados = [...new Set(nomina.map(n => n.empleado).filter(Boolean))].sort();
    const filtradas = nomina.filter(n => filtroEmpleado ? n.empleado === filtroEmpleado : true);

    const totalNomina = filtradas.reduce((s, n) => s + (Number(n.totalPagado) || 0), 0);
    const totalHorasExtras = filtradas.reduce((s, n) => s + (Number(n.horasExtras) || 0) + (Number(n.horaExtraDominicalHoras) || 0), 0);
    const totalValorHorasExtras = filtradas.reduce((s, n) => s + (Number(n.valorHorasExtras) || 0) + (Number(n.valorHoraExtraDominical) || 0), 0);
    const totalRecargoNocturnoHoras = filtradas.reduce((s, n) => s + (Number(n.recargoNocturnoHoras) || 0), 0);
    const totalValorRecargoNocturno = filtradas.reduce((s, n) => s + (Number(n.valorRecargoNocturno) || 0), 0);
    const totalRecargoDominicalHoras = filtradas.reduce((s, n) => s + (Number(n.recargoDominicalHoras) || 0), 0);
    const totalValorRecargoDominical = filtradas.reduce((s, n) => s + (Number(n.valorRecargoDominical) || 0), 0);
    const totalDeducciones = filtradas.reduce((s, n) => s + (Number(n.deducciones) || 0), 0);
    const totalAdicionales = filtradas.reduce((s, n) => s + (Number(n.adicionalesComisiones) || 0), 0);
    const nEmpleados = new Set(filtradas.map(n => n.documento || n.empleado).filter(Boolean)).size;
    const q1Rows = filtradas.filter(n => quincenaLabel(n.periodoQuincena) === 'Quincena 1');
    const q2Rows = filtradas.filter(n => quincenaLabel(n.periodoQuincena) === 'Quincena 2');
    const sumField = (rows, key) => rows.reduce((s, n) => s + (Number(n[key]) || 0), 0);
    const totalQuincena1 = sumField(q1Rows, 'totalPagado');
    const totalQuincena2 = sumField(q2Rows, 'totalPagado');
    // Alertas/novedades: qué explica la variación de Quincena 1 a Quincena 2
    // (para que el usuario entienda el "por qué", no solo el número final).
    // Cada novedad trae además su propio "detalle" — los empleados que más
    // aportaron a ESE cambio puntual, para saber exactamente dónde mirar.
    const deltaTotal = totalQuincena2 - totalQuincena1;
    const pctTotal = totalQuincena1 > 0 ? (deltaTotal / totalQuincena1) * 100 : 0;
    const CAMPOS_NOVEDAD = [
      { label: 'Horas Extras', field: 'valorHorasExtras' },
      { label: 'Recargo Nocturno', field: 'valorRecargoNocturno' },
      { label: 'Recargo Dominical/Festivo', field: 'valorRecargoDominical' },
      { label: 'Hora Extra Dominical', field: 'valorHoraExtraDominical' },
      { label: 'Deducciones', field: 'deducciones' },
      { label: 'Adicionales/Comisiones', field: 'adicionalesComisiones' },
    ];
    const impactos = CAMPOS_NOVEDAD.map(({ label, field }) => {
      const nombres = {};
      const byEmpQ1 = {}; q1Rows.forEach(n => { const k = n.documento || n.empleado; nombres[k] = n.empleado; byEmpQ1[k] = (byEmpQ1[k] || 0) + (Number(n[field]) || 0); });
      const byEmpQ2 = {}; q2Rows.forEach(n => { const k = n.documento || n.empleado; nombres[k] = n.empleado; byEmpQ2[k] = (byEmpQ2[k] || 0) + (Number(n[field]) || 0); });
      const keys = new Set([...Object.keys(byEmpQ1), ...Object.keys(byEmpQ2)]);
      const detalle = [...keys]
        .map(k => ({ empleado: nombres[k] || k, q1: byEmpQ1[k] || 0, q2: byEmpQ2[k] || 0, delta: (byEmpQ2[k] || 0) - (byEmpQ1[k] || 0) }))
        .filter(d => Math.abs(d.delta) > 0)
        .sort((a, b) => Math.abs(b.delta) - Math.abs(a.delta));
      const q1 = sumField(q1Rows, field);
      const q2 = sumField(q2Rows, field);
      return { label, q1, q2, delta: q2 - q1, detalle };
    }).filter(c => Math.abs(c.delta) > 0).sort((a, b) => Math.abs(b.delta) - Math.abs(a.delta));

    const porEmpleado = groupSum(filtradas.map(n => ({ ...n, valor: n.totalPagado })), n => n.empleado).slice(0, 10);
    const porQuincena = groupSum(filtradas.map(n => ({ ...n, valor: n.totalPagado })), n => n.periodoQuincena || 'Sin quincena');
    const desgloseExtras = [
      { name: 'Horas Extras Diurnas', value: filtradas.reduce((s, n) => s + (Number(n.valorHorasExtras) || 0), 0) },
      { name: 'Recargo Nocturno', value: totalValorRecargoNocturno },
      { name: 'Recargo Dominical/Festivo', value: totalValorRecargoDominical },
      { name: 'Hora Extra Dominical', value: filtradas.reduce((s, n) => s + (Number(n.valorHoraExtraDominical) || 0), 0) },
    ].filter(d => d.value > 0);

    return (
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
          <SearchableSelect value={filtroEmpleado} onChange={setFiltroEmpleado} options={empleados} placeholder="Todos los empleados" />
          {filtroEmpleado && (
            <button onClick={() => setFiltroEmpleado('')} className="text-xs font-bold text-slate-400 hover:text-slate-600 underline">Limpiar filtro</button>
          )}
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <KpiCard label="Total Nómina" value={formatCurrency(totalNomina)} accent="text-rose-600" />
          <KpiCard label="Total Horas Extras" value={totalHorasExtras.toLocaleString('es-CO', { maximumFractionDigits: 1 })} sub={formatCurrency(totalValorHorasExtras)} />
          <KpiCard label="Recargo Nocturno" value={`${totalRecargoNocturnoHoras.toLocaleString('es-CO', { maximumFractionDigits: 1 })} h`} sub={formatCurrency(totalValorRecargoNocturno)} />
          <KpiCard label="Recargo Dominical/Festivo" value={`${totalRecargoDominicalHoras.toLocaleString('es-CO', { maximumFractionDigits: 1 })} h`} sub={formatCurrency(totalValorRecargoDominical)} />
        </div>
        <div className="grid grid-cols-2 gap-4">
          <KpiCard label="Total Quincena 1" value={formatCurrency(totalQuincena1)} accent="text-indigo-600" />
          <KpiCard label="Total Quincena 2" value={formatCurrency(totalQuincena2)} accent="text-indigo-600" />
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
          <h3 className="text-sm font-bold text-slate-800 mb-3 flex items-center"><AlertTriangle className="h-4 w-4 mr-2 text-amber-500" /> Alertas y novedades: Quincena 1 vs Quincena 2</h3>
          {(!totalQuincena1 && !totalQuincena2) ? (
            <p className="text-sm text-slate-400">No hay datos suficientes de ambas quincenas para comparar todavía.</p>
          ) : (
            <div className="space-y-2 text-sm">
              <p className={`font-semibold ${deltaTotal >= 0 ? 'text-rose-600' : 'text-emerald-600'}`}>
                La nómina de la Quincena 2 {deltaTotal >= 0 ? 'subió' : 'bajó'} {formatCurrency(Math.abs(deltaTotal))} ({Math.abs(pctTotal).toFixed(1)}%) respecto a la Quincena 1.
              </p>
              {impactos.length > 0 ? (
                <ul className="border border-slate-200 rounded-lg overflow-hidden divide-y divide-slate-100">
                  {impactos.slice(0, 4).map(i => (
                    <li key={i.label}>
                      <button onClick={() => setNovedadExpandida(e => (e === i.label ? null : i.label))} className="w-full text-left px-3 py-2.5 hover:bg-slate-50 flex items-center justify-between gap-3">
                        <span className="text-slate-600"><span className="font-semibold text-slate-800">{i.label}</span>: {i.delta >= 0 ? 'subió' : 'bajó'} {formatCurrency(Math.abs(i.delta))} ({formatCurrency(i.q1)} → {formatCurrency(i.q2)})</span>
                        <span className="text-[11px] font-bold text-indigo-500 whitespace-nowrap">{novedadExpandida === i.label ? 'Ocultar ▲' : 'Ver quién ▼'}</span>
                      </button>
                      {novedadExpandida === i.label && (
                        <div className="px-4 pb-3 bg-slate-50">
                          <p className="text-[11px] text-slate-400 mb-1.5">Empleados que más aportaron a este cambio — revisa estos primero:</p>
                          <ul className="space-y-1">
                            {i.detalle.slice(0, 5).map(d => (
                              <li key={d.empleado} className="text-xs text-slate-600 flex justify-between gap-3">
                                <span>{d.empleado}</span>
                                <span className={`font-semibold whitespace-nowrap ${d.delta >= 0 ? 'text-rose-600' : 'text-emerald-600'}`}>{d.delta >= 0 ? '+' : ''}{formatCurrency(d.delta)} ({formatCurrency(d.q1)} → {formatCurrency(d.q2)})</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="text-slate-400">No se detectaron novedades relevantes en horas extras, recargos, deducciones o adicionales entre las dos quincenas.</p>
              )}
            </div>
          )}
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
          <KpiCard label="Total Deducciones" value={formatCurrency(totalDeducciones)} accent="text-amber-600" />
          <KpiCard label="Adicionales/Comisiones" value={formatCurrency(totalAdicionales)} accent="text-emerald-600" />
          <KpiCard label="Nº de Empleados" value={nEmpleados} />
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <ChartCard title="Total Pagado por Empleado"><BarBlock data={porEmpleado} color="#4f46e5" /></ChartCard>
          <ChartCard title="Desglose de Extras y Recargos"><PieBlock data={desgloseExtras} /></ChartCard>
          <ChartCard title="Total por Quincena"><BarBlock data={porQuincena} color="#f59e0b" /></ChartCard>
        </div>
        <NominaDetailTable rows={filtradas} />
      </div>
    );
  };

  const AnalisisView = () => {
    const [analisisTab, setAnalisisTab] = useState('ventas');
    const TABS = [{ id: 'ventas', label: 'Ventas' }, { id: 'compras', label: 'Compras' }, { id: 'gastos', label: 'Gastos' }, { id: 'nomina', label: 'Nómina' }];
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Análisis</h1>
          <p className="text-slate-500 text-sm">Filtra por cliente, sucursal, proveedor o empleado para entender a fondo tu operación</p>
        </div>
        <div className="flex gap-1 border-b border-slate-200">
          {TABS.map(t => (
            <button
              key={t.id}
              onClick={() => setAnalisisTab(t.id)}
              className={`px-4 py-2 text-sm font-bold border-b-2 -mb-px transition-colors ${analisisTab === t.id ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}
            >
              {t.label}
            </button>
          ))}
        </div>
        {analisisTab === 'ventas' && <AnalisisVentas />}
        {analisisTab === 'compras' && <AnalisisCompras />}
        {analisisTab === 'gastos' && <AnalisisGastos />}
        {analisisTab === 'nomina' && <AnalisisNomina />}
      </div>
    );
  };

  // ==========================================================================
  // Ventas
  // ==========================================================================
  const VentasView = () => {
    const [showForm, setShowForm] = useState(false);
    const [editingId, setEditingId] = useState(null);
    const [search, setSearch] = useState('');
    const [page, setPage] = useState(0);
    const [isImporting, setIsImporting] = useState(false);
    const fileInputRef = useRef(null);
    const blankForm = { fecha: new Date().toISOString().slice(0, 10), producto: '', cliente: '', sucursal: '', cantidad: '', valor: '' };
    const [formData, setFormData] = useState(blankForm);
    useEffect(() => { setPage(0); }, [search]);

    // ---- Importador dedicado del "Informe de Ventas" (formato fijo, sin plantilla) ----
    const fileInputInformeRef = useRef(null);
    const [isImportingInforme, setIsImportingInforme] = useState(false);
    const importInformeVentas = async (file) => {
      setIsImportingInforme(true);
      try {
        const XLSX = await ensureXLSX();
        const buf = await file.arrayBuffer();
        const wb = XLSX.read(buf, { type: 'array' });
        const raw = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
        const headerIdx = findHeaderRow(raw, 'fuente');
        if (headerIdx === -1) { triggerToast('No se reconoció el formato del archivo (falta encabezado "Fuente")', 'error'); return; }
        const rows = [];
        const periodCache = {};
        periods.forEach(p => { periodCache[p.month] = p.id; });
        let sinFecha = 0, descartadas = 0;
        const seqCounter = {};
        for (let i = headerIdx + 1; i < raw.length; i++) {
          const r = raw[i];
          if (!r || !r.length) continue;
          const fuente = String(r[0] || '').trim();
          const producto = String(r[5] || '').trim();
          if (!fuente || fuente.toLowerCase() === 'total general') { descartadas++; continue; }
          const fecha = parseFechaFlexible(r[2]);
          if (!fecha) { sinFecha++; continue; }
          const documento = String(r[1] || '').trim();
          const cliente = String(r[3] || '').trim();
          const sucursal = String(r[4] || '').trim();
          const cantidad = parseNum(r[6]);
          const unidad = String(r[7] || '').trim();
          const precioUnitario = parseNum(r[8]);
          const valor = parseNum(r[9]);

          const month = fecha.slice(0, 7);
          let periodId = periodCache[month];
          if (!periodId) {
            const { start, end } = monthBounds(month);
            const [row] = await window.SB.crudInsert('op_periodos', [{ month, start_date: start, end_date: end, is_closed: false }]);
            periodId = row.id;
            periodCache[month] = periodId;
            setPeriods(prev => [...prev, periodFromDb(row)].sort((a, b) => a.month.localeCompare(b.month)));
          }
          const fpKey = `${fecha}|${valor}|${normalizeCatName(`${documento}|${producto}`)}`;
          seqCounter[fpKey] = (seqCounter[fpKey] || 0) + 1;
          rows.push({
            ...ventaToDb({ periodId, fecha, producto, cliente, sucursal, cantidad, valor, fuente, documento, unidad, precioUnitario }),
            origen: 'informe_ventas', external_ref: rowFingerprint(fecha, valor, `${documento}|${producto}`, seqCounter[fpKey]),
          });
        }
        if (!rows.length) { triggerToast('No se encontraron filas válidas para importar', 'error'); return; }
        const result = await bulkUpsert('op_ventas', rows, 'origen,external_ref');
        if (rows.some(row => row.period_id === activePeriodId)) {
          const v = await window.SB.crudSelect('op_ventas', { eq: { period_id: activePeriodId }, order: { col: 'fecha', asc: true } });
          setVentas(v.map(ventaFromDb));
        }
        let msg = `${result.length} venta(s) importada(s)/actualizada(s)`;
        if (sinFecha) msg += ` · ${sinFecha} sin fecha omitida(s)`;
        if (descartadas) msg += ` · ${descartadas} fila(s) de total descartada(s)`;
        triggerToast(msg);
      } catch (err) {
        triggerToast(err.message || 'Error al importar el Informe de Ventas', 'error');
      } finally {
        setIsImportingInforme(false);
      }
    };

    const openNew = () => {
      if (!activePeriodId) { triggerToast('Primero crea un periodo en Periodos / Cierre', 'error'); return; }
      setEditingId(null); setFormData(blankForm); setShowForm(true);
    };
    const editRow = (v) => {
      setFormData({ fecha: v.fecha || '', producto: v.producto, cliente: v.cliente, sucursal: v.sucursal, cantidad: v.cantidad, valor: v.valor });
      setEditingId(v.id); setShowForm(true);
    };
    const handleSave = async (e) => {
      e.preventDefault();
      const payload = { ...formData, periodId: activePeriodId };
      try {
        if (editingId) {
          const [row] = await window.SB.crudUpdate('op_ventas', editingId, ventaToDb(payload));
          setVentas(prev => prev.map(v => v.id === editingId ? ventaFromDb(row) : v));
          triggerToast('Venta actualizada');
        } else {
          const [row] = await window.SB.crudInsert('op_ventas', [ventaToDb(payload)]);
          setVentas(prev => [...prev, ventaFromDb(row)]);
          triggerToast('Venta registrada');
        }
        setShowForm(false); setEditingId(null);
      } catch (err) { triggerToast(err.message || 'Error al guardar la venta', 'error'); }
    };

    const downloadTemplate = async () => {
      try {
        const XLSX = await ensureXLSX();
        const ws = XLSX.utils.aoa_to_sheet([
          ['Fecha (AAAA-MM-DD)', 'Producto', 'Cliente', 'Sucursal Cliente', 'Cantidad', 'Valor'],
          ['2026-07-15', 'Lechuga Crespa x Kg', 'Hoteles Sibelius SAS', 'Sede Norte', 120, 850000],
        ]);
        ws['!cols'] = [{ wch: 16 }, { wch: 26 }, { wch: 26 }, { wch: 20 }, { wch: 12 }, { wch: 14 }];
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Ventas');
        XLSX.writeFile(wb, 'Plantilla_Ventas_CierreOperativo.xlsx');
      } catch (err) { triggerToast('Error al generar la plantilla', 'error'); }
    };
    const handleImportFile = async (e) => {
      const file = e.target.files?.[0];
      if (!file) return;
      if (!activePeriodId) { triggerToast('Primero crea/selecciona un periodo', 'error'); e.target.value = ''; return; }
      setIsImporting(true);
      try {
        const XLSX = await ensureXLSX();
        const buf = await file.arrayBuffer();
        const wb = XLSX.read(buf, { type: 'array' });
        const rows = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
        // Si el archivo trae la columna "Fuente" en alguna de las primeras
        // filas, es el Informe de Ventas completo (10 columnas), no la
        // plantilla simple — usar este importador leería las columnas
        // equivocadas (como ya pasó) y dejaría cientos de filas basura.
        if (rows.slice(0, 6).some(r => String(r?.[0] || '').trim().toLowerCase() === 'fuente')) {
          triggerToast('Este archivo es el Informe de Ventas completo (trae la columna "Fuente") — usa el botón "Importar Informe de Ventas", no "Importar Excel".', 'error');
          return;
        }
        const startIdx = rows.length && String(rows[0]?.[0] || '').trim().toLowerCase().startsWith('fecha') ? 1 : 0;
        const toInsert = [];
        let skipped = 0;
        for (let i = startIdx; i < rows.length; i++) {
          const r = rows[i];
          if (!r || !r.length) continue;
          const producto = String(r[1] || '').trim();
          const cliente = String(r[2] || '').trim();
          if (!producto && !cliente) { skipped++; continue; }
          toInsert.push(ventaToDb({
            periodId: activePeriodId, fecha: parseFecha(r[0]), producto, cliente,
            sucursal: String(r[3] || '').trim(), cantidad: parseNum(r[4]), valor: parseNum(r[5]),
          }));
        }
        if (!toInsert.length) { triggerToast('No se encontraron filas válidas para importar', 'error'); return; }
        const rowsInserted = await bulkInsert('op_ventas', toInsert);
        setVentas(prev => [...prev, ...rowsInserted.map(ventaFromDb)]);
        triggerToast(`${rowsInserted.length} venta(s) importada(s)${skipped ? ` · ${skipped} fila(s) omitida(s)` : ''}`);
      } catch (err) { triggerToast(err.message || 'Error al importar el archivo', 'error'); }
      finally { setIsImporting(false); if (fileInputRef.current) fileInputRef.current.value = ''; }
    };

    const filtered = ventas.filter(v => `${v.producto} ${v.cliente} ${v.sucursal}`.toLowerCase().includes(search.toLowerCase()));
    const total = filtered.reduce((s, v) => s + v.valor, 0);

    return (
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div>
            <h1 className="text-2xl font-bold text-slate-800">Ventas</h1>
            <p className="text-slate-500 text-sm">Desglose de ventas por producto, cliente y sucursal</p>
          </div>
          <div className="flex flex-wrap gap-2">
            <button onClick={downloadTemplate} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Download className="h-4 w-4 mr-2" /> Plantilla
            </button>
            <button onClick={() => fileInputRef.current?.click()} disabled={isImporting} className="bg-sky-600 hover:bg-sky-700 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Upload className="h-4 w-4 mr-2" /> {isImporting ? 'Importando...' : 'Importar Excel'}
            </button>
            <input ref={fileInputRef} type="file" accept=".xlsx,.xls" className="hidden" onChange={handleImportFile} />
            <button onClick={() => fileInputInformeRef.current?.click()} disabled={isImportingInforme} className="bg-emerald-600 hover:bg-emerald-700 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Upload className="h-4 w-4 mr-2" /> {isImportingInforme ? 'Importando...' : 'Importar Informe de Ventas'}
            </button>
            <input ref={fileInputInformeRef} type="file" accept=".xlsx,.xls" className="hidden" onChange={e => { const f = e.target.files?.[0]; if (f) importInformeVentas(f); e.target.value = ''; }} />
            <button onClick={openNew} className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Plus className="h-4 w-4 mr-2" /> Nueva Venta
            </button>
          </div>
        </div>

        {showForm && (
          <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-lg w-full overflow-hidden">
              <div className="bg-slate-900 text-white p-4 flex justify-between items-center">
                <h3 className="font-bold">{editingId ? 'Editar Venta' : 'Nueva Venta'}</h3>
                <button onClick={() => setShowForm(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <form onSubmit={handleSave} className="p-6 space-y-4">
                <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Fecha</label>
                    <input type="date" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.fecha} onChange={e => setFormData({ ...formData, fecha: e.target.value })} /></div>
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Cantidad</label>
                    <input type="number" step="any" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.cantidad} onChange={e => setFormData({ ...formData, cantidad: e.target.value })} /></div>
                </div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Producto *</label>
                  <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.producto} onChange={e => setFormData({ ...formData, producto: e.target.value })} /></div>
                <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Cliente *</label>
                    <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.cliente} onChange={e => setFormData({ ...formData, cliente: e.target.value })} /></div>
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Sucursal Cliente</label>
                    <input type="text" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.sucursal} onChange={e => setFormData({ ...formData, sucursal: e.target.value })} /></div>
                </div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Valor ($) *</label>
                  <input type="number" required step="any" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm font-bold" value={formData.valor} onChange={e => setFormData({ ...formData, valor: e.target.value })} /></div>
                <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                  <button type="button" onClick={() => setShowForm(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button type="submit" className="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700">Guardar</button>
                </div>
              </form>
            </div>
          </div>
        )}

        <OrphanRowsWarning
          rows={ventas}
          table="op_ventas"
          label="Ventas"
          onDeleted={() => setVentas(prev => prev.filter(v => !!v.fecha))}
        />
        <ImportBatchManager
          rows={ventas}
          origen="informe_ventas"
          table="op_ventas"
          label="Informe de Ventas"
          onDeleted={(pid) => setVentas(prev => prev.filter(v => !(v.periodId === pid && v.origen === 'informe_ventas')))}
        />

        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
          <div className="p-4 border-b border-slate-200 bg-slate-50/50 flex flex-col md:flex-row gap-3 justify-between">
            <div className="relative flex-1 max-w-sm">
              <Search className="h-4 w-4 absolute left-3 top-3 text-slate-400" />
              <input type="text" placeholder="Buscar por producto, cliente o sucursal..." className="w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg text-sm bg-white" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <span className="text-sm font-bold text-slate-700 self-center">Total: {formatCurrency(total)}</span>
          </div>
          <div className="overflow-x-auto max-h-[520px]">
            <table className="w-full text-sm text-left">
              <thead className="bg-slate-100 text-slate-600 text-xs uppercase font-bold sticky top-0">
                <tr><th className="px-4 py-3">Fecha</th><th className="px-4 py-3">Producto</th><th className="px-4 py-3">Cliente</th><th className="px-4 py-3">Sucursal</th><th className="px-4 py-3 text-right">Cantidad</th><th className="px-4 py-3 text-right">Valor</th><th className="px-4 py-3 text-center">Acciones</th></tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filtered.slice(page * TABLE_PAGE_SIZE, (page + 1) * TABLE_PAGE_SIZE).map(v => (
                  <tr key={v.id} className="hover:bg-slate-50">
                    <td className="px-4 py-2.5 text-xs text-slate-600 whitespace-nowrap">{v.fecha || '—'}</td>
                    <td className="px-4 py-2.5 text-xs text-slate-800">{v.producto}</td>
                    <td className="px-4 py-2.5 text-xs text-slate-700">{v.cliente}</td>
                    <td className="px-4 py-2.5 text-xs text-slate-500">{v.sucursal || '—'}</td>
                    <td className="px-4 py-2.5 text-xs text-right text-slate-500">{v.cantidad || '—'}</td>
                    <td className="px-4 py-2.5 text-xs text-right font-bold text-slate-800">{formatCurrency(v.valor)}</td>
                    <td className="px-4 py-2.5 text-center whitespace-nowrap">
                      <button onClick={() => editRow(v)} className="p-1.5 text-slate-400 hover:text-indigo-600"><Edit2 className="h-3.5 w-3.5" /></button>
                      <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'venta', id: v.id, title: `${v.producto} — ${v.cliente}` })} className="p-1.5 text-slate-400 hover:text-rose-600"><Trash2 className="h-3.5 w-3.5" /></button>
                    </td>
                  </tr>
                ))}
                {filtered.length === 0 && <tr><td colSpan="7" className="px-6 py-10 text-center text-slate-400 text-sm">Sin ventas registradas en este periodo.</td></tr>}
              </tbody>
            </table>
          </div>
          <Pager page={page} setPage={setPage} total={filtered.length} />
        </div>
      </div>
    );
  };

  // ==========================================================================
  // Compras
  // ==========================================================================
  const ComprasView = () => {
    const [showForm, setShowForm] = useState(false);
    const [editingId, setEditingId] = useState(null);
    const [search, setSearch] = useState('');
    const [page, setPage] = useState(0);
    const [isImporting, setIsImporting] = useState(false);
    const fileInputRef = useRef(null);
    const blankForm = { fecha: new Date().toISOString().slice(0, 10), producto: '', proveedor: '', cantidad: '', valor: '' };
    const [formData, setFormData] = useState(blankForm);
    useEffect(() => { setPage(0); }, [search]);

    // ---- Importador dedicado del "Informe de Compras" (formato fijo, sin plantilla) ----
    const fileInputInformeRef = useRef(null);
    const [isImportingInforme, setIsImportingInforme] = useState(false);
    const importInformeCompras = async (file) => {
      setIsImportingInforme(true);
      try {
        const XLSX = await ensureXLSX();
        const buf = await file.arrayBuffer();
        const wb = XLSX.read(buf, { type: 'array' });
        const raw = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
        const startIdx = raw.length && String(raw[0]?.[0] || '').trim().toLowerCase() === 'fecha' ? 1 : 0;
        const rows = [];
        const periodCache = {};
        periods.forEach(p => { periodCache[p.month] = p.id; });
        let sinFecha = 0;
        const seqCounter = {};
        for (let i = startIdx; i < raw.length; i++) {
          const r = raw[i];
          if (!r || !r.length) continue;
          const fecha = parseFechaFlexible(r[0]);
          const proveedor = String(r[1] || '').trim();
          if (!fecha || !proveedor) { sinFecha++; continue; }
          const producto = String(r[2] || '').trim();
          const presentacion = cleanPlaceholder(r[3]);
          const cantidad = parseNum(r[4]);
          const unidad = cleanPlaceholder(r[5]);
          const precioUnitario = parseNum(r[6]);
          const valor = parseNum(r[7]);
          const metodoPago = cleanPlaceholder(r[8]);
          const compradora = cleanPlaceholder(r[9]);

          const month = fecha.slice(0, 7);
          let periodId = periodCache[month];
          if (!periodId) {
            const { start, end } = monthBounds(month);
            const [row] = await window.SB.crudInsert('op_periodos', [{ month, start_date: start, end_date: end, is_closed: false }]);
            periodId = row.id;
            periodCache[month] = periodId;
            setPeriods(prev => [...prev, periodFromDb(row)].sort((a, b) => a.month.localeCompare(b.month)));
          }
          const fpKey = `${fecha}|${valor}|${normalizeCatName(`${proveedor}|${producto}`)}`;
          seqCounter[fpKey] = (seqCounter[fpKey] || 0) + 1;
          rows.push({
            ...compraToDb({ periodId, fecha, producto, proveedor, cantidad, valor, presentacion, unidad, precioUnitario, metodoPago, compradora }),
            origen: 'informe_compras', external_ref: rowFingerprint(fecha, valor, `${proveedor}|${producto}`, seqCounter[fpKey]),
          });
        }
        if (!rows.length) { triggerToast('No se encontraron filas válidas para importar', 'error'); return; }
        const result = await bulkUpsert('op_compras', rows, 'origen,external_ref');
        if (rows.some(row => row.period_id === activePeriodId)) {
          const c = await window.SB.crudSelect('op_compras', { eq: { period_id: activePeriodId }, order: { col: 'fecha', asc: true } });
          setCompras(c.map(compraFromDb));
        }
        let msg = `${result.length} compra(s) importada(s)/actualizada(s)`;
        if (sinFecha) msg += ` · ${sinFecha} fila(s) sin fecha/proveedor omitida(s)`;
        triggerToast(msg);
      } catch (err) {
        triggerToast(err.message || 'Error al importar el Informe de Compras', 'error');
      } finally {
        setIsImportingInforme(false);
      }
    };

    const openNew = () => {
      if (!activePeriodId) { triggerToast('Primero crea un periodo en Periodos / Cierre', 'error'); return; }
      setEditingId(null); setFormData(blankForm); setShowForm(true);
    };
    const editRow = (c) => {
      setFormData({ fecha: c.fecha || '', producto: c.producto, proveedor: c.proveedor, cantidad: c.cantidad, valor: c.valor });
      setEditingId(c.id); setShowForm(true);
    };
    const handleSave = async (e) => {
      e.preventDefault();
      const payload = { ...formData, periodId: activePeriodId };
      try {
        if (editingId) {
          const [row] = await window.SB.crudUpdate('op_compras', editingId, compraToDb(payload));
          setCompras(prev => prev.map(c => c.id === editingId ? compraFromDb(row) : c));
          triggerToast('Compra actualizada');
        } else {
          const [row] = await window.SB.crudInsert('op_compras', [compraToDb(payload)]);
          setCompras(prev => [...prev, compraFromDb(row)]);
          triggerToast('Compra registrada');
        }
        setShowForm(false); setEditingId(null);
      } catch (err) { triggerToast(err.message || 'Error al guardar la compra', 'error'); }
    };

    const downloadTemplate = async () => {
      try {
        const XLSX = await ensureXLSX();
        const ws = XLSX.utils.aoa_to_sheet([
          ['Fecha (AAAA-MM-DD)', 'Producto', 'Proveedor', 'Cantidad', 'Valor'],
          ['2026-07-10', 'Papa Criolla x Kg', 'Promotora y Operadora de Mercados', 200, 620000],
        ]);
        ws['!cols'] = [{ wch: 16 }, { wch: 26 }, { wch: 30 }, { wch: 12 }, { wch: 14 }];
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Compras');
        XLSX.writeFile(wb, 'Plantilla_Compras_CierreOperativo.xlsx');
      } catch (err) { triggerToast('Error al generar la plantilla', 'error'); }
    };
    const handleImportFile = async (e) => {
      const file = e.target.files?.[0];
      if (!file) return;
      if (!activePeriodId) { triggerToast('Primero crea/selecciona un periodo', 'error'); e.target.value = ''; return; }
      setIsImporting(true);
      try {
        const XLSX = await ensureXLSX();
        const buf = await file.arrayBuffer();
        const wb = XLSX.read(buf, { type: 'array' });
        const rows = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
        // El Informe de Compras real trae "Proveedor" en la columna B (índice
        // 1); la plantilla simple trae "Producto" ahí — si detectamos
        // "Proveedor" es el archivo equivocado para este botón.
        if (String(rows[0]?.[1] || '').trim().toLowerCase() === 'proveedor') {
          triggerToast('Este archivo es el Informe de Compras completo — usa el botón "Importar Informe de Compras", no "Importar Excel".', 'error');
          return;
        }
        const startIdx = rows.length && String(rows[0]?.[0] || '').trim().toLowerCase().startsWith('fecha') ? 1 : 0;
        const toInsert = [];
        let skipped = 0;
        for (let i = startIdx; i < rows.length; i++) {
          const r = rows[i];
          if (!r || !r.length) continue;
          const producto = String(r[1] || '').trim();
          const proveedor = String(r[2] || '').trim();
          if (!producto && !proveedor) { skipped++; continue; }
          toInsert.push(compraToDb({
            periodId: activePeriodId, fecha: parseFecha(r[0]), producto, proveedor,
            cantidad: parseNum(r[3]), valor: parseNum(r[4]),
          }));
        }
        if (!toInsert.length) { triggerToast('No se encontraron filas válidas para importar', 'error'); return; }
        const rowsInserted = await bulkInsert('op_compras', toInsert);
        setCompras(prev => [...prev, ...rowsInserted.map(compraFromDb)]);
        triggerToast(`${rowsInserted.length} compra(s) importada(s)${skipped ? ` · ${skipped} fila(s) omitida(s)` : ''}`);
      } catch (err) { triggerToast(err.message || 'Error al importar el archivo', 'error'); }
      finally { setIsImporting(false); if (fileInputRef.current) fileInputRef.current.value = ''; }
    };

    const filtered = compras.filter(c => `${c.producto} ${c.proveedor}`.toLowerCase().includes(search.toLowerCase()));
    const total = filtered.reduce((s, c) => s + c.valor, 0);

    return (
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div>
            <h1 className="text-2xl font-bold text-slate-800">Compras</h1>
            <p className="text-slate-500 text-sm">Desglose de compras por producto y proveedor</p>
          </div>
          <div className="flex flex-wrap gap-2">
            <button onClick={downloadTemplate} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Download className="h-4 w-4 mr-2" /> Plantilla
            </button>
            <button onClick={() => fileInputRef.current?.click()} disabled={isImporting} className="bg-sky-600 hover:bg-sky-700 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Upload className="h-4 w-4 mr-2" /> {isImporting ? 'Importando...' : 'Importar Excel'}
            </button>
            <input ref={fileInputRef} type="file" accept=".xlsx,.xls" className="hidden" onChange={handleImportFile} />
            <button onClick={() => fileInputInformeRef.current?.click()} disabled={isImportingInforme} className="bg-emerald-600 hover:bg-emerald-700 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Upload className="h-4 w-4 mr-2" /> {isImportingInforme ? 'Importando...' : 'Importar Informe de Compras'}
            </button>
            <input ref={fileInputInformeRef} type="file" accept=".xlsx,.xls" className="hidden" onChange={e => { const f = e.target.files?.[0]; if (f) importInformeCompras(f); e.target.value = ''; }} />
            <button onClick={openNew} className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Plus className="h-4 w-4 mr-2" /> Nueva Compra
            </button>
          </div>
        </div>

        {showForm && (
          <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-lg w-full overflow-hidden">
              <div className="bg-slate-900 text-white p-4 flex justify-between items-center">
                <h3 className="font-bold">{editingId ? 'Editar Compra' : 'Nueva Compra'}</h3>
                <button onClick={() => setShowForm(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <form onSubmit={handleSave} className="p-6 space-y-4">
                <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Fecha</label>
                    <input type="date" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.fecha} onChange={e => setFormData({ ...formData, fecha: e.target.value })} /></div>
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Cantidad</label>
                    <input type="number" step="any" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.cantidad} onChange={e => setFormData({ ...formData, cantidad: e.target.value })} /></div>
                </div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Producto *</label>
                  <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.producto} onChange={e => setFormData({ ...formData, producto: e.target.value })} /></div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Proveedor *</label>
                  <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.proveedor} onChange={e => setFormData({ ...formData, proveedor: e.target.value })} /></div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Valor ($) *</label>
                  <input type="number" required step="any" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm font-bold" value={formData.valor} onChange={e => setFormData({ ...formData, valor: e.target.value })} /></div>
                <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                  <button type="button" onClick={() => setShowForm(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button type="submit" className="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700">Guardar</button>
                </div>
              </form>
            </div>
          </div>
        )}

        <OrphanRowsWarning
          rows={compras}
          table="op_compras"
          label="Compras"
          onDeleted={() => setCompras(prev => prev.filter(c => !!c.fecha))}
        />
        <ImportBatchManager
          rows={compras}
          origen="informe_compras"
          table="op_compras"
          label="Informe de Compras"
          onDeleted={(pid) => setCompras(prev => prev.filter(c => !(c.periodId === pid && c.origen === 'informe_compras')))}
        />

        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
          <div className="p-4 border-b border-slate-200 bg-slate-50/50 flex flex-col md:flex-row gap-3 justify-between">
            <div className="relative flex-1 max-w-sm">
              <Search className="h-4 w-4 absolute left-3 top-3 text-slate-400" />
              <input type="text" placeholder="Buscar por producto o proveedor..." className="w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg text-sm bg-white" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <span className="text-sm font-bold text-slate-700 self-center">Total: {formatCurrency(total)}</span>
          </div>
          <div className="overflow-x-auto max-h-[520px]">
            <table className="w-full text-sm text-left">
              <thead className="bg-slate-100 text-slate-600 text-xs uppercase font-bold sticky top-0">
                <tr><th className="px-4 py-3">Fecha</th><th className="px-4 py-3">Producto</th><th className="px-4 py-3">Proveedor</th><th className="px-4 py-3 text-right">Cantidad</th><th className="px-4 py-3 text-right">Valor</th><th className="px-4 py-3 text-center">Acciones</th></tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filtered.slice(page * TABLE_PAGE_SIZE, (page + 1) * TABLE_PAGE_SIZE).map(c => (
                  <tr key={c.id} className="hover:bg-slate-50">
                    <td className="px-4 py-2.5 text-xs text-slate-600 whitespace-nowrap">{c.fecha || '—'}</td>
                    <td className="px-4 py-2.5 text-xs text-slate-800">{c.producto}</td>
                    <td className="px-4 py-2.5 text-xs text-slate-700">{c.proveedor}</td>
                    <td className="px-4 py-2.5 text-xs text-right text-slate-500">{c.cantidad || '—'}</td>
                    <td className="px-4 py-2.5 text-xs text-right font-bold text-slate-800">{formatCurrency(c.valor)}</td>
                    <td className="px-4 py-2.5 text-center whitespace-nowrap">
                      <button onClick={() => editRow(c)} className="p-1.5 text-slate-400 hover:text-indigo-600"><Edit2 className="h-3.5 w-3.5" /></button>
                      <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'compra', id: c.id, title: `${c.producto} — ${c.proveedor}` })} className="p-1.5 text-slate-400 hover:text-rose-600"><Trash2 className="h-3.5 w-3.5" /></button>
                    </td>
                  </tr>
                ))}
                {filtered.length === 0 && <tr><td colSpan="6" className="px-6 py-10 text-center text-slate-400 text-sm">Sin compras registradas en este periodo.</td></tr>}
              </tbody>
            </table>
          </div>
          <Pager page={page} setPage={setPage} total={filtered.length} />
        </div>
      </div>
    );
  };

  // ==========================================================================
  // Gastos (+ categorías personalizables)
  // ==========================================================================
  const GastosView = () => {
    const [showCatModal, setShowCatModal] = useState(false);
    const [editingCatId, setEditingCatId] = useState(null);
    const blankCatForm = { name: '', color: '#4f46e5' };
    const [catForm, setCatForm] = useState(blankCatForm);
    const [catsExpanded, setCatsExpanded] = useState(false);
    const CATS_COLLAPSED_COUNT = 6;

    const [showForm, setShowForm] = useState(false);
    const [editingId, setEditingId] = useState(null);
    const [search, setSearch] = useState('');
    const [filterOrigen, setFilterOrigen] = useState('');
    const [filterCategoryId, setFilterCategoryId] = useState('');
    const [page, setPage] = useState(0);
    const [isImporting, setIsImporting] = useState(false);
    const fileInputRef = useRef(null);
    const blankForm = { fecha: new Date().toISOString().slice(0, 10), categoryId: '', descripcion: '', proveedor: '', valor: '' };
    useEffect(() => { setPage(0); }, [search, filterOrigen, filterCategoryId]);
    const [formData, setFormData] = useState(blankForm);

    // ---- Importadores de Corabastos / Gastos Generales (formatos fijos, sin plantilla) ----
    const fileInputCoraRef = useRef(null);
    const fileInputGeneralRef = useRef(null);
    const [isImportingCora, setIsImportingCora] = useState(false);
    const [isImportingGeneral, setIsImportingGeneral] = useState(false);
    const [pendingImport, setPendingImport] = useState(null); // { origen, rows, map, pendingCats }
    const [catChoices, setCatChoices] = useState({});

    // Cruza cada nombre de categoría del archivo contra las categorías ya existentes
    // en Cierre Operativo y, si no hay match, contra las de Caja Menor — en ese caso
    // usa la MISMA función que ya usa el trigger de sincronización de Caja Menor
    // (get_or_create_op_category_for_cm) para que quede enlazada 1:1 y el análisis
    // las sume juntas. Lo que no cruza con nada se deja pendiente de confirmar.
    const buildCategoryMatch = async (rawNames) => {
      const byNormOp = {};
      categories.forEach(c => { byNormOp[normalizeCatName(c.name)] = c.id; });
      const byNormCm = {};
      cmCategorias.forEach(c => { byNormCm[normalizeCatName(c.name)] = c.id; });

      const map = {};
      const pendingByNorm = {};
      const newlyLinked = [];
      for (const raw of rawNames) {
        const norm = normalizeCatName(raw);
        if (!norm || map[norm] !== undefined) continue;
        if (byNormOp[norm]) { map[norm] = byNormOp[norm]; continue; }
        if (byNormCm[norm]) {
          try {
            const opId = await window.SB.rpc('get_or_create_op_category_for_cm', { p_cm_categoria_id: byNormCm[norm] });
            map[norm] = opId;
            byNormOp[norm] = opId;
            const cmCat = cmCategorias.find(c => c.id === byNormCm[norm]);
            newlyLinked.push({ id: opId, name: cmCat?.name || raw, color: cmCat?.color || '#4f46e5', parentId: '', sourceCmCategoriaId: byNormCm[norm] });
            continue;
          } catch (err) { /* si falla el enlace, se pide confirmación manual abajo */ }
        }
        pendingByNorm[norm] = raw;
      }
      if (newlyLinked.length) {
        setCategories(prev => {
          const existingIds = new Set(prev.map(c => c.id));
          return [...prev, ...newlyLinked.filter(c => !existingIds.has(c.id))];
        });
      }
      return { map, pending: Object.entries(pendingByNorm).map(([norm, raw]) => ({ norm, raw })) };
    };

    // Inserta/actualiza los gastos ya resueltos (categoría asignada a cada fila),
    // creando el periodo mensual automáticamente si la fecha cae en un mes nuevo.
    const finishImport = async (origen, rows, categoryMap) => {
      const periodCache = {};
      periods.forEach(p => { periodCache[p.month] = p.id; });
      const seqCounter = {};
      const toUpsert = [];
      for (const r of rows) {
        const month = r.fecha.slice(0, 7);
        let periodId = periodCache[month];
        if (!periodId) {
          const { start, end } = monthBounds(month);
          const [row] = await window.SB.crudInsert('op_periodos', [{ month, start_date: start, end_date: end, is_closed: false }]);
          periodId = row.id;
          periodCache[month] = periodId;
          setPeriods(prev => [...prev, periodFromDb(row)].sort((a, b) => a.month.localeCompare(b.month)));
        }
        const key = `${r.fecha}|${r.valor}|${normalizeCatName(r.descripcion)}`;
        seqCounter[key] = (seqCounter[key] || 0) + 1;
        toUpsert.push({
          ...gastoToDb({ periodId, fecha: r.fecha, categoryId: categoryMap[r.catNorm] || '', descripcion: r.descripcion, proveedor: r.proveedor, valor: r.valor }),
          origen, external_ref: rowFingerprint(r.fecha, r.valor, r.descripcion, seqCounter[key]),
        });
      }
      if (!toUpsert.length) { triggerToast('No se encontraron filas válidas para importar', 'error'); return; }
      const result = await bulkUpsert('op_gastos', toUpsert, 'origen,external_ref');
      if (toUpsert.some(row => row.period_id === activePeriodId)) {
        const g = await window.SB.crudSelect('op_gastos', { eq: { period_id: activePeriodId }, order: { col: 'fecha', asc: true } });
        setGastos(g.map(gastoFromDb));
      }
      triggerToast(`${result.length} gasto(s) importado(s)/actualizado(s)`);
    };

    const runImport = async (origen, rows) => {
      const rawNames = [...new Set(rows.map(r => r.catRaw).filter(Boolean))];
      const { map, pending } = await buildCategoryMatch(rawNames);
      if (pending.length > 0) {
        const defaults = {};
        pending.forEach((p, i) => { defaults[p.norm] = { mode: 'new', name: p.raw, color: COLOR_PALETTE[i % COLOR_PALETTE.length] }; });
        setCatChoices(defaults);
        setPendingImport({ origen, rows, map, pendingCats: pending });
        return;
      }
      await finishImport(origen, rows, map);
    };

    const confirmCategoryChoices = async () => {
      if (!pendingImport) return;
      const finalMap = { ...pendingImport.map };
      const newCats = [];
      for (const { norm, raw } of pendingImport.pendingCats) {
        const choice = catChoices[norm] || { mode: 'new', name: raw, color: COLOR_PALETTE[0] };
        if (choice.mode === 'link') {
          if (!choice.linkId) { triggerToast(`Elige una categoría para vincular "${raw}"`, 'error'); return; }
          finalMap[norm] = choice.linkId;
        } else {
          newCats.push({ norm, name: (choice.name || raw).trim() || raw, color: choice.color || COLOR_PALETTE[0] });
        }
      }
      try {
        if (newCats.length) {
          const inserted = await window.SB.crudInsert('op_categorias_gasto', newCats.map(c => catToDb({ name: c.name, color: c.color })));
          inserted.forEach((row, i) => { finalMap[newCats[i].norm] = row.id; });
          setCategories(prev => [...prev, ...inserted.map(catFromDb)]);
        }
        await finishImport(pendingImport.origen, pendingImport.rows, finalMap);
        setPendingImport(null);
        setCatChoices({});
      } catch (err) {
        triggerToast(err.message || 'Error al guardar las categorías', 'error');
      }
    };

    const importCorabastos = async (file) => {
      setIsImportingCora(true);
      try {
        const XLSX = await ensureXLSX();
        const buf = await file.arrayBuffer();
        const wb = XLSX.read(buf, { type: 'array' });
        const raw = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
        const startIdx = raw.length && String(raw[0]?.[0] || '').trim().toLowerCase().startsWith('fecha') ? 1 : 0;
        const rows = [];
        for (let i = startIdx; i < raw.length; i++) {
          const r = raw[i];
          if (!r || !r.length) continue;
          const fecha = parseFechaFlexible(r[0]);
          if (!fecha) continue;
          const catRaw = String(r[1] || '').trim();
          const valor = parseNum(r[2]);
          const notas = String(r[3] || '').trim();
          rows.push({ fecha, catNorm: normalizeCatName(catRaw), catRaw, descripcion: notas || catRaw || 'Gasto Corabastos', proveedor: '', valor });
        }
        if (!rows.length) { triggerToast('No se encontraron filas válidas en el archivo', 'error'); return; }
        await runImport('corabastos', rows);
      } catch (err) {
        triggerToast(err.message || 'Error al importar Gastos Corabastos', 'error');
      } finally {
        setIsImportingCora(false);
      }
    };

    const importGeneral = async (file) => {
      setIsImportingGeneral(true);
      try {
        const XLSX = await ensureXLSX();
        const buf = await file.arrayBuffer();
        const wb = XLSX.read(buf, { type: 'array' });
        const raw = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
        const startIdx = raw.length && String(raw[0]?.[0] || '').trim().toLowerCase().startsWith('fecha') ? 1 : 0;
        const rows = [];
        for (let i = startIdx; i < raw.length; i++) {
          const r = raw[i];
          if (!r || !r.length) continue;
          const fecha = parseFechaFlexible(r[0]);
          if (!fecha) continue;
          const concepto = String(r[1] || '').trim().replace(/\s+/g, ' ');
          const catRaw = String(r[2] || '').trim();
          const valor = parseNum(r[3]);
          const observacion = String(r[4] || '').trim();
          const descripcion = observacion ? `${concepto} — ${observacion}` : (concepto || 'Gasto operación');
          rows.push({ fecha, catNorm: normalizeCatName(catRaw), catRaw, descripcion, proveedor: '', valor });
        }
        if (!rows.length) { triggerToast('No se encontraron filas válidas en el archivo', 'error'); return; }
        await runImport('general', rows);
      } catch (err) {
        triggerToast(err.message || 'Error al importar Gastos Generales', 'error');
      } finally {
        setIsImportingGeneral(false);
      }
    };

    const handleSaveCat = async (e) => {
      e.preventDefault();
      try {
        if (editingCatId) {
          const [row] = await window.SB.crudUpdate('op_categorias_gasto', editingCatId, catToDb(catForm));
          setCategories(prev => prev.map(c => c.id === editingCatId ? catFromDb(row) : c));
          triggerToast('Categoría actualizada');
        } else {
          const [row] = await window.SB.crudInsert('op_categorias_gasto', [catToDb(catForm)]);
          setCategories(prev => [...prev, catFromDb(row)]);
          triggerToast('Categoría creada');
        }
        setShowCatModal(false); setEditingCatId(null);
      } catch (err) { triggerToast(err.message || 'Error al guardar la categoría', 'error'); }
    };

    const openNew = () => {
      if (!activePeriodId) { triggerToast('Primero crea un periodo en Periodos / Cierre', 'error'); return; }
      setEditingId(null); setFormData(blankForm); setShowForm(true);
    };
    const editRow = (g) => {
      setFormData({ fecha: g.fecha || '', categoryId: g.categoryId, descripcion: g.descripcion, proveedor: g.proveedor, valor: g.valor });
      setEditingId(g.id); setShowForm(true);
    };
    const handleSave = async (e) => {
      e.preventDefault();
      const payload = { ...formData, periodId: activePeriodId };
      try {
        if (editingId) {
          const [row] = await window.SB.crudUpdate('op_gastos', editingId, gastoToDb(payload));
          setGastos(prev => prev.map(g => g.id === editingId ? gastoFromDb(row) : g));
          triggerToast('Gasto actualizado');
        } else {
          const [row] = await window.SB.crudInsert('op_gastos', [gastoToDb(payload)]);
          setGastos(prev => [...prev, gastoFromDb(row)]);
          triggerToast('Gasto registrado');
        }
        setShowForm(false); setEditingId(null);
      } catch (err) { triggerToast(err.message || 'Error al guardar el gasto', 'error'); }
    };

    const downloadTemplate = async () => {
      try {
        const XLSX = await ensureXLSX();
        const ws = XLSX.utils.aoa_to_sheet([
          ['Fecha (AAAA-MM-DD)', 'Categoría', 'Descripción', 'Proveedor', 'Valor'],
          ['2026-07-05', categories[0]?.name || 'Transporte', 'Flete entrega Bogotá', 'Transportadora XYZ', 450000],
        ]);
        ws['!cols'] = [{ wch: 16 }, { wch: 20 }, { wch: 30 }, { wch: 24 }, { wch: 14 }];
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Gastos');
        XLSX.writeFile(wb, 'Plantilla_Gastos_CierreOperativo.xlsx');
      } catch (err) { triggerToast('Error al generar la plantilla', 'error'); }
    };
    const handleImportFile = async (e) => {
      const file = e.target.files?.[0];
      if (!file) return;
      if (!activePeriodId) { triggerToast('Primero crea/selecciona un periodo', 'error'); e.target.value = ''; return; }
      setIsImporting(true);
      try {
        const XLSX = await ensureXLSX();
        const buf = await file.arrayBuffer();
        const wb = XLSX.read(buf, { type: 'array' });
        const rows = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
        const startIdx = rows.length && String(rows[0]?.[0] || '').trim().toLowerCase().startsWith('fecha') ? 1 : 0;
        const catByName = {};
        categories.forEach(c => { catByName[c.name.trim().toLowerCase()] = c.id; });
        const toInsert = [];
        let skipped = 0, unmatchedCategory = 0;
        for (let i = startIdx; i < rows.length; i++) {
          const r = rows[i];
          if (!r || !r.length) continue;
          const descripcion = String(r[2] || '').trim();
          const catName = String(r[1] || '').trim();
          if (!descripcion) { skipped++; continue; }
          let categoryId = '';
          if (catName) { categoryId = catByName[catName.toLowerCase()] || ''; if (!categoryId) unmatchedCategory++; }
          toInsert.push(gastoToDb({
            periodId: activePeriodId, fecha: parseFecha(r[0]), categoryId, descripcion,
            proveedor: String(r[3] || '').trim(), valor: parseNum(r[4]),
          }));
        }
        if (!toInsert.length) { triggerToast('No se encontraron filas válidas para importar', 'error'); return; }
        const rowsInserted = await bulkInsert('op_gastos', toInsert);
        setGastos(prev => [...prev, ...rowsInserted.map(gastoFromDb)]);
        let msg = `${rowsInserted.length} gasto(s) importado(s)`;
        if (skipped) msg += ` · ${skipped} sin descripción`;
        if (unmatchedCategory) msg += ` · ${unmatchedCategory} sin categoría reconocida`;
        triggerToast(msg);
      } catch (err) { triggerToast(err.message || 'Error al importar el archivo', 'error'); }
      finally { setIsImporting(false); if (fileInputRef.current) fileInputRef.current.value = ''; }
    };

    // El desplegable de categorías solo debe ofrecer las categorías que
    // realmente tienen gastos dentro del origen elegido (si se elige uno) —
    // así "General"/"Corabastos" y "categoría" filtran en cascada, no en
    // paralelo. Si la categoría antes elegida deja de aplicar al cambiar de
    // origen, se limpia sola en vez de dejar la tabla vacía en silencio.
    const gastosDelOrigen = gastos.filter(g => filterOrigen ? g.origen === filterOrigen : true);
    const availableCatIds = new Set(gastosDelOrigen.map(g => g.categoryId).filter(Boolean));
    const categoryOptions = categories.filter(c => availableCatIds.has(c.id));
    useEffect(() => {
      if (filterCategoryId && !availableCatIds.has(filterCategoryId)) setFilterCategoryId('');
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [filterOrigen]);

    const filtered = gastosDelOrigen
      .filter(g => `${g.descripcion} ${g.proveedor}`.toLowerCase().includes(search.toLowerCase()))
      .filter(g => filterCategoryId ? g.categoryId === filterCategoryId : true);
    const total = filtered.reduce((s, g) => s + g.valor, 0);
    const ORIGEN_LABEL = { corabastos: 'Corabastos', general: 'General' };

    const catLabelFor = (g) => {
      const cat = categories.find(c => c.id === g.categoryId);
      if (!cat) return 'Sin categoría';
      const parent = cat.parentId ? categories.find(c => c.id === cat.parentId) : null;
      return parent ? `${parent.name} › ${cat.name}` : cat.name;
    };

    // Exporta EXACTAMENTE las filas visibles con el filtro actual (búsqueda +
    // origen + categoría) — no todo el listado de gastos del periodo.
    const exportFiltered = async () => {
      if (!filtered.length) { triggerToast('No hay gastos con ese filtro para exportar', 'error'); return; }
      try {
        const XLSX = await ensureXLSX();
        const filtroCategoria = filterCategoryId ? catLabelFor({ categoryId: filterCategoryId }) : 'Todas';
        const filtroOrigen = filterOrigen ? (ORIGEN_LABEL[filterOrigen] || filterOrigen) : 'Todos';
        const filtroBusqueda = search.trim() || '(ninguna)';
        const aoa = [
          ['Filtros aplicados'],
          ['Periodo', activePeriod?.month || '—'],
          ['Origen', filtroOrigen],
          ['Categoría', filtroCategoria],
          ['Búsqueda', filtroBusqueda],
          ['Total filtrado', total],
          [],
          ['Fecha', 'Origen', 'Categoría', 'Descripción', 'Proveedor', 'Valor', 'Notas'],
          ...filtered.map(g => [
            g.fecha || '',
            ORIGEN_LABEL[g.origen] || g.origen || (g.sourceCmId ? 'Caja Menor' : '—'),
            catLabelFor(g),
            g.descripcion || '',
            g.proveedor || '',
            g.valor,
            [g.sourceCmId ? 'Sincronizado desde Caja Menor' : '', esTransferenciaCajaMenor(g) ? 'Transferencia (no cuenta como gasto)' : '']
              .filter(Boolean).join(' · '),
          ]),
        ];
        const ws = XLSX.utils.aoa_to_sheet(aoa);
        ws['!cols'] = [{ wch: 12 }, { wch: 12 }, { wch: 26 }, { wch: 32 }, { wch: 24 }, { wch: 14 }, { wch: 32 }];
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Gastos filtrados');
        const parteOrigen = filterOrigen ? `_${filterOrigen}` : '';
        const parteCategoria = filterCategoryId ? `_${catLabelFor({ categoryId: filterCategoryId }).replace(/[^\w]+/g, '')}` : '';
        const fecha = new Date().toISOString().slice(0, 10);
        XLSX.writeFile(wb, `Gastos_Filtrados${parteOrigen}${parteCategoria}_${fecha}.xlsx`);
      } catch (err) { triggerToast('Error al generar el Excel', 'error'); }
    };

    return (
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div>
            <h1 className="text-2xl font-bold text-slate-800">Gastos</h1>
            <p className="text-slate-500 text-sm">Categoriza y registra todo tipo de gasto operativo</p>
          </div>
          <button onClick={() => { setEditingCatId(null); setCatForm(blankCatForm); setShowCatModal(true); }} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
            <Tags className="h-4 w-4 mr-2" /> Nueva Categoría
          </button>
        </div>

        <div className="flex flex-wrap gap-2">
          {(catsExpanded ? categories : categories.slice(0, CATS_COLLAPSED_COUNT)).map(c => {
            const parent = c.parentId ? categories.find(x => x.id === c.parentId) : null;
            const isUmbrella = c.name === 'Caja Menor Administración' && !c.parentId;
            const isSynced = isUmbrella || !!c.sourceCmCategoriaId;
            return (
              <span key={c.id} className="inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-full border" style={{ backgroundColor: `${c.color}18`, color: c.color, borderColor: `${c.color}40` }} title={isSynced ? 'Sincronizado desde Caja Menor — se administra allá' : ''}>
                <span className="w-2 h-2 rounded-full" style={{ backgroundColor: c.color }}></span>
                {parent ? `${parent.name} › ${c.name}` : c.name}
                {isSynced ? (
                  <span className="ml-1 opacity-60" title="Sincronizado desde Caja Menor">🔒</span>
                ) : (
                  <>
                    <button onClick={() => { setEditingCatId(c.id); setCatForm({ name: c.name, color: c.color }); setShowCatModal(true); }} className="ml-1 opacity-60 hover:opacity-100"><Edit2 className="h-3 w-3" /></button>
                    <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'categoria', id: c.id, title: c.name })} className="opacity-60 hover:opacity-100"><Trash2 className="h-3 w-3" /></button>
                  </>
                )}
              </span>
            );
          })}
          {categories.length === 0 && <span className="text-sm text-slate-400">Aún no hay categorías — crea la primera arriba.</span>}
          {categories.length > CATS_COLLAPSED_COUNT && (
            <button onClick={() => setCatsExpanded(v => !v)} className="inline-flex items-center gap-1 text-xs font-bold px-3 py-1.5 rounded-full border border-slate-300 text-slate-500 hover:bg-slate-50">
              {catsExpanded ? 'Ver menos' : `Ver todas (${categories.length})`}
            </button>
          )}
        </div>
        {categories.some(c => c.sourceCmCategoriaId || (c.name === 'Caja Menor Administración' && !c.parentId)) && (
          <p className="text-xs text-slate-400 -mt-2">🔒 Las categorías de Caja Menor se sincronizan automáticamente y solo se pueden editar desde ese módulo.</p>
        )}

        {showCatModal && (
          <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-sm w-full overflow-hidden">
              <div className="bg-slate-900 text-white p-4 flex justify-between items-center">
                <h3 className="font-bold">{editingCatId ? 'Editar Categoría' : 'Nueva Categoría de Gasto'}</h3>
                <button onClick={() => setShowCatModal(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <form onSubmit={handleSaveCat} className="p-6 space-y-4">
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Nombre *</label>
                  <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={catForm.name} onChange={e => setCatForm({ ...catForm, name: e.target.value })} /></div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Color</label>
                  <div className="flex items-center gap-3">
                    <input type="color" className="h-10 w-16 p-1 border border-slate-300 rounded cursor-pointer" value={catForm.color} onChange={e => setCatForm({ ...catForm, color: e.target.value })} />
                    <span className="text-xs text-slate-500 uppercase font-mono">{catForm.color}</span>
                  </div></div>
                <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                  <button type="button" onClick={() => setShowCatModal(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button type="submit" className="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700">Guardar</button>
                </div>
              </form>
            </div>
          </div>
        )}

        <div className="flex flex-col sm:flex-row flex-wrap justify-end gap-2">
          <button onClick={downloadTemplate} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
            <Download className="h-4 w-4 mr-2" /> Plantilla
          </button>
          <button onClick={() => fileInputRef.current?.click()} disabled={isImporting} className="bg-sky-600 hover:bg-sky-700 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
            <Upload className="h-4 w-4 mr-2" /> {isImporting ? 'Importando...' : 'Importar Excel'}
          </button>
          <input ref={fileInputRef} type="file" accept=".xlsx,.xls" className="hidden" onChange={handleImportFile} />
          <button onClick={() => fileInputCoraRef.current?.click()} disabled={isImportingCora} className="bg-amber-600 hover:bg-amber-700 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
            <Upload className="h-4 w-4 mr-2" /> {isImportingCora ? 'Importando...' : 'Importar Gastos Corabastos'}
          </button>
          <input ref={fileInputCoraRef} type="file" accept=".xlsx,.xls" className="hidden" onChange={e => { const f = e.target.files?.[0]; if (f) importCorabastos(f); e.target.value = ''; }} />
          <button onClick={() => fileInputGeneralRef.current?.click()} disabled={isImportingGeneral} className="bg-teal-600 hover:bg-teal-700 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
            <Upload className="h-4 w-4 mr-2" /> {isImportingGeneral ? 'Importando...' : 'Importar Gastos Generales'}
          </button>
          <input ref={fileInputGeneralRef} type="file" accept=".xlsx,.xls" className="hidden" onChange={e => { const f = e.target.files?.[0]; if (f) importGeneral(f); e.target.value = ''; }} />
          <button onClick={openNew} className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
            <Plus className="h-4 w-4 mr-2" /> Nuevo Gasto
          </button>
        </div>

        {pendingImport && (
          <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-lg w-full overflow-hidden">
              <div className="bg-slate-900 text-white p-4 flex justify-between items-center">
                <div>
                  <h3 className="font-bold">Confirma las categorías nuevas</h3>
                  <p className="text-xs text-slate-300 mt-0.5">{pendingImport.pendingCats.length} categoría{pendingImport.pendingCats.length === 1 ? '' : 's'} del archivo no coincide{pendingImport.pendingCats.length === 1 ? '' : 'n'} con ninguna existente</p>
                </div>
                <button onClick={() => { setPendingImport(null); setCatChoices({}); }} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <div className="p-6 space-y-4 max-h-[60vh] overflow-y-auto">
                {pendingImport.pendingCats.map(({ norm, raw }) => {
                  const choice = catChoices[norm] || { mode: 'new', name: raw, color: COLOR_PALETTE[0] };
                  return (
                    <div key={norm} className="border border-slate-200 rounded-lg p-3 space-y-2">
                      <p className="text-xs font-bold text-slate-700">Categoría en el archivo: <span className="font-mono bg-slate-100 px-1.5 py-0.5 rounded">{raw}</span></p>
                      <div className="flex gap-3 text-xs">
                        <label className="flex items-center gap-1.5 cursor-pointer">
                          <input type="radio" checked={choice.mode === 'new'} onChange={() => setCatChoices(prev => ({ ...prev, [norm]: { ...choice, mode: 'new' } }))} /> Crear categoría nueva
                        </label>
                        <label className="flex items-center gap-1.5 cursor-pointer">
                          <input type="radio" checked={choice.mode === 'link'} onChange={() => setCatChoices(prev => ({ ...prev, [norm]: { ...choice, mode: 'link', linkId: choice.linkId || categories[0]?.id || '' } }))} /> Vincular con categoría existente
                        </label>
                      </div>
                      {choice.mode === 'new' ? (
                        <div className="flex gap-2 items-center">
                          <input type="text" className="flex-1 p-2 border border-slate-300 rounded-lg text-sm" value={choice.name} onChange={e => setCatChoices(prev => ({ ...prev, [norm]: { ...choice, name: e.target.value } }))} />
                          <input type="color" className="h-9 w-12 p-1 border border-slate-300 rounded cursor-pointer" value={choice.color} onChange={e => setCatChoices(prev => ({ ...prev, [norm]: { ...choice, color: e.target.value } }))} />
                        </div>
                      ) : (
                        <select className="w-full p-2 border border-slate-300 rounded-lg text-sm bg-white" value={choice.linkId || ''} onChange={e => setCatChoices(prev => ({ ...prev, [norm]: { ...choice, linkId: e.target.value } }))}>
                          {categories.map(c => <option key={c.id} value={c.id}>{c.sourceCmCategoriaId ? '🔒 ' : ''}{c.name}</option>)}
                        </select>
                      )}
                    </div>
                  );
                })}
              </div>
              <div className="flex justify-end space-x-3 p-4 border-t border-slate-200">
                <button type="button" onClick={() => { setPendingImport(null); setCatChoices({}); }} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                <button onClick={confirmCategoryChoices} className="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700">Confirmar e Importar</button>
              </div>
            </div>
          </div>
        )}

        {showForm && (
          <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-lg w-full overflow-hidden">
              <div className="bg-slate-900 text-white p-4 flex justify-between items-center">
                <h3 className="font-bold">{editingId ? 'Editar Gasto' : 'Nuevo Gasto'}</h3>
                <button onClick={() => setShowForm(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <form onSubmit={handleSave} className="p-6 space-y-4">
                <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Fecha</label>
                    <input type="date" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.fecha} onChange={e => setFormData({ ...formData, fecha: e.target.value })} /></div>
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Categoría</label>
                    <select className="w-full p-2.5 border border-slate-300 rounded-lg text-sm bg-white" value={formData.categoryId} onChange={e => setFormData({ ...formData, categoryId: e.target.value })}>
                      <option value="">-- Sin categoría --</option>
                      {categories.map(c => {
                        const parent = c.parentId ? categories.find(x => x.id === c.parentId) : null;
                        return <option key={c.id} value={c.id}>{parent ? `${parent.name} › ${c.name}` : c.name}</option>;
                      })}
                    </select></div>
                </div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Descripción *</label>
                  <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.descripcion} onChange={e => setFormData({ ...formData, descripcion: e.target.value })} /></div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Proveedor</label>
                  <input type="text" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.proveedor} onChange={e => setFormData({ ...formData, proveedor: e.target.value })} /></div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Valor ($) *</label>
                  <input type="number" required step="any" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm font-bold" value={formData.valor} onChange={e => setFormData({ ...formData, valor: e.target.value })} /></div>
                <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                  <button type="button" onClick={() => setShowForm(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button type="submit" className="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700">Guardar</button>
                </div>
              </form>
            </div>
          </div>
        )}

        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
          <div className="p-4 border-b border-slate-200 bg-slate-50/50 flex flex-col md:flex-row gap-3 justify-between">
            <div className="relative flex-1 max-w-sm">
              <Search className="h-4 w-4 absolute left-3 top-3 text-slate-400" />
              <input type="text" placeholder="Buscar por descripción o proveedor..." className="w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg text-sm bg-white" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <select className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white" value={filterOrigen} onChange={e => setFilterOrigen(e.target.value)}>
              <option value="">Todos los orígenes</option>
              <option value="corabastos">Corabastos</option>
              <option value="general">General</option>
            </select>
            <select className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white" value={filterCategoryId} onChange={e => setFilterCategoryId(e.target.value)}>
              <option value="">Todas las categorías{filterOrigen ? ` (${ORIGEN_LABEL[filterOrigen] || filterOrigen})` : ''}</option>
              {categoryOptions.map(c => {
                const parent = c.parentId ? categories.find(x => x.id === c.parentId) : null;
                return <option key={c.id} value={c.id}>{parent ? `${parent.name} › ${c.name}` : c.name}</option>;
              })}
            </select>
            <span className="text-sm font-bold text-slate-700 self-center">Total: {formatCurrency(total)}</span>
            <button onClick={exportFiltered} className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg text-sm font-bold flex items-center shadow-sm self-center" title="Descarga en Excel exactamente las filas que ves con el filtro actual">
              <FileSpreadsheet className="h-4 w-4 mr-2" /> Exportar filtro
            </button>
          </div>
          <div className="overflow-x-auto max-h-[520px]">
            <table className="w-full text-sm text-left">
              <thead className="bg-slate-100 text-slate-600 text-xs uppercase font-bold sticky top-0">
                <tr><th className="px-4 py-3">Fecha</th><th className="px-4 py-3">Categoría</th><th className="px-4 py-3">Descripción</th><th className="px-4 py-3">Proveedor</th><th className="px-4 py-3 text-right">Valor</th><th className="px-4 py-3 text-center">Acciones</th></tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filtered.slice(page * TABLE_PAGE_SIZE, (page + 1) * TABLE_PAGE_SIZE).map(g => {
                  const cat = categories.find(c => c.id === g.categoryId);
                  const parentCat = cat?.parentId ? categories.find(c => c.id === cat.parentId) : null;
                  const isSynced = !!g.sourceCmId;
                  return (
                    <tr key={g.id} className={`hover:bg-slate-50 ${isSynced ? 'bg-indigo-50/30' : ''}`}>
                      <td className="px-4 py-2.5 text-xs text-slate-600 whitespace-nowrap">{g.fecha || '—'}</td>
                      <td className="px-4 py-2.5 text-xs">
                        {cat ? <span className="px-2 py-0.5 rounded font-semibold" style={{ backgroundColor: `${cat.color}18`, color: cat.color }}>{parentCat ? `${parentCat.name} › ${cat.name}` : cat.name}</span> : <span className="text-slate-400">Sin categoría</span>}
                      </td>
                      <td className="px-4 py-2.5 text-xs text-slate-800">
                        {g.descripcion}
                        {isSynced && <span className="ml-1.5 text-[10px] font-bold text-indigo-500" title="Sincronizado automáticamente desde Caja Menor">🔒 Caja Menor</span>}
                        {!isSynced && g.origen && <span className={`ml-1.5 text-[10px] font-bold px-1.5 py-0.5 rounded ${g.origen === 'corabastos' ? 'bg-amber-100 text-amber-700' : 'bg-teal-100 text-teal-700'}`}>{ORIGEN_LABEL[g.origen] || g.origen}</span>}
                        {esTransferenciaCajaMenor(g) && <span className="ml-1.5 text-[10px] font-bold px-1.5 py-0.5 rounded bg-sky-100 text-sky-700" title="Transferencia de efectivo, no cuenta como gasto en Análisis/Dashboard">🔁 Transferencia</span>}
                      </td>
                      <td className="px-4 py-2.5 text-xs text-slate-500">{g.proveedor || '—'}</td>
                      <td className="px-4 py-2.5 text-xs text-right font-bold text-slate-800">{formatCurrency(g.valor)}</td>
                      <td className="px-4 py-2.5 text-center whitespace-nowrap">
                        {isSynced ? (
                          <span className="text-[10px] text-slate-400">Editar en Caja Menor</span>
                        ) : (
                          <>
                            <button onClick={() => editRow(g)} className="p-1.5 text-slate-400 hover:text-indigo-600"><Edit2 className="h-3.5 w-3.5" /></button>
                            <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'gasto', id: g.id, title: g.descripcion })} className="p-1.5 text-slate-400 hover:text-rose-600"><Trash2 className="h-3.5 w-3.5" /></button>
                          </>
                        )}
                      </td>
                    </tr>
                  );
                })}
                {filtered.length === 0 && <tr><td colSpan="6" className="px-6 py-10 text-center text-slate-400 text-sm">Sin gastos registrados en este periodo.</td></tr>}
              </tbody>
            </table>
          </div>
          <Pager page={page} setPage={setPage} total={filtered.length} />
        </div>
      </div>
    );
  };

  // ==========================================================================
  // Nómina
  // ==========================================================================
  const NominaView = () => {
    const [showForm, setShowForm] = useState(false);
    const [editingId, setEditingId] = useState(null);
    const [search, setSearch] = useState('');
    const [page, setPage] = useState(0);
    const [isImporting, setIsImporting] = useState(false);
    const fileInputRef = useRef(null);
    const blankForm = { empleado: '', cargo: '', salarioBase: '', horasExtras: '', valorHorasExtras: '', deducciones: '', totalPagado: '' };
    const [formData, setFormData] = useState(blankForm);
    useEffect(() => { setPage(0); }, [search]);

    // ---- Importador dedicado del "Informe de Nómina" (formato fijo: PERIODO,
    // COLABORADOR, DOCUMENTO, # DOCUMENTO, SUELDO, AUXILIO TRANSPORTE, VALOR
    // TOTAL, QUINCENA, HORAS EXTRAS DIURNAS, VALOR UNITARIO HORA EXTRA, VALOR
    // TOTAL HORAS EXTRAS, RECARGO NOCTURNO, ..., DESCUENTOS, PARAFISCALES,
    // ADICIONALES O COMISIONES, VALOR TOTAL NOMINA). No trae fecha real (solo
    // un texto de quincena tipo "1 DE JULIO - 15 DE JULIO", sin año), así que
    // — a diferencia de Ventas/Compras/Gastos — se importa siempre al periodo
    // que esté activo en ese momento, igual que el importador genérico.
    const fileInputInformeRef = useRef(null);
    const [isImportingInforme, setIsImportingInforme] = useState(false);
    const importInformeNomina = async (file) => {
      if (!activePeriodId) { triggerToast('Primero crea/selecciona un periodo', 'error'); return; }
      setIsImportingInforme(true);
      try {
        const XLSX = await ensureXLSX();
        const buf = await file.arrayBuffer();
        const wb = XLSX.read(buf, { type: 'array' });
        const raw = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
        const startIdx = raw.length && String(raw[0]?.[0] || '').trim().toUpperCase() === 'PERIODO' ? 1 : 0;
        const rows = [];
        const seqCounter = {};
        for (let i = startIdx; i < raw.length; i++) {
          const r = raw[i];
          if (!r || !r.length) continue;
          const empleado = String(r[1] || '').trim();
          if (!empleado) continue;
          const periodoQuincena = String(r[0] || '').trim();
          const documento = String(r[3] || '').trim();
          const salarioBase = parseNum(r[4]);
          const auxilioTransporte = parseNum(r[5]);
          const valorMensualBase = parseNum(r[6]);
          const valorQuincenaBase = parseNum(r[7]);
          const horasExtras = parseNum(r[8]);
          const valorUnitarioHoraExtra = parseNum(r[9]);
          const valorHorasExtras = parseNum(r[10]);
          const recargoNocturnoHoras = parseNum(r[11]);
          const valorUnitarioRecargoNocturno = parseNum(r[12]);
          const valorRecargoNocturno = parseNum(r[13]);
          const recargoDominicalHoras = parseNum(r[14]);
          const valorUnitarioRecargoDominical = parseNum(r[15]);
          const valorRecargoDominical = parseNum(r[16]);
          const horaExtraDominicalHoras = parseNum(r[17]);
          const valorUnitarioHoraExtraDominical = parseNum(r[18]);
          const valorHoraExtraDominical = parseNum(r[19]);
          const valorTotalExtrasRecargos = parseNum(r[20]);
          const deducciones = parseNum(r[21]);
          const parafiscales = parseNum(r[22]);
          const adicionalesComisiones = parseNum(r[23]);
          const totalPagado = parseNum(r[24]);

          const fpKey = normalizeCatName(`${documento || empleado}|${periodoQuincena}`);
          seqCounter[fpKey] = (seqCounter[fpKey] || 0) + 1;
          rows.push({
            ...nominaToDb({
              periodId: activePeriodId, empleado, cargo: '', salarioBase, horasExtras, valorHorasExtras, deducciones, totalPagado,
              documento, periodoQuincena, auxilioTransporte, valorMensualBase, valorQuincenaBase, valorUnitarioHoraExtra,
              recargoNocturnoHoras, valorUnitarioRecargoNocturno, valorRecargoNocturno,
              recargoDominicalHoras, valorUnitarioRecargoDominical, valorRecargoDominical,
              horaExtraDominicalHoras, valorUnitarioHoraExtraDominical, valorHoraExtraDominical,
              valorTotalExtrasRecargos, parafiscales, adicionalesComisiones,
            }),
            origen: 'informe_nomina', external_ref: `${fpKey}|${seqCounter[fpKey]}`,
          });
        }
        if (!rows.length) { triggerToast('No se encontraron filas válidas para importar', 'error'); return; }
        const result = await bulkUpsert('op_nomina', rows, 'origen,external_ref');
        const n = await window.SB.crudSelect('op_nomina', { eq: { period_id: activePeriodId } });
        setNomina(n.map(nominaFromDb));
        triggerToast(`${result.length} registro(s) de nómina importado(s)/actualizado(s)`);
      } catch (err) {
        triggerToast(err.message || 'Error al importar el Informe de Nómina', 'error');
      } finally {
        setIsImportingInforme(false);
      }
    };

    const openNew = () => {
      if (!activePeriodId) { triggerToast('Primero crea un periodo en Periodos / Cierre', 'error'); return; }
      setEditingId(null); setFormData(blankForm); setShowForm(true);
    };
    const editRow = (n) => {
      setFormData({ empleado: n.empleado, cargo: n.cargo, salarioBase: n.salarioBase, horasExtras: n.horasExtras, valorHorasExtras: n.valorHorasExtras, deducciones: n.deducciones, totalPagado: n.totalPagado });
      setEditingId(n.id); setShowForm(true);
    };
    const handleSave = async (e) => {
      e.preventDefault();
      const base = parseFloat(formData.salarioBase) || 0;
      const extras = parseFloat(formData.valorHorasExtras) || 0;
      const deducc = parseFloat(formData.deducciones) || 0;
      const computedTotal = base + extras - deducc;
      const total = formData.totalPagado !== '' ? parseFloat(formData.totalPagado) : computedTotal;
      const payload = { ...formData, periodId: activePeriodId, salarioBase: base, valorHorasExtras: extras, deducciones: deducc, totalPagado: total };
      try {
        if (editingId) {
          const [row] = await window.SB.crudUpdate('op_nomina', editingId, nominaToDb(payload));
          setNomina(prev => prev.map(n => n.id === editingId ? nominaFromDb(row) : n));
          triggerToast('Nómina actualizada');
        } else {
          const [row] = await window.SB.crudInsert('op_nomina', [nominaToDb(payload)]);
          setNomina(prev => [...prev, nominaFromDb(row)]);
          triggerToast('Nómina registrada');
        }
        setShowForm(false); setEditingId(null);
      } catch (err) { triggerToast(err.message || 'Error al guardar la nómina', 'error'); }
    };

    const downloadTemplate = async () => {
      try {
        const XLSX = await ensureXLSX();
        const ws = XLSX.utils.aoa_to_sheet([
          ['Empleado', 'Cargo', 'Salario Base', 'Horas Extras', 'Valor Horas Extras', 'Deducciones', 'Total Pagado'],
          ['Juan Pérez', 'Conductor', 1500000, 12, 180000, 65000, 1615000],
        ]);
        ws['!cols'] = [{ wch: 24 }, { wch: 18 }, { wch: 14 }, { wch: 12 }, { wch: 16 }, { wch: 14 }, { wch: 14 }];
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Nomina');
        XLSX.writeFile(wb, 'Plantilla_Nomina_CierreOperativo.xlsx');
      } catch (err) { triggerToast('Error al generar la plantilla', 'error'); }
    };
    const handleImportFile = async (e) => {
      const file = e.target.files?.[0];
      if (!file) return;
      if (!activePeriodId) { triggerToast('Primero crea/selecciona un periodo', 'error'); e.target.value = ''; return; }
      setIsImporting(true);
      try {
        const XLSX = await ensureXLSX();
        const buf = await file.arrayBuffer();
        const wb = XLSX.read(buf, { type: 'array' });
        const rows = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
        // El Informe de Nómina real trae "PERIODO" en la columna A; la
        // plantilla simple trae "Empleado" ahí — si detectamos "PERIODO" es
        // el archivo equivocado para este botón.
        if (String(rows[0]?.[0] || '').trim().toUpperCase() === 'PERIODO') {
          triggerToast('Este archivo es el Informe de Nómina completo — usa el botón "Importar Informe de Nómina", no "Importar Excel".', 'error');
          return;
        }
        const startIdx = rows.length && String(rows[0]?.[0] || '').trim().toLowerCase().startsWith('empleado') ? 1 : 0;
        const toInsert = [];
        let skipped = 0;
        for (let i = startIdx; i < rows.length; i++) {
          const r = rows[i];
          if (!r || !r.length) continue;
          const empleado = String(r[0] || '').trim();
          if (!empleado) { skipped++; continue; }
          const salarioBase = parseNum(r[2]);
          const valorHorasExtras = parseNum(r[4]);
          const deducciones = parseNum(r[5]);
          const totalPagado = r[6] !== undefined && r[6] !== '' ? parseNum(r[6]) : (salarioBase + valorHorasExtras - deducciones);
          toInsert.push(nominaToDb({
            periodId: activePeriodId, empleado, cargo: String(r[1] || '').trim(),
            salarioBase, horasExtras: parseNum(r[3]), valorHorasExtras, deducciones, totalPagado,
          }));
        }
        if (!toInsert.length) { triggerToast('No se encontraron filas válidas para importar', 'error'); return; }
        const rowsInserted = await bulkInsert('op_nomina', toInsert);
        setNomina(prev => [...prev, ...rowsInserted.map(nominaFromDb)]);
        triggerToast(`${rowsInserted.length} registro(s) de nómina importado(s)${skipped ? ` · ${skipped} fila(s) omitida(s)` : ''}`);
      } catch (err) { triggerToast(err.message || 'Error al importar el archivo', 'error'); }
      finally { setIsImporting(false); if (fileInputRef.current) fileInputRef.current.value = ''; }
    };

    const filtered = nomina.filter(n => `${n.empleado} ${n.cargo}`.toLowerCase().includes(search.toLowerCase()));
    const total = filtered.reduce((s, n) => s + n.totalPagado, 0);

    return (
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div>
            <h1 className="text-2xl font-bold text-slate-800">Nómina</h1>
            <p className="text-slate-500 text-sm">Salarios, horas extras y deducciones del periodo</p>
          </div>
          <div className="flex flex-wrap gap-2">
            <button onClick={downloadTemplate} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Download className="h-4 w-4 mr-2" /> Plantilla
            </button>
            <button onClick={() => fileInputRef.current?.click()} disabled={isImporting} className="bg-sky-600 hover:bg-sky-700 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Upload className="h-4 w-4 mr-2" /> {isImporting ? 'Importando...' : 'Importar Excel'}
            </button>
            <input ref={fileInputRef} type="file" accept=".xlsx,.xls" className="hidden" onChange={handleImportFile} />
            <button onClick={() => fileInputInformeRef.current?.click()} disabled={isImportingInforme} className="bg-emerald-600 hover:bg-emerald-700 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Upload className="h-4 w-4 mr-2" /> {isImportingInforme ? 'Importando...' : 'Importar Informe de Nómina'}
            </button>
            <input ref={fileInputInformeRef} type="file" accept=".xlsx,.xls" className="hidden" onChange={e => { const f = e.target.files?.[0]; if (f) importInformeNomina(f); e.target.value = ''; }} />
            <button onClick={openNew} className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
              <Plus className="h-4 w-4 mr-2" /> Nuevo Registro
            </button>
          </div>
        </div>

        {showForm && (
          <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-lg w-full overflow-hidden">
              <div className="bg-slate-900 text-white p-4 flex justify-between items-center">
                <h3 className="font-bold">{editingId ? 'Editar Nómina' : 'Nuevo Registro de Nómina'}</h3>
                <button onClick={() => setShowForm(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <form onSubmit={handleSave} className="p-6 space-y-4">
                <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Empleado *</label>
                    <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.empleado} onChange={e => setFormData({ ...formData, empleado: e.target.value })} /></div>
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Cargo</label>
                    <input type="text" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.cargo} onChange={e => setFormData({ ...formData, cargo: e.target.value })} /></div>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Salario Base ($) *</label>
                    <input type="number" required step="any" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.salarioBase} onChange={e => setFormData({ ...formData, salarioBase: e.target.value })} /></div>
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Horas Extras</label>
                    <input type="number" step="any" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.horasExtras} onChange={e => setFormData({ ...formData, horasExtras: e.target.value })} /></div>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Valor Horas Extras ($)</label>
                    <input type="number" step="any" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.valorHorasExtras} onChange={e => setFormData({ ...formData, valorHorasExtras: e.target.value })} /></div>
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Deducciones ($)</label>
                    <input type="number" step="any" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.deducciones} onChange={e => setFormData({ ...formData, deducciones: e.target.value })} /></div>
                </div>
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Total Pagado ($) — déjalo vacío para calcularlo automático</label>
                  <input type="number" step="any" placeholder="Base + Horas extras − Deducciones" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm font-bold" value={formData.totalPagado} onChange={e => setFormData({ ...formData, totalPagado: e.target.value })} /></div>
                <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                  <button type="button" onClick={() => setShowForm(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button type="submit" className="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700">Guardar</button>
                </div>
              </form>
            </div>
          </div>
        )}

        <ImportBatchManager
          rows={nomina}
          origen="informe_nomina"
          table="op_nomina"
          label="Informe de Nómina"
          onDeleted={(pid) => setNomina(prev => prev.filter(n => !(n.periodId === pid && n.origen === 'informe_nomina')))}
        />

        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
          <div className="p-4 border-b border-slate-200 bg-slate-50/50 flex flex-col md:flex-row gap-3 justify-between">
            <div className="relative flex-1 max-w-sm">
              <Search className="h-4 w-4 absolute left-3 top-3 text-slate-400" />
              <input type="text" placeholder="Buscar por empleado o cargo..." className="w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg text-sm bg-white" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <span className="text-sm font-bold text-slate-700 self-center">Total pagado: {formatCurrency(total)}</span>
          </div>
          <div className="overflow-x-auto max-h-[520px]">
            <table className="w-full text-sm text-left">
              <thead className="bg-slate-100 text-slate-600 text-xs uppercase font-bold sticky top-0">
                <tr><th className="px-4 py-3">Empleado</th><th className="px-4 py-3">Cargo</th><th className="px-4 py-3 text-right">Salario Base</th><th className="px-4 py-3 text-right">Horas Extras</th><th className="px-4 py-3 text-right">Valor H. Extras</th><th className="px-4 py-3 text-right">Deducciones</th><th className="px-4 py-3 text-right">Total Pagado</th><th className="px-4 py-3 text-center">Acciones</th></tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filtered.slice(page * TABLE_PAGE_SIZE, (page + 1) * TABLE_PAGE_SIZE).map(n => (
                  <tr key={n.id} className="hover:bg-slate-50">
                    <td className="px-4 py-2.5 text-xs text-slate-800 font-medium">{n.empleado}</td>
                    <td className="px-4 py-2.5 text-xs text-slate-500">{n.cargo || n.periodoQuincena || '—'}</td>
                    <td className="px-4 py-2.5 text-xs text-right text-slate-600">{formatCurrency(n.salarioBase)}</td>
                    <td className="px-4 py-2.5 text-xs text-right text-slate-500">{n.horasExtras || 0}</td>
                    <td className="px-4 py-2.5 text-xs text-right text-slate-600">{formatCurrency(n.valorHorasExtras)}</td>
                    <td className="px-4 py-2.5 text-xs text-right text-rose-600">{formatCurrency(n.deducciones)}</td>
                    <td className="px-4 py-2.5 text-xs text-right font-bold text-slate-800">{formatCurrency(n.totalPagado)}</td>
                    <td className="px-4 py-2.5 text-center whitespace-nowrap">
                      <button onClick={() => editRow(n)} className="p-1.5 text-slate-400 hover:text-indigo-600"><Edit2 className="h-3.5 w-3.5" /></button>
                      <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'nomina', id: n.id, title: n.empleado })} className="p-1.5 text-slate-400 hover:text-rose-600"><Trash2 className="h-3.5 w-3.5" /></button>
                    </td>
                  </tr>
                ))}
                {filtered.length === 0 && <tr><td colSpan="8" className="px-6 py-10 text-center text-slate-400 text-sm">Sin nómina registrada en este periodo.</td></tr>}
              </tbody>
            </table>
          </div>
          <Pager page={page} setPage={setPage} total={filtered.length} />
        </div>
      </div>
    );
  };

  // ==========================================================================
  // Reportes — Informe Ejecutivo de Cierre (PDF, tamaño Carta)
  // ==========================================================================
  const ReportesView = () => {
    const [isGenerating, setIsGenerating] = useState(false);
    const [isGeneratingExcel, setIsGeneratingExcel] = useState(false);

    const generateInformeEjecutivo = async () => {
      if (!activePeriod) { triggerToast('Selecciona un periodo primero', 'error'); return; }
      setIsGenerating(true);
      try {
        const jsPDF = await ensureJSPDF();
        const doc = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'letter' });
        const marginX = 40;
        const pageW = doc.internal.pageSize.getWidth();
        const pageH = doc.internal.pageSize.getHeight();
        const tableW = pageW - marginX * 2;
        const bottomLimit = pageH - 50;

        // ---- Encabezado ----
        const logoW = await opAddLogo(doc, marginX, 18, 30);
        const titleX = marginX + (logoW ? logoW + 14 : 0);
        doc.setFontSize(16); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
        doc.text('ECOCOSECHA SAS', titleX, 38);
        doc.setFontSize(11); doc.setFont(undefined, 'normal'); doc.setTextColor(71, 85, 105);
        doc.text('Informe Ejecutivo de Cierre de Mes', titleX, 54);
        doc.setFontSize(8.5);
        doc.text(`Periodo: ${activePeriod.month}  ·  ${activePeriod.startDate} al ${activePeriod.endDate}  ·  Generado el ${new Date().toISOString().slice(0, 10)}`, titleX, 68);

        let y = 92;
        doc.setDrawColor(226, 232, 240); doc.line(marginX, y, pageW - marginX, y);
        y += 22;

        // ---- KPIs principales ----
        const kpis = [
          ['Ventas', formatCurrency(metrics.totalVentas)], ['Compras', formatCurrency(metrics.totalCompras)],
          ['Gastos', formatCurrency(metrics.totalGastos)], ['Nómina', formatCurrency(metrics.totalNomina)],
          ['Utilidad Bruta', formatCurrency(metrics.utilidadBruta)], ['Margen Bruto', `${metrics.margenBruto.toFixed(1)}%`],
          ['Utilidad Neta', formatCurrency(metrics.utilidadNeta)], ['Margen Neto', `${metrics.margenNeto.toFixed(1)}%`],
        ];
        const kpiGap = 10;
        const kpiW = (tableW - 3 * kpiGap) / 4;
        const kpiH = 52;
        kpis.forEach(([label, value], i) => {
          const col = i % 4; const row = Math.floor(i / 4);
          const kx = marginX + col * (kpiW + kpiGap);
          const ky = y + row * (kpiH + kpiGap);
          doc.setFillColor(15, 23, 42);
          doc.roundedRect(kx, ky, kpiW, kpiH, 6, 6, 'F');
          doc.setFontSize(7); doc.setFont(undefined, 'normal'); doc.setTextColor(148, 163, 184);
          doc.text(label.toUpperCase(), kx + 10, ky + 17);
          doc.setFontSize(12); doc.setFont(undefined, 'bold'); doc.setTextColor(255, 255, 255);
          doc.text(value, kx + 10, ky + 37);
        });
        y += 2 * (kpiH + kpiGap) + 20;
        doc.setFont(undefined, 'normal'); doc.setTextColor(0, 0, 0);

        // Tabla simple reutilizable [nombre, valor] con paginación dinámica.
        const simpleTable = (title, rows, color) => {
          if (y > bottomLimit - 60) { doc.addPage(); y = 50; }
          doc.setFontSize(9.5); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
          doc.text(title, marginX, y);
          doc.autoTable({
            startY: y + 8, margin: { left: marginX, right: marginX }, tableWidth: tableW,
            head: [[title, 'Total']],
            body: rows.length ? rows.map(r => [r.name, formatCurrency(r.value)]) : [['Sin datos', '—']],
            headStyles: { fillColor: color, fontSize: 8 },
            styles: { fontSize: 8, cellPadding: 4 },
            columnStyles: { 1: { halign: 'right', cellWidth: 110 } },
          });
          y = doc.lastAutoTable.finalY + 18;
        };
        // Igual que simpleTable, pero con una columna extra de Cantidad
        // (kilos/unidades) — para Top Productos vendidos/comprados.
        const simpleTableQty = (title, rows, color) => {
          if (y > bottomLimit - 60) { doc.addPage(); y = 50; }
          doc.setFontSize(9.5); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
          doc.text(title, marginX, y);
          doc.autoTable({
            startY: y + 8, margin: { left: marginX, right: marginX }, tableWidth: tableW,
            head: [[title, 'Cantidad', 'Total']],
            body: rows.length ? rows.map(r => [r.name, r.cantidad.toLocaleString('es-CO', { maximumFractionDigits: 1 }), formatCurrency(r.value)]) : [['Sin datos', '—', '—']],
            headStyles: { fillColor: color, fontSize: 8 },
            styles: { fontSize: 8, cellPadding: 4 },
            columnStyles: { 1: { halign: 'right', cellWidth: 80 }, 2: { halign: 'right', cellWidth: 100 } },
          });
          y = doc.lastAutoTable.finalY + 18;
        };

        // ---- 1. Ventas ----
        if (y > bottomLimit - 60) { doc.addPage(); y = 50; }
        doc.setFontSize(13); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
        doc.text('1. Ventas', marginX, y);
        doc.setFontSize(8.5); doc.setFont(undefined, 'normal'); doc.setTextColor(71, 85, 105);
        doc.text(`${metrics.nVentas} línea(s) · Ticket promedio ${formatCurrency(metrics.ticketPromedioVenta)}`, marginX, y + 14);
        y += 30;
        simpleTable('Top 10 Clientes', metrics.topClientes, [79, 70, 229]);
        simpleTableQty('Top 10 Productos', groupSumWithQty(ventas, v => v.producto).slice(0, 10), [14, 165, 233]);
        simpleTable('Ventas por Sucursal', metrics.ventasPorSucursal, [16, 185, 129]);
        simpleTable('Ventas por Fuente', metrics.ventasPorFuente, [99, 102, 241]);
        if (metrics.topClientes.length) {
          if (y > bottomLimit - 160) { doc.addPage(); y = 50; }
          y = drawBarChartPdf(doc, metrics.topClientes.slice(0, 5).map(c => [c.name, c.value]), marginX, y, tableW, '#4f46e5', 'Top 5 Clientes (gráfico)');
          y += 16;
        }

        // ---- 2. Compras ----
        if (y > bottomLimit - 60) { doc.addPage(); y = 50; }
        doc.setFontSize(13); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
        doc.text('2. Compras', marginX, y);
        doc.setFontSize(8.5); doc.setFont(undefined, 'normal'); doc.setTextColor(71, 85, 105);
        doc.text(`${metrics.nCompras} línea(s) · Ticket promedio ${formatCurrency(metrics.ticketPromedioCompra)}`, marginX, y + 14);
        y += 30;
        simpleTable('Top 10 Proveedores', metrics.topProveedores, [244, 63, 94]);
        simpleTableQty('Top Productos Comprados', groupSumWithQty(compras, c => c.producto).slice(0, 10), [139, 92, 246]);
        simpleTable('Compras por Método de Pago', metrics.comprasPorMetodoPago, [245, 158, 11]);

        // ---- 3. Gastos ----
        if (y > bottomLimit - 60) { doc.addPage(); y = 50; }
        doc.setFontSize(13); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
        doc.text('3. Gastos', marginX, y);
        y += 22;
        simpleTable('Gastos por Categoría (todas)', metrics.gastosPorCategoria, [245, 158, 11]);
        simpleTable('Gastos por Origen', metrics.gastosPorOrigen, [100, 116, 139]);
        if (metrics.gastosPorCategoria.length) {
          if (y > bottomLimit - 160) { doc.addPage(); y = 50; }
          y = drawBarChartPdf(doc, metrics.gastosPorCategoria.slice(0, 5).map(c => [c.name, c.value]), marginX, y, tableW, '#f59e0b', 'Top 5 Categorías de Gasto (gráfico)');
          y += 16;
        }

        // ---- 4. Nómina ----
        const totalHorasExtrasN = nomina.reduce((s, n) => s + (Number(n.horasExtras) || 0) + (Number(n.horaExtraDominicalHoras) || 0), 0);
        const totalValorHorasExtrasN = nomina.reduce((s, n) => s + (Number(n.valorHorasExtras) || 0) + (Number(n.valorHoraExtraDominical) || 0), 0);
        const totalRecargosValorN = nomina.reduce((s, n) => s + (Number(n.valorRecargoNocturno) || 0) + (Number(n.valorRecargoDominical) || 0), 0);
        const totalDeduccionesN = nomina.reduce((s, n) => s + (Number(n.deducciones) || 0), 0);
        const totalQ1 = nomina.filter(n => quincenaLabel(n.periodoQuincena) === 'Quincena 1').reduce((s, n) => s + (Number(n.totalPagado) || 0), 0);
        const totalQ2 = nomina.filter(n => quincenaLabel(n.periodoQuincena) === 'Quincena 2').reduce((s, n) => s + (Number(n.totalPagado) || 0), 0);
        const topEmpleados = groupSum(nomina.map(n => ({ ...n, valor: n.totalPagado })), n => n.empleado).slice(0, 10);

        if (y > bottomLimit - 60) { doc.addPage(); y = 50; }
        doc.setFontSize(13); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
        doc.text('4. Nómina', marginX, y);
        y += 22;
        const nominaKpis = [
          ['Total Nómina', formatCurrency(metrics.totalNomina)], ['Quincena 1', formatCurrency(totalQ1)],
          ['Quincena 2', formatCurrency(totalQ2)], ['Horas Extras', `${totalHorasExtrasN.toLocaleString('es-CO', { maximumFractionDigits: 1 })} h (${formatCurrency(totalValorHorasExtrasN)})`],
          ['Recargos (Noct.+Dom.)', formatCurrency(totalRecargosValorN)], ['Deducciones', formatCurrency(totalDeduccionesN)],
        ];
        if (y > bottomLimit - (Math.ceil(nominaKpis.length / 2) * (kpiH + kpiGap))) { doc.addPage(); y = 50; }
        const nKpiW = (tableW - kpiGap) / 2;
        nominaKpis.forEach(([label, value], i) => {
          const col = i % 2; const row = Math.floor(i / 2);
          const kx = marginX + col * (nKpiW + kpiGap);
          const ky = y + row * (kpiH + kpiGap);
          doc.setFillColor(15, 23, 42);
          doc.roundedRect(kx, ky, nKpiW, kpiH, 6, 6, 'F');
          doc.setFontSize(7); doc.setFont(undefined, 'normal'); doc.setTextColor(148, 163, 184);
          doc.text(label.toUpperCase(), kx + 10, ky + 17);
          doc.setFontSize(11.5); doc.setFont(undefined, 'bold'); doc.setTextColor(255, 255, 255);
          doc.text(value, kx + 10, ky + 37);
        });
        y += Math.ceil(nominaKpis.length / 2) * (kpiH + kpiGap) + 10;
        doc.setFont(undefined, 'normal'); doc.setTextColor(0, 0, 0);
        simpleTable('Top 10 Empleados por Total Pagado', topEmpleados, [79, 70, 229]);

        // ---- Pie de página en cada hoja ----
        const pageCount = doc.internal.getNumberOfPages();
        for (let p = 1; p <= pageCount; p++) {
          doc.setPage(p);
          doc.setFontSize(7.5); doc.setFont(undefined, 'normal'); doc.setTextColor(148, 163, 184);
          doc.text(`Ecocosecha SAS · Cierre Operativo · Periodo ${activePeriod.month}`, marginX, pageH - 24);
          doc.text(`Página ${p} de ${pageCount}`, pageW - marginX - 70, pageH - 24);
        }

        doc.save(`CierreOperativo_InformeEjecutivo_${activePeriod.month}.pdf`);
        triggerToast('Informe ejecutivo descargado ✓');
      } catch (err) {
        console.error(err);
        triggerToast(err.message || 'Error al generar el informe', 'error');
      } finally {
        setIsGenerating(false);
      }
    };

    const generateInformeExcel = async () => {
      if (!activePeriod) { triggerToast('Selecciona un periodo primero', 'error'); return; }
      setIsGeneratingExcel(true);
      try {
        const XLSX = await ensureXLSX();
        const wb = XLSX.utils.book_new();

        const wsResumen = XLSX.utils.aoa_to_sheet([
          ['ECOCOSECHA SAS · INFORME DE CIERRE', ''],
          ['Periodo', activePeriod.month],
          ['Rango', `${activePeriod.startDate} al ${activePeriod.endDate}`],
          [],
          ['Ventas', metrics.totalVentas],
          ['Compras', metrics.totalCompras],
          ['Gastos', metrics.totalGastos],
          ['Nómina', metrics.totalNomina],
          ['Utilidad Bruta', metrics.utilidadBruta],
          ['Margen Bruto %', metrics.margenBruto],
          ['Utilidad Neta', metrics.utilidadNeta],
          ['Margen Neto %', metrics.margenNeto],
        ]);
        XLSX.utils.book_append_sheet(wb, wsResumen, 'Resumen');

        const ventasPorProducto = groupSumWithQty(ventas, v => v.producto).map(r => ({
          Producto: r.name, 'Cantidad Total': r.cantidad, 'Precio Promedio': r.cantidad ? r.value / r.cantidad : 0, 'Valor Total': r.value,
        }));
        XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(ventasPorProducto), 'Ventas por Producto');

        const comprasPorProducto = groupSumWithQty(compras, c => c.producto).map(r => ({
          Producto: r.name, 'Cantidad Total': r.cantidad, 'Precio Promedio': r.cantidad ? r.value / r.cantidad : 0, 'Valor Total': r.value,
        }));
        XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(comprasPorProducto), 'Compras por Producto');

        const ventasDetalle = ventas.map(v => ({
          Fecha: v.fecha, Cliente: v.cliente, Sucursal: v.sucursal, Producto: v.producto,
          Cantidad: v.cantidad, 'Precio Unitario': v.precioUnitario, Valor: v.valor, Fuente: v.fuente,
        }));
        XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(ventasDetalle), 'Ventas Detalle');

        const comprasDetalle = compras.map(c => ({
          Fecha: c.fecha, Proveedor: c.proveedor, Producto: c.producto, Presentacion: c.presentacion,
          Cantidad: c.cantidad, 'Precio Unitario': c.precioUnitario, Valor: c.valor, 'Metodo Pago': c.metodoPago, Compradora: c.compradora,
        }));
        XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(comprasDetalle), 'Compras Detalle');

        const gastosCat = metrics.gastosPorCategoria.map(r => ({ Categoria: r.name, Valor: r.value }));
        XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(gastosCat), 'Gastos por Categoria');

        const nominaSheet = nomina.map(n => ({
          Empleado: n.empleado, Quincena: n.periodoQuincena, 'Salario Base': n.salarioBase,
          'Horas Extras': n.horasExtras, 'Valor H. Extras': n.valorHorasExtras, Deducciones: n.deducciones, 'Total Pagado': n.totalPagado,
        }));
        XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(nominaSheet), 'Nomina');

        XLSX.writeFile(wb, `CierreOperativo_Informe_${activePeriod.month}.xlsx`);
        triggerToast('Informe en Excel descargado ✓');
      } catch (err) {
        console.error(err);
        triggerToast(err.message || 'Error al generar el Excel', 'error');
      } finally {
        setIsGeneratingExcel(false);
      }
    };

    return (
      <div className="space-y-6">
        <div className="border-b border-slate-200 pb-4">
          <h1 className="text-2xl font-bold text-slate-800">Reportes</h1>
          {activePeriod ? (
            <p className="text-slate-500 text-sm">Periodo: <span className="font-semibold text-slate-700">{activePeriod.month}</span> ({activePeriod.startDate} al {activePeriod.endDate})</p>
          ) : (
            <p className="text-slate-500 text-sm">No hay ningún periodo activo — ve a <strong>Periodos / Cierre</strong> para elegir uno.</p>
          )}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div className="flex items-start gap-4">
              <div className="bg-indigo-100 text-indigo-600 rounded-xl p-3"><FileText className="h-7 w-7" /></div>
              <div className="flex-1">
                <h3 className="font-bold text-slate-800">Informe Ejecutivo de Cierre</h3>
                <p className="text-sm text-slate-500 mt-1">PDF listo para imprimir en hojas Carta con el resumen completo del periodo: KPIs y utilidades, ventas (clientes, productos, sucursales, fuente), compras (proveedores, productos, método de pago), gastos (por categoría y por origen) y nómina (horas extras, recargos, quincenas, top empleados).</p>
                <button onClick={generateInformeEjecutivo} disabled={isGenerating || !activePeriod} className="mt-4 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white px-5 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
                  <Download className="h-4 w-4 mr-2" /> {isGenerating ? 'Generando...' : 'Descargar Informe Ejecutivo (PDF)'}
                </button>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div className="flex items-start gap-4">
              <div className="bg-emerald-100 text-emerald-600 rounded-xl p-3"><Download className="h-7 w-7" /></div>
              <div className="flex-1">
                <h3 className="font-bold text-slate-800">Informe en Excel</h3>
                <p className="text-sm text-slate-500 mt-1">Libro con varias hojas para analizar a fondo: Resumen, Ventas por Producto, Compras por Producto, Ventas Detalle, Compras Detalle, Gastos por Categoría y Nómina.</p>
                <button onClick={generateInformeExcel} disabled={isGeneratingExcel || !activePeriod} className="mt-4 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-60 text-white px-5 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
                  <Download className="h-4 w-4 mr-2" /> {isGeneratingExcel ? 'Generando...' : 'Descargar Informe en Excel'}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  // ==========================================================================
  // Periodos / Cierre
  // ==========================================================================
  const PeriodosView = () => {
    const [showModal, setShowModal] = useState(false);
    const [editingPeriodId, setEditingPeriodId] = useState(null);
    const blankForm = { month: '', startDate: '', endDate: '', isClosed: false };
    const [periodData, setPeriodData] = useState(blankForm);

    const openNewPeriodModal = () => {
      const now = new Date();
      const yyyy = now.getFullYear(); const mm = String(now.getMonth() + 1).padStart(2, '0');
      const firstDay = `${yyyy}-${mm}-01`;
      const lastDayDate = new Date(yyyy, now.getMonth() + 1, 0);
      const lastDay = `${yyyy}-${mm}-${String(lastDayDate.getDate()).padStart(2, '0')}`;
      setPeriodData({ month: `${yyyy}-${mm}`, startDate: firstDay, endDate: lastDay, isClosed: false });
      setEditingPeriodId(null); setShowModal(true);
    };

    const handleSavePeriod = async (e) => {
      e.preventDefault();
      try {
        if (editingPeriodId) {
          const [row] = await window.SB.crudUpdate('op_periodos', editingPeriodId, periodToDb(periodData));
          setPeriods(prev => prev.map(p => p.id === editingPeriodId ? periodFromDb(row) : p));
          triggerToast('Periodo actualizado');
        } else {
          const [row] = await window.SB.crudInsert('op_periodos', [periodToDb(periodData)]);
          const mapped = periodFromDb(row);
          setPeriods(prev => [...prev, mapped]);
          setActivePeriodId(mapped.id);
          triggerToast('Nuevo periodo aperturado');
        }
        setShowModal(false); setEditingPeriodId(null);
      } catch (err) { triggerToast(err.message || 'Error al guardar el periodo', 'error'); }
    };

    const toggleClosed = async (p) => {
      try {
        const closed = !p.isClosed;
        await window.SB.crudUpdate('op_periodos', p.id, { is_closed: closed });
        setPeriods(prev => prev.map(x => x.id === p.id ? { ...x, isClosed: closed } : x));
        triggerToast(closed ? 'Periodo cerrado' : 'Periodo reabierto');
      } catch (err) { triggerToast(err.message || 'Error al cambiar el estado', 'error'); }
    };

    return (
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div>
            <h1 className="text-2xl font-bold text-slate-800">Periodos y Cierre</h1>
            <p className="text-slate-500 text-sm">Administra los meses de cierre de la operación</p>
          </div>
          <button onClick={openNewPeriodModal} className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm">
            <Plus className="h-4 w-4 mr-2" /> Nuevo Periodo
          </button>
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
          <table className="w-full text-sm text-left">
            <thead className="bg-slate-100 text-slate-600 text-xs uppercase font-bold">
              <tr><th className="px-4 py-3">Mes</th><th className="px-4 py-3">Fechas</th><th className="px-4 py-3">Estado</th><th className="px-4 py-3 text-center">Acciones</th></tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {periods.slice().reverse().map(p => (
                <tr key={p.id} className={p.id === activePeriodId ? 'bg-indigo-50/30' : 'hover:bg-slate-50'}>
                  <td className="px-4 py-3 font-bold text-slate-800">{p.month}{p.id === activePeriodId && <span className="ml-2 text-[10px] bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded-full">Activo</span>}</td>
                  <td className="px-4 py-3 text-xs text-slate-600">{p.startDate} al {p.endDate}</td>
                  <td className="px-4 py-3">
                    <button onClick={() => toggleClosed(p)} className={`px-2 py-1 rounded text-xs font-bold ${p.isClosed ? 'bg-amber-100 text-amber-800' : 'bg-sky-100 text-sky-800'}`}>
                      {p.isClosed ? '🔒 Cerrado' : '🔓 Abierto'}
                    </button>
                  </td>
                  <td className="px-4 py-3 text-center whitespace-nowrap space-x-1">
                    {p.id !== activePeriodId && <button onClick={() => setActivePeriodId(p.id)} className="p-1.5 text-slate-400 hover:text-indigo-600" title="Activar"><LayoutDashboard className="h-4 w-4" /></button>}
                    <button onClick={() => { setEditingPeriodId(p.id); setPeriodData(p); setShowModal(true); }} className="p-1.5 text-slate-400 hover:text-indigo-600"><Edit2 className="h-4 w-4" /></button>
                    <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'periodo', id: p.id, title: `Periodo ${p.month}` })} className="p-1.5 text-slate-400 hover:text-rose-600"><Trash2 className="h-4 w-4" /></button>
                  </td>
                </tr>
              ))}
              {periods.length === 0 && <tr><td colSpan="4" className="px-6 py-10 text-center text-slate-400 text-sm">Aún no hay periodos. Usa "Nuevo Periodo" para aperturar el primero.</td></tr>}
            </tbody>
          </table>
        </div>

        {showModal && (
          <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-md w-full overflow-hidden">
              <div className="bg-slate-900 text-white p-4 flex justify-between items-center">
                <h3 className="font-bold">{editingPeriodId ? 'Editar Periodo' : 'Aperturar Nuevo Periodo'}</h3>
                <button onClick={() => setShowModal(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <form onSubmit={handleSavePeriod} className="p-6 space-y-4">
                <div><label className="block text-xs font-semibold text-slate-700 mb-1">Mes (AAAA-MM) *</label>
                  <input type="text" placeholder="Ej: 2026-07" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={periodData.month} onChange={e => setPeriodData({ ...periodData, month: e.target.value })} /></div>
                <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Fecha Inicio *</label>
                    <input type="date" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={periodData.startDate} onChange={e => setPeriodData({ ...periodData, startDate: e.target.value })} /></div>
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Fecha Cierre *</label>
                    <input type="date" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={periodData.endDate} onChange={e => setPeriodData({ ...periodData, endDate: e.target.value })} /></div>
                </div>
                <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                  <button type="button" onClick={() => setShowModal(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button type="submit" className="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700">{editingPeriodId ? 'Guardar Cambios' : 'Aperturar Periodo'}</button>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    );
  };

  // ==========================================================================
  // Render principal
  // ==========================================================================
  if (loading) {
    return (
      <div className="flex h-screen items-center justify-center bg-slate-100">
        <div className="text-center space-y-3">
          <div className="h-10 w-10 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin mx-auto"></div>
          <p className="text-slate-500 text-sm">Cargando Cierre Operativo…</p>
        </div>
      </div>
    );
  }
  if (loadError) {
    return (
      <div className="flex h-screen items-center justify-center bg-slate-100 p-6">
        <div className="text-center space-y-3 max-w-sm">
          <AlertTriangle className="h-10 w-10 text-rose-500 mx-auto" />
          <p className="text-slate-700 font-bold text-sm">No se pudieron cargar los datos</p>
          <p className="text-slate-500 text-xs">{loadError}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-slate-100 font-sans overflow-hidden">
      <Navigation />
      <div className="flex-1 flex flex-col h-screen overflow-hidden">
        <header className="bg-white border-b border-slate-200 p-4 flex justify-between items-center z-10 shadow-xs">
          <div className="flex items-center space-x-3">
            <button onClick={() => setIsMobileMenuOpen(true)} className="md:hidden text-slate-600 hover:text-slate-900">
              <Menu className="h-6 w-6" />
            </button>
            <div className="flex items-center space-x-2 text-xs font-semibold text-slate-600 bg-slate-100 px-3 py-1.5 rounded-lg border border-slate-200">
              <Calendar className="h-4 w-4 text-indigo-600" />
              <span>Periodo Activo: <strong className="text-slate-900 font-bold">{activePeriod?.month || 'Ninguno'}</strong></span>
              {loadingPeriodData && <span className="text-slate-400">· cargando...</span>}
            </div>
          </div>

          <div className="relative">
            <div onClick={() => setShowUserMenu(v => !v)} className="flex items-center space-x-3 cursor-pointer hover:bg-slate-100 p-1.5 pr-3 rounded-lg transition-colors border border-transparent hover:border-slate-200" title="Cuenta">
              <div className="text-right hidden sm:block">
                <p className="text-xs font-bold text-slate-800">{userProfile.name || 'Sin nombre'}</p>
                <p className="text-[10px] text-slate-500">{userProfile.role}</p>
              </div>
              <div className="h-9 w-9 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold text-sm shadow-sm transition-transform hover:scale-105">
                {(userProfile.name || '?').charAt(0).toUpperCase()}
              </div>
            </div>
            {showUserMenu && (
              <>
                <div className="fixed inset-0 z-40" onClick={() => setShowUserMenu(false)}></div>
                <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-xl border border-slate-200 py-1.5 z-50">
                  <div className="px-3.5 py-2 border-b border-slate-100">
                    <p className="text-xs font-bold text-slate-800 truncate">{userProfile.name || 'Sin nombre'}</p>
                    <p className="text-[11px] text-slate-500">{userProfile.role}</p>
                  </div>
                  <button onClick={() => { setShowUserMenu(false); setShowProfileModal(true); }} className="w-full text-left px-3.5 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 flex items-center gap-2">
                    <Users className="h-3.5 w-3.5" /> Editar perfil
                  </button>
                  <button onClick={async () => { setShowUserMenu(false); await window.SB.signOut(); }} className="w-full text-left px-3.5 py-2 text-xs font-semibold text-rose-600 hover:bg-rose-50 flex items-center gap-2">
                    <LogOut className="h-3.5 w-3.5" /> Cerrar sesión
                  </button>
                </div>
              </>
            )}
          </div>
        </header>

        <main className="flex-1 overflow-x-hidden overflow-y-auto p-4 md:p-8 bg-slate-50">
          <div className="max-w-7xl mx-auto">
            {activeTab === 'dashboard' && <DashboardView />}
            {activeTab === 'ventas' && <VentasView />}
            {activeTab === 'compras' && <ComprasView />}
            {activeTab === 'gastos' && <GastosView />}
            {activeTab === 'analisis' && <AnalisisView />}
            {activeTab === 'nomina' && <NominaView />}
            {activeTab === 'reportes' && <ReportesView />}
            {activeTab === 'periodos' && <PeriodosView />}
          </div>
        </main>
      </div>

      {showProfileModal && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 max-w-sm w-full overflow-hidden">
            <div className="bg-slate-900 text-white p-4 flex justify-between items-center">
              <h3 className="font-bold flex items-center"><Users className="h-4 w-4 mr-2" /> Editar Perfil</h3>
              <button onClick={() => setShowProfileModal(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
            </div>
            <form onSubmit={handleSaveProfile} className="p-6 space-y-4">
              <div><label className="block text-xs font-semibold text-slate-700 mb-1">Nombre Completo *</label>
                <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm bg-slate-50 focus:bg-white focus:ring-2 ring-indigo-500/20 outline-none" value={userProfile.name} onChange={e => setUserProfile({ ...userProfile, name: e.target.value })} /></div>
              <div><label className="block text-xs font-semibold text-slate-700 mb-1">Cargo / Rol *</label>
                <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm bg-slate-50 focus:bg-white focus:ring-2 ring-indigo-500/20 outline-none" value={userProfile.role} onChange={e => setUserProfile({ ...userProfile, role: e.target.value })} /></div>
              <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                <button type="button" onClick={() => setShowProfileModal(false)} className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold rounded-lg">Cancelar</button>
                <button type="submit" className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-lg shadow-sm">Guardar Perfil</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {toast.show && (
        <div className={`fixed bottom-5 right-5 z-50 px-4 py-3 rounded-xl shadow-lg border flex items-center space-x-2 text-sm font-semibold ${toast.type === 'error' ? 'bg-rose-900 text-white border-rose-700' : toast.type === 'info' ? 'bg-slate-900 text-white border-slate-800' : 'bg-indigo-900 text-white border-indigo-700'}`}>
          <Check className="h-4 w-4 text-emerald-400" />
          <span>{toast.message}</span>
        </div>
      )}

      {deleteConfirm.isOpen && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-xs z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 max-w-sm w-full p-6 text-center space-y-4">
            <div className="w-12 h-12 bg-rose-100 text-rose-600 rounded-full flex items-center justify-center mx-auto">
              <AlertTriangle className="h-6 w-6" />
            </div>
            <div>
              <h3 className="text-base font-bold text-slate-800">¿Confirmar Eliminación?</h3>
              <p className="text-xs text-slate-500 mt-1 font-medium">{deleteConfirm.title}</p>
            </div>
            <div className="flex justify-center space-x-3 pt-2">
              <button onClick={() => setDeleteConfirm({ isOpen: false, type: null, id: null, title: '' })} className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold rounded-lg">Cancelar</button>
              <button onClick={executeDelete} className="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold rounded-lg shadow-sm">Sí, Eliminar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<CierreOperativoApp />);