import React, { useState, useMemo, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import {
  LayoutDashboard, Receipt, TrendingUp, Users, Tags, FileBarChart,
  Settings, Menu, X, Plus, Edit2, Trash2, Download, Search,
  Calculator, FileText, Upload, Database, AlertTriangle,
  Check, ArrowDownLeft, Phone, Mail, MapPin, Calendar, LogOut, Hash, CheckSquare, ShieldCheck,
  PieChart as PieChartIcon
} from 'lucide-react';
import {
  PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer
} from 'recharts';

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

// ============================================================================
// Persistencia: Caja Menor guarda todo en Supabase (proyecto ecocosecha-finanzas,
// mismo que usa el módulo Finanzas — ver window.SB en supabase-client.js), en
// vez de estado solo-en-memoria. Las tablas son compartidas entre TODOS los
// usuarios autenticados (no aisladas por user_id), porque es un libro contable
// de la empresa, no datos personales de cada quién — ver migración
// "caja_menor_schema". Estos mapeadores traducen entre el shape camelCase que
// usa toda la UI (sin tocarla) y las columnas snake_case reales de Postgres.
// ============================================================================
const catFromDb = (r) => ({ id: r.id, name: r.name, color: r.color, description: r.description || '' });
const catToDb = (c) => ({ name: c.name, color: c.color || '#0088FE', description: c.description || null });

const provFromDb = (r) => ({ id: r.id, name: r.name, document: r.document || '', address: r.address || '', phone: r.phone || '', email: r.email || '', categoryId: r.category_id || '' });
const provToDb = (p) => ({ name: p.name, document: p.document || null, address: p.address || null, phone: p.phone || null, email: p.email || null, category_id: p.categoryId || null });

const periodFromDb = (r) => ({
  id: r.id, month: r.month, startDate: r.start_date, endDate: r.end_date,
  responsibleName: r.responsible_name, responsibleDocument: r.responsible_document,
  baseFund: Number(r.base_fund) || 0, initialBalance: Number(r.initial_balance) || 0,
  status: r.status || { elaboro: false, reviso: false, contabilizo: false, aprobo: false },
  isClosed: !!r.is_closed,
  initialIncomeId: r.initial_income_id || '',
  physicalCount: (r.physical_count !== null && r.physical_count !== undefined) ? Number(r.physical_count) : null,
  physicalCountDate: r.physical_count_date || ''
});
const periodToDb = (p) => ({
  month: p.month, start_date: p.startDate, end_date: p.endDate,
  responsible_name: p.responsibleName || '', responsible_document: p.responsibleDocument || '',
  base_fund: Number(p.baseFund) || 0, initial_balance: Number(p.initialBalance) || 0,
  status: p.status, is_closed: !!p.isClosed,
  initial_income_id: p.initialIncomeId || null,
  physical_count: (p.physicalCount !== undefined && p.physicalCount !== null && p.physicalCount !== '') ? Number(p.physicalCount) : null,
  physical_count_date: p.physicalCountDate || null
});

const txFromDb = (r) => ({
  id: r.id, periodId: r.period_id, type: r.type, date: r.date, invoiceNo: r.invoice_no || '',
  providerId: r.provider_id || '', categoryId: r.category_id || '', description: r.description || '',
  deliveredBy: r.delivered_by || '', subtotal: Number(r.subtotal) || 0, discount: Number(r.discount) || 0,
  iva: Number(r.iva) || 0, isTaxable: !!r.is_taxable, reteFte: Number(r.rete_fte) || 0,
  reteIca: Number(r.rete_ica) || 0, amountPaid: Number(r.amount_paid) || 0, valeNo: r.vale_no || ''
});
const txToDb = (t) => ({
  period_id: t.periodId, type: t.type, date: t.date, invoice_no: t.invoiceNo || '',
  provider_id: t.providerId || null, category_id: t.categoryId || null, description: t.description || '',
  delivered_by: t.deliveredBy || null, subtotal: Number(t.subtotal) || 0, discount: Number(t.discount) || 0,
  iva: Number(t.iva) || 0, is_taxable: !!t.isTaxable, rete_fte: Number(t.reteFte) || 0,
  rete_ica: Number(t.reteIca) || 0, amount_paid: Number(t.amountPaid) || 0, vale_no: t.valeNo || null
});

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

// Carga perezosa de SheetJS (window.XLSX) — se comparte entre el reporte de Excel
// y la carga/plantilla masiva de terceros, para no repetir el <script> de carga.
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 ExcelJS (window.ExcelJS) — para el informe de Excel estilizado
// del periodo (colores, celdas fusionadas, bordes), algo que SheetJS/XLSX (arriba)
// no soporta en su versión gratuita. Misma librería/versión que ya usa Finanzas.
let exceljsLoadPromise = null;
function ensureExcelJS() {
  if (window.ExcelJS) return Promise.resolve(window.ExcelJS);
  if (!exceljsLoadPromise) {
    exceljsLoadPromise = new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js';
      script.onload = () => resolve(window.ExcelJS);
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  return exceljsLoadPromise;
}

// Carga perezosa de jsPDF + el plugin autoTable (debe cargar DESPUÉS de jsPDF,
// se engancha a su prototype) — para los informes PDF descargables.
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;
}

// Carga el logo (negro = texto negro, para fondos claros como estos PDF blancos;
// blanco = texto blanco, para fondos oscuros) y lo "aplana" sobre un fondo sólido
// usando un canvas — jsPDF no compone bien el canal alfa de los PNG con
// transparencia y termina pintando esas zonas de negro sólido si se le pasa el
// PNG transparente tal cual. Al dibujarlo primero sobre un canvas relleno con el
// color de fondo real del documento, el resultado que recibe jsPDF ya no tiene
// transparencia que pueda malinterpretar.
const logoDataUrlCache = {};
function cmLoadFlattenedLogo(src, bgColor) {
  const cacheKey = `${src}|${bgColor}`;
  if (!logoDataUrlCache[cacheKey]) {
    logoDataUrlCache[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 logoDataUrlCache[cacheKey];
}
// Dibuja el logo negro (texto negro) manteniendo su proporción real — para usar
// sobre el fondo blanco de estos PDF. Devuelve el ancho dibujado (0 si no se
// pudo cargar) para poder acomodar el texto al lado.
async function cmAddLogo(doc, x, y, maxHeight) {
  try {
    const dataUrl = await cmLoadFlattenedLogo('../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;
  }
}

// ---------------- Helpers de estilo para el Excel del periodo (ExcelJS) ----------------
// Mismo patrón que finanzas/app.js (xlTitle/xlHeaderRow/xlDataRows/fillCell/xlAutoWidth),
// con la paleta verde de Caja Menor en vez de la naranja de Finanzas.
const CM_XC = {
  dark: 'FF14532D', darkSoft: 'FF166534', accent: 'FF10B981', accentText: 'FF06281A',
  band: 'FFF0FDF4', white: 'FFFFFFFF', text: 'FF1E293B', textDim: 'FF64748B', border: 'FFD1D5DB',
};
const CM_MONEY_FMT = '"$"#,##0;[Red]-"$"#,##0';
function cmFillCell(cell, argb) { cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb } }; }
function cmXlTitle(ws, range, text, opts = {}) {
  ws.mergeCells(range);
  const cell = ws.getCell(range.split(':')[0]);
  cell.value = text;
  cell.font = { bold: true, size: opts.size || 13, color: { argb: opts.color || CM_XC.white } };
  cmFillCell(cell, opts.bg || CM_XC.dark);
  cell.alignment = { vertical: 'middle', horizontal: opts.align || 'left', indent: 1 };
  ws.getRow(Number(range.match(/\d+/)[0])).height = opts.height || 24;
  return cell;
}
function cmXlHeaderRow(ws, rowIdx, labels, opts = {}) {
  const row = ws.getRow(rowIdx);
  labels.forEach((label, i) => {
    const cell = row.getCell(i + 1);
    cell.value = label;
    cell.font = { bold: true, size: 10, color: { argb: CM_XC.white } };
    cmFillCell(cell, opts.bg || CM_XC.darkSoft);
    cell.alignment = { vertical: 'middle', horizontal: opts.right && opts.right.includes(i) ? 'right' : 'left', indent: 1, wrapText: true };
    cell.border = { bottom: { style: 'thin', color: { argb: CM_XC.border } } };
  });
  row.height = 28;
  row.commit();
}
function cmXlDataRows(ws, startRow, rows, opts = {}) {
  rows.forEach((r, ri) => {
    const row = ws.getRow(startRow + ri);
    r.forEach((val, ci) => {
      const cell = row.getCell(ci + 1);
      cell.value = val;
      if (opts.money && opts.money.includes(ci)) cell.numFmt = CM_MONEY_FMT;
      cell.alignment = { horizontal: opts.right && opts.right.includes(ci) ? 'right' : 'left', vertical: 'middle', wrapText: true };
      if (ri % 2 === 1) cmFillCell(cell, opts.band || CM_XC.band);
      cell.border = { bottom: { style: 'hair', color: { argb: CM_XC.border } } };
      if (opts.bold) cell.font = { bold: true };
    });
    row.commit();
  });
}
function cmXlAutoWidth(ws, widths) { widths.forEach((w, i) => { ws.getColumn(i + 1).width = w; }); }
async function cmDownloadWorkbook(wb, filename) {
  const buf = await wb.xlsx.writeBuffer();
  const blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
}

const calculateTransactionTotals = (t) => {
  const subtotal = parseFloat(t.subtotal) || 0;
  const discount = parseFloat(t.discount) || 0;
  const iva = parseFloat(t.iva) || 0;
  const totalInvoice = subtotal - discount + iva;

  let reteFte = 0;
  let reteIca = 0;

  if (t.isTaxable) {
    reteFte = parseFloat(t.reteFte) || 0;
    reteIca = parseFloat(t.reteIca) || 0;
  }

  const netPaid = t.amountPaid !== undefined && t.amountPaid !== '' ? parseFloat(t.amountPaid) : (totalInvoice - reteFte - reteIca);
  return { totalInvoice, netPaid, reteFte, reteIca };
};

// Separa un No. de comprobante ya guardado (ej. "ECO-CJ-1023") en {prefix, number}
// usando la lista de prefijos conocidos (coincidencia más larga primero) — así el
// formulario de edición puede mostrar el prefijo y el número por separado aunque en
// la base de datos siga guardándose como un solo texto (invoice_no).
function splitInvoiceNo(invoiceNo, knownPrefixes) {
  const value = invoiceNo || '';
  const sorted = [...knownPrefixes].filter(Boolean).sort((a, b) => b.length - a.length);
  for (const p of sorted) {
    if (value.startsWith(p)) return { prefix: p, number: value.slice(p.length) };
  }
  return { prefix: '', number: value };
}

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

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

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

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

  const [categories, setCategories] = useState([]);
  const [providers, setProviders] = useState([]);
  const [periods, setPeriods] = useState([]);
  const [transactions, setTransactions] = useState([]);
  const [activePeriodId, setActivePeriodId] = useState('');
  const [prefixes, setPrefixes] = useState([]);
  const [showPrefixModal, setShowPrefixModal] = useState(false);
  const [newPrefixText, setNewPrefixText] = useState('');

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

  const handleAddPrefix = async (e) => {
    e.preventDefault();
    const prefix = newPrefixText.trim();
    if (!prefix) return;
    try {
      const [row] = await window.SB.crudInsert('cm_prefijos', [{ prefix }]);
      setPrefixes(prev => [...prev, { id: row.id, prefix: row.prefix }].sort((a, b) => a.prefix.localeCompare(b.prefix)));
      setNewPrefixText('');
      setShowPrefixModal(false);
      triggerToast('Prefijo agregado');
    } catch (err) {
      triggerToast(err.message || 'Error al agregar el prefijo (¿ya existe?)', 'error');
    }
  };

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

  // Carga inicial desde Supabase, una vez hay sesión activa (el gate de
  // auth-gate.js oculta #app hasta entonces, pero esto puede correr igual
  // por debajo sin problema).
  const loadedOnceRef = useRef(false);
  useEffect(() => {
    let cancelled = false;

    async function loadAll() {
      try {
        const [cats, provs, pers, txs, prefs] = await Promise.all([
          window.SB.crudSelect('cm_categorias', { order: { col: 'created_at', asc: true } }),
          window.SB.crudSelect('cm_terceros', { order: { col: 'created_at', asc: true } }),
          window.SB.crudSelect('cm_periodos', { order: { col: 'start_date', asc: true } }),
          window.SB.crudSelect('cm_transacciones', { order: { col: 'date', asc: true } }),
          window.SB.crudSelect('cm_prefijos', { order: { col: 'prefix', asc: true } }),
        ]);
        if (cancelled) return;
        setPrefixes(prefs.map(p => ({ id: p.id, prefix: p.prefix })));
        const mappedPeriods = pers.map(periodFromDb);
        setCategories(cats.map(catFromDb));
        setProviders(provs.map(provFromDb));
        setPeriods(mappedPeriods);
        setTransactions(txs.map(txFromDb));
        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 los datos de Caja Menor');
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    function maybeLoad(session) {
      if (!session || loadedOnceRef.current) return;
      loadedOnceRef.current = true;
      setLoading(true);
      loadAll();
      if (!userProfile.name && 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
  }, []);

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

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

  const periodTransactions = useMemo(() => {
    return transactions
      .filter(t => t.periodId === activePeriodId)
      .sort((a, b) => new Date(a.date) - new Date(b.date));
  }, [transactions, activePeriodId]);

  const metrics = useMemo(() => {
    let totalExpenses = 0;
    let totalIncomes = 0;

    periodTransactions.forEach(t => {
      const { netPaid } = calculateTransactionTotals(t);
      if (t.type === 'expense') totalExpenses += netPaid;
      if (t.type === 'income') totalIncomes += netPaid;
    });

    const expectedBalance = (activePeriod?.initialBalance || 0) + totalIncomes - totalExpenses;

    const expensesByCategory = {};
    periodTransactions.filter(t => t.type === 'expense').forEach(t => {
      const { netPaid } = calculateTransactionTotals(t);
      const cat = categories.find(c => c.id === t.categoryId);
      const catName = cat ? cat.name : 'Sin Categoría';

      if (!expensesByCategory[catName]) {
        expensesByCategory[catName] = { name: catName, value: 0, color: cat?.color || '#94A3B8' };
      }
      expensesByCategory[catName].value += netPaid;
    });

    const pieChartData = Object.values(expensesByCategory);
    let topCategory = { name: 'N/A', value: 0 };
    if (pieChartData.length > 0) {
      topCategory = pieChartData.reduce((prev, current) => (prev.value > current.value) ? prev : current);
    }

    return { totalExpenses, totalIncomes, expectedBalance, pieChartData, topCategory };
  }, [periodTransactions, activePeriod, categories]);

  const executeDelete = async () => {
    const { type, id } = deleteConfirm;
    if (!type || !id) return;

    try {
      if (type === 'expense' || type === 'income') {
        await window.SB.crudDelete('cm_transacciones', id);
        setTransactions(prev => prev.filter(t => t.id !== id));
        triggerToast('Movimiento eliminado correctamente', 'info');
      } else if (type === 'provider') {
        await window.SB.crudDelete('cm_terceros', id);
        setProviders(prev => prev.filter(p => p.id !== id));
        triggerToast('Tercero eliminado', 'info');
      } else if (type === 'category') {
        await window.SB.crudDelete('cm_categorias', id);
        setCategories(prev => prev.filter(c => c.id !== id));
        triggerToast('Categoría eliminada', 'info');
      } else if (type === 'period') {
        if (periods.length <= 1) {
          triggerToast('No se puede eliminar el único periodo existente', 'error');
        } else {
          await window.SB.crudDelete('cm_periodos', id);
          setPeriods(prev => prev.filter(p => p.id !== id));
          setTransactions(prev => prev.filter(t => t.periodId !== id));
          setActivePeriodId(periods.find(p => p.id !== id)?.id || '');
          triggerToast('Periodo eliminado', 'info');
        }
      }
    } catch (err) {
      triggerToast(err.message || 'Error al eliminar', 'error');
    }
    setDeleteConfirm({ isOpen: false, type: null, id: null, title: '' });
  };

  const Navigation = () => {
    const navItems = [
      { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
      { id: 'expenses', label: 'Gastos', icon: Receipt },
      { id: 'incomes', label: 'Ingresos', icon: TrendingUp },
      { id: 'providers', label: 'Terceros', icon: Users },
      { id: 'categories', label: 'Categorías', icon: Tags },
      { id: 'reports', label: 'Reportes', icon: FileBarChart },
      { id: 'audit', label: 'Auditoría de Cierre', icon: ShieldCheck },
      { id: 'settings', label: 'Cierre / Periodos', 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-xl font-bold text-white tracking-tight">Caja<span className="text-emerald-400">Menor</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-emerald-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-emerald-600/20 text-emerald-400 font-semibold shadow-inner border-l-4 border-emerald-400' : 'hover:bg-slate-800 hover:text-white font-medium'}`}
              >
                <item.icon className={`h-5 w-5 ${activeTab === item.id ? 'text-emerald-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 Caja:</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 ? 'Cerrada' : 'En Curso') : 'Sin periodo'}
            </span>
          </div>
          <p className="text-[10px] text-center text-slate-500 pt-2 border-t border-slate-900">Ecocosecha SAS · Caja Menor</p>
        </div>
      </nav>
    );
  };

  const DashboardView = () => (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-slate-200 pb-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Resumen de Caja Menor</h1>
          {activePeriod ? (
            <p className="text-slate-500 text-sm">Corte: <span className="font-semibold text-slate-700">{activePeriod.month}</span> ({activePeriod.startDate} al {activePeriod.endDate}) | Responsable: <span className="font-semibold text-slate-700">{activePeriod.responsibleName}</span></p>
          ) : (
            <p className="text-slate-500 text-sm">No hay ningún periodo creado todavía — ve a <strong>Cierre / Periodos</strong> para aperturar el primero.</p>
          )}
        </div>
        <div className="flex gap-2">
          <button onClick={() => setActiveTab('expenses')} className="bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 text-sm font-medium flex items-center shadow-sm">
            <Plus className="h-4 w-4 mr-1.5" /> Nuevo Gasto
          </button>
          <button onClick={() => setActiveTab('incomes')} className="bg-sky-600 text-white px-4 py-2 rounded-lg hover:bg-sky-700 text-sm font-medium flex items-center shadow-sm">
            <ArrowDownLeft className="h-4 w-4 mr-1.5" /> Registrar Reintegro
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <div>
            <span className="text-slate-500 text-xs font-semibold uppercase tracking-wider block mb-1">Saldo Inicial Periodo</span>
            <span className="text-2xl font-bold text-slate-800">{formatCurrency(activePeriod?.initialBalance)}</span>
          </div>
          <div className="mt-3 pt-3 border-t border-slate-100 flex justify-between items-center text-xs text-slate-500">
            <span>Fondo Base Asignado:</span>
            <span className="font-semibold text-slate-700">{formatCurrency(activePeriod?.baseFund)}</span>
          </div>
        </div>

        <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <div>
            <span className="text-slate-500 text-xs font-semibold uppercase tracking-wider block mb-1 flex items-center">
              <TrendingUp className="h-4 w-4 mr-1 text-emerald-500" /> Total Ingresos / Refuerzos
            </span>
            <span className="text-2xl font-bold text-emerald-600">+{formatCurrency(metrics.totalIncomes)}</span>
          </div>
          <div className="mt-3 pt-3 border-t border-slate-100 text-xs text-slate-500">
            <span>{periodTransactions.filter(t => t.type === 'income').length} abono(s) este mes</span>
          </div>
        </div>

        <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
          <div>
            <span className="text-slate-500 text-xs font-semibold uppercase tracking-wider block mb-1 flex items-center">
              <Receipt className="h-4 w-4 mr-1 text-rose-500" /> Total Gastado
            </span>
            <span className="text-2xl font-bold text-rose-600">-{formatCurrency(metrics.totalExpenses)}</span>
          </div>
          <div className="mt-3 pt-3 border-t border-slate-100 text-xs text-slate-500">
            <span>{periodTransactions.filter(t => t.type === 'expense').length} comprobante(s) de gasto</span>
          </div>
        </div>

        <div className="bg-slate-900 text-white p-5 rounded-xl shadow-md flex flex-col justify-between relative overflow-hidden">
          <div className="absolute top-0 right-0 -mr-4 -mt-4 bg-emerald-500/20 rounded-full w-24 h-24 blur-xl"></div>
          <div>
            <span className="text-slate-400 text-xs font-semibold uppercase tracking-wider block mb-1">Saldo Físico Esperado</span>
            <span className="text-3xl font-bold text-emerald-400">{formatCurrency(metrics.expectedBalance)}</span>
          </div>
          <div className="mt-3 pt-3 border-t border-slate-800 text-xs text-slate-300 flex items-center">
            <Check className="h-4 w-4 text-emerald-400 mr-1.5" />
            <span>Fondo Inicial + Ingresos - Gastos</span>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm lg:col-span-1 flex flex-col">
          <h3 className="text-base font-bold text-slate-800 mb-4 flex items-center">
            <PieChartIcon className="h-5 w-5 mr-2 text-emerald-600" /> Distribución por Categoría
          </h3>
          {metrics.pieChartData.length > 0 ? (
            <div className="h-64">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie data={metrics.pieChartData} cx="50%" cy="50%" innerRadius={55} outerRadius={80} paddingAngle={4} dataKey="value">
                    {metrics.pieChartData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color || COLOR_PALETTE[index % COLOR_PALETTE.length]} />
                    ))}
                  </Pie>
                  <RechartsTooltip formatter={(value) => formatCurrency(value)} />
                </PieChart>
              </ResponsiveContainer>
            </div>
          ) : (
            <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 gastos en este periodo</span>
            </div>
          )}

          {metrics.topCategory.value > 0 && (
            <div className="mt-auto p-3 bg-amber-50 rounded-lg border border-amber-200 flex items-center justify-between">
              <div>
                <p className="text-[10px] text-amber-700 font-bold uppercase tracking-wider">Mayor Rubro de Gasto</p>
                <p className="text-sm font-bold text-slate-800">{metrics.topCategory.name}</p>
              </div>
              <p className="text-sm font-bold text-amber-800">{formatCurrency(metrics.topCategory.value)}</p>
            </div>
          )}
        </div>

        <div className="bg-white rounded-xl border border-slate-200 shadow-sm lg:col-span-2 overflow-hidden flex flex-col">
          <div className="p-5 border-b border-slate-200 flex justify-between items-center bg-slate-50/50">
            <h3 className="text-base font-bold text-slate-800">Últimos Movimientos Registrados</h3>
            <span className="text-xs text-slate-500 font-medium">Periodo {activePeriod?.month || '—'}</span>
          </div>
          <div className="flex-1 overflow-x-auto">
            <table className="w-full text-sm text-left">
              <thead className="bg-slate-100/70 text-slate-600 text-xs uppercase tracking-wider font-semibold">
                <tr>
                  <th className="px-5 py-3">Fecha</th>
                  <th className="px-5 py-3">Tipo / Soporte</th>
                  <th className="px-5 py-3">Tercero / Origen</th>
                  <th className="px-5 py-3">Concepto</th>
                  <th className="px-5 py-3 text-right">Monto</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {periodTransactions.slice(-6).reverse().map(t => {
                  const provider = providers.find(p => p.id === t.providerId);
                  const isExpense = t.type === 'expense';
                  const { netPaid } = calculateTransactionTotals(t);
                  return (
                    <tr key={t.id} className="hover:bg-slate-50/80 transition-colors">
                      <td className="px-5 py-3.5 text-slate-600 whitespace-nowrap text-xs">{t.date}</td>
                      <td className="px-5 py-3.5 whitespace-nowrap">
                        <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold ${isExpense ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700'}`}>
                          {isExpense ? `Gasto: ${t.invoiceNo}` : `Ingreso: ${t.invoiceNo}`}
                        </span>
                      </td>
                      <td className="px-5 py-3.5 text-slate-700 font-medium text-xs truncate max-w-[150px]">
                        {isExpense ? (provider?.name || 'Soporte Varios') : (t.deliveredBy || 'Ingreso Fondo')}
                      </td>
                      <td className="px-5 py-3.5 text-slate-600 text-xs truncate max-w-[200px]" title={t.description}>
                        {t.description}
                      </td>
                      <td className={`px-5 py-3.5 text-right font-bold text-xs whitespace-nowrap ${isExpense ? 'text-slate-800' : 'text-emerald-600'}`}>
                        {isExpense ? '-' : '+'}{formatCurrency(netPaid)}
                      </td>
                    </tr>
                  );
                })}
                {periodTransactions.length === 0 && (
                  <tr>
                    <td colSpan="5" className="px-6 py-12 text-center text-slate-400 text-sm">
                      No hay datos registrados en este periodo. Usa los botones superiores para añadir movimientos.
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );

  // Combo de tercero/proveedor: además del desplegable, permite escribir para
  // filtrar rápido por nombre o NIT/Cédula, sin dejar de guardar el providerId.
  const ProviderCombobox = ({ value, onChange }) => {
    const [query, setQuery] = useState('');
    const [open, setOpen] = useState(false);
    const boxRef = useRef(null);

    const label = (p) => `${p.name} (${p.document})`;
    const selected = providers.find(p => p.id === value);

    useEffect(() => {
      setQuery(selected ? label(selected) : '');
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [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 = providers.filter(p => label(p).toLowerCase().includes(query.toLowerCase()));

    return (
      <div className="relative" ref={boxRef}>
        <input
          type="text"
          className="w-full p-2.5 border border-slate-300 rounded-lg text-sm bg-white"
          placeholder="Escribe para buscar por nombre o NIT/Cédula..."
          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-full max-h-56 overflow-y-auto bg-white border border-slate-200 rounded-lg shadow-lg">
            {filtered.map(p => (
              <div
                key={p.id}
                className="px-3 py-2 text-sm hover:bg-emerald-50 cursor-pointer"
                onMouseDown={(e) => { e.preventDefault(); onChange(p.id); setQuery(label(p)); setOpen(false); }}
              >
                {p.name} <span className="text-slate-400">({p.document})</span>
              </div>
            ))}
            {filtered.length === 0 && <div className="px-3 py-2 text-sm text-slate-400">Sin coincidencias</div>}
          </div>
        )}
      </div>
    );
  };

  const ExpensesView = () => {
    const [showForm, setShowForm] = useState(false);
    const [editingId, setEditingId] = useState(null);
    const [searchTerm, setSearchTerm] = useState('');
    const [filterCategory, setFilterCategory] = useState('');

    const blankForm = {
      date: new Date().toISOString().split('T')[0],
      invoicePrefix: prefixes[0]?.prefix || '', invoiceNumber: '', providerId: '', categoryId: '', description: '',
      subtotal: '', discount: '0', iva: '0', isTaxable: false, reteFte: '0', reteIca: '0', amountPaid: '', valeNo: ''
    };
    const [formData, setFormData] = useState(blankForm);
    const [bulkMode, setBulkMode] = useState(false);
    const [selectedIds, setSelectedIds] = useState(new Set());
    const [bulkValePrefix, setBulkValePrefix] = useState('');
    const [bulkValeNumber, setBulkValeNumber] = useState('');
    const [showValeModal, setShowValeModal] = useState(false);
    const [showBulkDateModal, setShowBulkDateModal] = useState(false);
    const [bulkDate, setBulkDate] = useState('');
    const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false);

    const toggleBulkMode = () => {
      setBulkMode(v => !v);
      setSelectedIds(new Set());
    };

    const openNew = () => {
      if (!activePeriodId) { triggerToast('Primero crea un periodo en Cierre / Periodos', 'error'); return; }
      setEditingId(null);
      setFormData(blankForm);
      setShowForm(true);
    };

    const handleSave = async (e) => {
      e.preventDefault();

      if (!formData.providerId) { triggerToast('Selecciona un proveedor de la lista', 'error'); return; }

      const sub = parseFloat(formData.subtotal) || 0;
      const disc = parseFloat(formData.discount) || 0;
      const tax = parseFloat(formData.iva) || 0;
      const rf = formData.isTaxable ? (parseFloat(formData.reteFte) || 0) : 0;
      const ri = formData.isTaxable ? (parseFloat(formData.reteIca) || 0) : 0;

      const computedNet = (sub - disc + tax) - rf - ri;
      const paid = formData.amountPaid !== '' ? parseFloat(formData.amountPaid) : computedNet;

      const payload = {
        ...formData, periodId: activePeriodId, type: 'expense', invoiceNo: formData.invoicePrefix + formData.invoiceNumber,
        subtotal: sub, discount: disc, iva: tax, reteFte: rf, reteIca: ri, amountPaid: paid
      };

      try {
        if (editingId) {
          const [row] = await window.SB.crudUpdate('cm_transacciones', editingId, txToDb(payload));
          setTransactions(prev => prev.map(t => t.id === editingId ? txFromDb(row) : t));
          triggerToast('Gasto actualizado');
        } else {
          const [row] = await window.SB.crudInsert('cm_transacciones', [txToDb(payload)]);
          setTransactions(prev => [...prev, txFromDb(row)]);
          triggerToast('Nuevo gasto registrado');
        }
        setShowForm(false);
        setEditingId(null);
      } catch (err) {
        triggerToast(err.message || 'Error al guardar el gasto', 'error');
      }
    };

    const editTransaction = (t) => {
      const { prefix, number } = splitInvoiceNo(t.invoiceNo, prefixes.map(p => p.prefix));
      setFormData({
        date: t.date, invoicePrefix: prefix, invoiceNumber: number, providerId: t.providerId || '', categoryId: t.categoryId || '',
        description: t.description || '', subtotal: t.subtotal || '', discount: t.discount ?? '0', iva: t.iva ?? '0',
        isTaxable: !!t.isTaxable, reteFte: t.reteFte ?? '0', reteIca: t.reteIca ?? '0',
        // amountPaid siempre en blanco al editar: el formulario de Gastos no
        // tiene un campo para fijarlo a mano, así que si se arrastra el valor
        // guardado (de una edición anterior) queda "pegado" ahí y el Neto
        // Pagado deja de recalcularse cuando cambias Subtotal/Descuento/IVA.
        amountPaid: '', valeNo: t.valeNo || ''
      });
      setEditingId(t.id);
      setShowForm(true);
    };

    const filteredExpenses = periodTransactions
      .filter(t => t.type === 'expense')
      .filter(t => {
        const q = searchTerm.toLowerCase();
        const matchesSearch = t.description.toLowerCase().includes(q) ||
          t.invoiceNo.toLowerCase().includes(q) ||
          (t.valeNo || '').toLowerCase().includes(q);
        const matchesCat = filterCategory ? t.categoryId === filterCategory : true;
        return matchesSearch && matchesCat;
      });

    const toggleSelect = (id) => {
      setSelectedIds(prev => {
        const next = new Set(prev);
        if (next.has(id)) next.delete(id); else next.add(id);
        return next;
      });
    };
    const toggleSelectAll = () => {
      setSelectedIds(prev => {
        const allSelected = filteredExpenses.length > 0 && filteredExpenses.every(t => prev.has(t.id));
        if (allSelected) return new Set();
        return new Set(filteredExpenses.map(t => t.id));
      });
    };
    const handleAssignVale = async () => {
      if (!bulkValeNumber.trim()) { triggerToast('Escribe el número de vale', 'error'); return; }
      const valeNo = bulkValePrefix + bulkValeNumber.trim();
      const ids = [...selectedIds];
      try {
        const results = await Promise.all(ids.map(id => window.SB.crudUpdate('cm_transacciones', id, { vale_no: valeNo })));
        const byId = {};
        results.forEach(rows => { if (rows[0]) byId[rows[0].id] = txFromDb(rows[0]); });
        setTransactions(prev => prev.map(t => byId[t.id] || t));
        triggerToast(`Nº de vale asignado a ${ids.length} gasto${ids.length === 1 ? '' : 's'}`);
        setSelectedIds(new Set());
        setBulkValePrefix(''); setBulkValeNumber('');
        setShowValeModal(false);
      } catch (err) {
        triggerToast(err.message || 'Error al asignar el número de vale', 'error');
      }
    };
    const handleClearVale = async () => {
      const ids = [...selectedIds];
      try {
        const results = await Promise.all(ids.map(id => window.SB.crudUpdate('cm_transacciones', id, { vale_no: null })));
        const byId = {};
        results.forEach(rows => { if (rows[0]) byId[rows[0].id] = txFromDb(rows[0]); });
        setTransactions(prev => prev.map(t => byId[t.id] || t));
        triggerToast(`Nº de vale quitado de ${ids.length} gasto${ids.length === 1 ? '' : 's'}`);
        setSelectedIds(new Set());
      } catch (err) {
        triggerToast(err.message || 'Error al quitar el número de vale', 'error');
      }
    };
    const handleBulkDate = async () => {
      if (!bulkDate) { triggerToast('Elige la fecha', 'error'); return; }
      const ids = [...selectedIds];
      try {
        const results = await Promise.all(ids.map(id => window.SB.crudUpdate('cm_transacciones', id, { date: bulkDate })));
        const byId = {};
        results.forEach(rows => { if (rows[0]) byId[rows[0].id] = txFromDb(rows[0]); });
        setTransactions(prev => prev.map(t => byId[t.id] || t));
        triggerToast(`Fecha actualizada en ${ids.length} gasto${ids.length === 1 ? '' : 's'}`);
        setSelectedIds(new Set());
        setBulkDate('');
        setShowBulkDateModal(false);
      } catch (err) {
        triggerToast(err.message || 'Error al actualizar la fecha', 'error');
      }
    };
    const handleBulkDelete = async () => {
      const ids = [...selectedIds];
      try {
        await Promise.all(ids.map(id => window.SB.crudDelete('cm_transacciones', id)));
        setTransactions(prev => prev.filter(t => !selectedIds.has(t.id)));
        triggerToast(`${ids.length} gasto${ids.length === 1 ? '' : 's'} eliminado${ids.length === 1 ? '' : 's'}`);
        setSelectedIds(new Set());
        setShowBulkDeleteModal(false);
      } catch (err) {
        triggerToast(err.message || 'Error al eliminar los gastos', 'error');
      }
    };

    const totals = calculateTransactionTotals(formData);

    if (showForm) return (
      <div className="bg-white rounded-xl shadow-md border border-slate-200 overflow-hidden max-w-4xl mx-auto">
        <div className="bg-slate-900 text-white p-5 flex justify-between items-center">
          <div>
            <h2 className="text-lg font-bold">{editingId ? 'Editar Comprobante de Gasto' : 'Nuevo Registro de Gasto'}</h2>
            <p className="text-xs text-slate-300">Periodo actual: {activePeriod?.month}</p>
          </div>
          <button onClick={() => setShowForm(false)} className="text-slate-400 hover:text-white"><X className="h-6 w-6" /></button>
        </div>

        <form onSubmit={handleSave} className="p-6 space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-500 border-b pb-1">1. Información General</h3>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Fecha de Gasto *</label>
                  <input type="date" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm bg-slate-50 focus:bg-white" value={formData.date} onChange={e => setFormData({ ...formData, date: e.target.value })} />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">No. Factura / Soporte *</label>
                  <div className="flex gap-1.5">
                    <select
                      className="w-[38%] p-2.5 border border-slate-300 rounded-lg text-sm bg-white"
                      value={formData.invoicePrefix}
                      onChange={e => {
                        if (e.target.value === '__new__') { setShowPrefixModal(true); return; }
                        setFormData({ ...formData, invoicePrefix: e.target.value });
                      }}
                    >
                      <option value="">Sin prefijo</option>
                      {prefixes.map(p => <option key={p.id} value={p.prefix}>{p.prefix}</option>)}
                      <option value="__new__">+ Nuevo prefijo…</option>
                    </select>
                    <input type="text" placeholder="Ej: 1020" required className="flex-1 min-w-0 p-2.5 border border-slate-300 rounded-lg text-sm focus:ring-2 ring-emerald-500/20 outline-none" value={formData.invoiceNumber} onChange={e => setFormData({ ...formData, invoiceNumber: e.target.value })} />
                  </div>
                </div>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Tercero / Proveedor *</label>
                <ProviderCombobox value={formData.providerId} onChange={(id) => setFormData({ ...formData, providerId: id })} />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Categoría de Rubro *</label>
                <select required 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="">-- Seleccionar Categoría --</option>
                  {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Concepto / Descripción detallada *</label>
                <textarea required rows="3" placeholder="Detalla qué se compró o justificante del gasto..." className="w-full p-2.5 border border-slate-300 rounded-lg text-sm focus:ring-2 ring-emerald-500/20 outline-none" value={formData.description} onChange={e => setFormData({ ...formData, description: e.target.value })}></textarea>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Nº de Vale Ecocosecha (opcional)</label>
                <input type="text" placeholder="Ej: VALE-045 — para agrupar varias facturas de un mismo vale" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.valeNo} onChange={e => setFormData({ ...formData, valeNo: e.target.value })} />
                <p className="text-[11px] text-slate-400 mt-1">Úsalo cuando un mismo vale de caja se reparte en varias facturas/terceros distintos, para poder buscarlas juntas después. También puedes asignarlo en bloque desde la tabla.</p>
              </div>
            </div>

            <div className="space-y-4">
              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-500 border-b pb-1">2. Montos e Impuestos</h3>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Subtotal ($) *</label>
                  <input type="number" required min="0" step="any" placeholder="0" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm font-medium" value={formData.subtotal} onChange={e => setFormData({ ...formData, subtotal: e.target.value })} />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Descuento ($)</label>
                  <input type="number" min="0" step="any" placeholder="0" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.discount} onChange={e => setFormData({ ...formData, discount: e.target.value })} />
                </div>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">IVA ($)</label>
                <input type="number" min="0" step="any" placeholder="0" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.iva} onChange={e => setFormData({ ...formData, iva: e.target.value })} />
              </div>

              <div className="p-3.5 bg-slate-50 border border-slate-200 rounded-lg space-y-3">
                <label className="flex items-center space-x-2 text-xs font-bold text-slate-800 cursor-pointer">
                  <input type="checkbox" className="rounded text-emerald-600 focus:ring-emerald-500 h-4 w-4" checked={formData.isTaxable} onChange={e => setFormData({ ...formData, isTaxable: e.target.checked })} />
                  <span>¿Aplica Retenciones de Ley? (ReteFuente / ReteICA)</span>
                </label>

                {formData.isTaxable && (
                  <div className="grid grid-cols-2 gap-3 pt-2 border-t border-slate-200">
                    <div>
                      <label className="block text-[11px] font-semibold text-slate-600 mb-1">ReteFuente ($)</label>
                      <input type="number" min="0" step="any" className="w-full p-2 border border-slate-300 rounded text-xs" value={formData.reteFte} onChange={e => setFormData({ ...formData, reteFte: e.target.value })} />
                    </div>
                    <div>
                      <label className="block text-[11px] font-semibold text-slate-600 mb-1">ReteICA ($)</label>
                      <input type="number" min="0" step="any" className="w-full p-2 border border-slate-300 rounded text-xs" value={formData.reteIca} onChange={e => setFormData({ ...formData, reteIca: e.target.value })} />
                    </div>
                  </div>
                )}
              </div>

              <div className="bg-slate-900 text-white p-4 rounded-xl space-y-2">
                <div className="flex justify-between text-xs text-slate-300">
                  <span>Total Factura (Subtotal - Desc + IVA):</span>
                  <span className="font-semibold">{formatCurrency(totals.totalInvoice)}</span>
                </div>
                {formData.isTaxable && (
                  <div className="flex justify-between text-xs text-rose-300 border-b border-slate-800 pb-1">
                    <span>Total Retenciones Aplicadas:</span>
                    <span>-{formatCurrency(totals.reteFte + totals.reteIca)}</span>
                  </div>
                )}
                <div className="flex justify-between items-center pt-1">
                  <span className="text-xs font-bold text-slate-200">Neto Pagado de Caja:</span>
                  <span className="text-xl font-extrabold text-emerald-400">{formatCurrency(totals.netPaid)}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
            <button type="button" onClick={() => setShowForm(false)} className="px-5 py-2.5 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50">Cancelar</button>
            <button type="submit" className="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-bold rounded-lg shadow-sm flex items-center">
              <Check className="h-4 w-4 mr-2" /> Guardar Comprobante
            </button>
          </div>
        </form>
      </div>
    );

    const selectedTxs = periodTransactions.filter(t => selectedIds.has(t.id));
    const selectedTotal = selectedTxs.reduce((sum, t) => sum + calculateTransactionTotals(t).netPaid, 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">Control de Gastos</h1>
            <p className="text-slate-500 text-sm">Registra y clasifica los egresos de la caja menor</p>
          </div>
          <div className="flex gap-2">
            <button onClick={toggleBulkMode} className={`px-4 py-2.5 rounded-lg text-sm font-bold flex items-center shadow-sm border ${bulkMode ? 'bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-700' : 'bg-white border-slate-300 text-slate-700 hover:bg-slate-50'}`}>
              <CheckSquare className="h-4 w-4 mr-2" /> {bulkMode ? 'Cancelar selección' : 'Acciones en bloque'}
            </button>
            <button onClick={openNew} className="bg-emerald-600 hover:bg-emerald-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>
        </div>

        {bulkMode && selectedIds.size > 0 && (
          <div className="bg-white border border-emerald-200 rounded-xl p-3 flex flex-col sm:flex-row items-start sm:items-center gap-3 shadow-sm">
            <span className="text-xs font-bold text-slate-700">{selectedIds.size} gasto{selectedIds.size === 1 ? '' : 's'} seleccionado{selectedIds.size === 1 ? '' : 's'}</span>
            <span className="text-xs font-bold text-emerald-700">Suma: {formatCurrency(selectedTotal)}</span>
            <div className="flex gap-2 sm:ml-auto">
              <button onClick={() => { setBulkValePrefix(prefixes[0]?.prefix || ''); setBulkValeNumber(''); setShowValeModal(true); }} className="bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-2 rounded-lg text-xs font-bold flex items-center"><Hash className="h-3.5 w-3.5 mr-1" /> Vincular a un Vale</button>
              <button onClick={handleClearVale} className="bg-slate-100 hover:bg-slate-200 text-slate-600 px-3 py-2 rounded-lg text-xs font-bold">Quitar vale</button>
              <button onClick={() => { setBulkDate(''); setShowBulkDateModal(true); }} className="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-2 rounded-lg text-xs font-bold flex items-center"><Calendar className="h-3.5 w-3.5 mr-1" /> Editar Fecha</button>
              <button onClick={() => setShowBulkDeleteModal(true)} className="bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 px-3 py-2 rounded-lg text-xs font-bold flex items-center"><Trash2 className="h-3.5 w-3.5 mr-1" /> Eliminar</button>
              <button onClick={() => setSelectedIds(new Set())} className="text-slate-400 hover:text-slate-600 text-xs font-bold px-2">Cancelar</button>
            </div>
          </div>
        )}

        {showValeModal && (
          <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 flex items-center"><Hash className="h-4 w-4 mr-2" /> Vincular y Liquidar Vale</h3>
                  <p className="text-xs text-slate-300 mt-0.5">{selectedTxs.length} gasto{selectedTxs.length === 1 ? '' : 's'} seleccionado{selectedTxs.length === 1 ? '' : 's'}</p>
                </div>
                <button onClick={() => setShowValeModal(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <div className="p-6 space-y-4">
                <div className="border border-slate-200 rounded-lg divide-y divide-slate-100 max-h-56 overflow-y-auto">
                  {selectedTxs.map(t => {
                    const provider = providers.find(p => p.id === t.providerId);
                    const { netPaid } = calculateTransactionTotals(t);
                    return (
                      <div key={t.id} className="px-3 py-2 flex justify-between items-center text-xs">
                        <div className="min-w-0 mr-2">
                          <div className="font-bold text-slate-800 truncate">{t.invoiceNo} · {provider?.name || 'Varios'}</div>
                          <div className="text-slate-400 truncate">{t.description}</div>
                        </div>
                        <div className="font-bold text-slate-700 whitespace-nowrap">{formatCurrency(netPaid)}</div>
                      </div>
                    );
                  })}
                </div>
                <div className="flex justify-between items-center bg-emerald-50 border border-emerald-200 rounded-lg px-4 py-3">
                  <span className="text-xs font-bold text-emerald-800 uppercase tracking-wide">Suma a liquidar</span>
                  <span className="text-lg font-extrabold text-emerald-700">{formatCurrency(selectedTotal)}</span>
                </div>
                <p className="text-[11px] text-slate-400 -mt-2">Verifica que esta suma coincida con el valor de tu vale o recibo físico antes de confirmar.</p>
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Nº de Vale Ecocosecha *</label>
                  <div className="flex gap-1.5">
                    <select
                      className="w-[38%] p-2.5 border border-slate-300 rounded-lg text-sm bg-white"
                      value={bulkValePrefix}
                      onChange={e => {
                        if (e.target.value === '__new__') { setShowPrefixModal(true); return; }
                        setBulkValePrefix(e.target.value);
                      }}
                    >
                      <option value="">Sin prefijo</option>
                      {prefixes.map(p => <option key={p.id} value={p.prefix}>{p.prefix}</option>)}
                      <option value="__new__">+ Nuevo prefijo…</option>
                    </select>
                    <input type="text" autoFocus placeholder="Ej: 045" className="flex-1 min-w-0 p-2.5 border border-slate-300 rounded-lg text-sm" value={bulkValeNumber} onChange={e => setBulkValeNumber(e.target.value)} />
                  </div>
                </div>
                <div className="flex justify-end space-x-3 pt-2 border-t border-slate-200">
                  <button type="button" onClick={() => setShowValeModal(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button onClick={handleAssignVale} className="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-bold hover:bg-emerald-700">Confirmar y Vincular</button>
                </div>
              </div>
            </div>
          </div>
        )}

        {showBulkDateModal && (
          <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">
                <div>
                  <h3 className="font-bold flex items-center"><Calendar className="h-4 w-4 mr-2" /> Editar Fecha en Bloque</h3>
                  <p className="text-xs text-slate-300 mt-0.5">{selectedTxs.length} gasto{selectedTxs.length === 1 ? '' : 's'} seleccionado{selectedTxs.length === 1 ? '' : 's'}</p>
                </div>
                <button onClick={() => setShowBulkDateModal(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <div className="p-6 space-y-4">
                <div className="border border-slate-200 rounded-lg divide-y divide-slate-100 max-h-56 overflow-y-auto">
                  {selectedTxs.map(t => (
                    <div key={t.id} className="px-3 py-2 flex justify-between items-center text-xs">
                      <div className="min-w-0 mr-2">
                        <div className="font-bold text-slate-800 truncate">{t.invoiceNo} · {providers.find(p => p.id === t.providerId)?.name || 'Varios'}</div>
                        <div className="text-slate-400 truncate">{t.description}</div>
                      </div>
                      <div className="text-slate-500 whitespace-nowrap">{t.date}</div>
                    </div>
                  ))}
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Nueva fecha para todos los seleccionados *</label>
                  <input type="date" autoFocus className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={bulkDate} onChange={e => setBulkDate(e.target.value)} />
                </div>
                <div className="flex justify-end space-x-3 pt-2 border-t border-slate-200">
                  <button type="button" onClick={() => setShowBulkDateModal(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button onClick={handleBulkDate} className="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700">Aplicar Fecha</button>
                </div>
              </div>
            </div>
          </div>
        )}

        {showBulkDeleteModal && (
          <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">
                <div>
                  <h3 className="font-bold flex items-center"><Trash2 className="h-4 w-4 mr-2" /> Eliminar Gastos en Bloque</h3>
                  <p className="text-xs text-slate-300 mt-0.5">{selectedTxs.length} gasto{selectedTxs.length === 1 ? '' : 's'} seleccionado{selectedTxs.length === 1 ? '' : 's'}</p>
                </div>
                <button onClick={() => setShowBulkDeleteModal(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <div className="p-6 space-y-4">
                <div className="border border-slate-200 rounded-lg divide-y divide-slate-100 max-h-56 overflow-y-auto">
                  {selectedTxs.map(t => (
                    <div key={t.id} className="px-3 py-2 flex justify-between items-center text-xs">
                      <div className="min-w-0 mr-2">
                        <div className="font-bold text-slate-800 truncate">{t.invoiceNo} · {providers.find(p => p.id === t.providerId)?.name || 'Varios'}</div>
                        <div className="text-slate-400 truncate">{t.description}</div>
                      </div>
                      <div className="font-bold text-slate-700 whitespace-nowrap">{formatCurrency(calculateTransactionTotals(t).netPaid)}</div>
                    </div>
                  ))}
                </div>
                <p className="text-xs font-semibold text-rose-600">Esta acción no se puede deshacer. Se eliminarán permanentemente los {selectedTxs.length} gasto{selectedTxs.length === 1 ? '' : 's'} seleccionado{selectedTxs.length === 1 ? '' : 's'}.</p>
                <div className="flex justify-end space-x-3 pt-2 border-t border-slate-200">
                  <button type="button" onClick={() => setShowBulkDeleteModal(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button onClick={handleBulkDelete} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-bold hover:bg-rose-700">Eliminar Definitivamente</button>
                </div>
              </div>
            </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">
            <div className="relative flex-1">
              <Search className="h-4 w-4 absolute left-3 top-3 text-slate-400" />
              <input type="text" placeholder="Buscar por concepto, no. factura o nº de vale..." className="w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 ring-emerald-500/30" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />
            </div>
            <select className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white" value={filterCategory} onChange={e => setFilterCategory(e.target.value)}>
              <option value="">Todas las Categorías</option>
              {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-sm text-left">
              <thead className="bg-slate-100 text-slate-600 text-xs uppercase tracking-wider font-bold border-b border-slate-200">
                <tr>
                  {bulkMode && <th className="px-4 py-3 w-8"><input type="checkbox" checked={filteredExpenses.length > 0 && filteredExpenses.every(t => selectedIds.has(t.id))} onChange={toggleSelectAll} /></th>}
                  <th className="px-4 py-3">Fecha</th>
                  <th className="px-4 py-3">No. Soporte</th>
                  <th className="px-4 py-3">Beneficiario / Tercero</th>
                  <th className="px-4 py-3">Concepto y Categoría</th>
                  <th className="px-4 py-3 text-right">Subtotal</th>
                  <th className="px-4 py-3 text-right">Neto Pagado</th>
                  <th className="px-4 py-3 text-center">Acciones</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filteredExpenses.map(t => {
                  const provider = providers.find(p => p.id === t.providerId);
                  const category = categories.find(c => c.id === t.categoryId);
                  const { netPaid } = calculateTransactionTotals(t);
                  return (
                    <tr
                      key={t.id}
                      onClick={(e) => { if (!bulkMode) return; if (e.target.closest('button, input, a')) return; toggleSelect(t.id); }}
                      className={`hover:bg-slate-50/80 transition-colors ${bulkMode ? 'cursor-pointer' : ''} ${selectedIds.has(t.id) ? 'bg-emerald-50/40' : ''}`}
                    >
                      {bulkMode && <td className="px-4 py-3"><input type="checkbox" checked={selectedIds.has(t.id)} onChange={() => toggleSelect(t.id)} /></td>}
                      <td className="px-4 py-3 whitespace-nowrap text-slate-600 text-xs font-medium">{t.date}</td>
                      <td className="px-4 py-3 whitespace-nowrap text-xs">
                        <div className="font-bold text-slate-800">{t.invoiceNo}</div>
                        {t.valeNo && <div className="mt-0.5 inline-block text-[10px] px-1.5 py-0.5 rounded bg-indigo-100 text-indigo-700 font-semibold" title="Nº de vale Ecocosecha">🧾 {t.valeNo}</div>}
                      </td>
                      <td className="px-4 py-3 text-slate-700 text-xs truncate max-w-[150px]">{provider?.name || 'Varios'}</td>
                      <td className="px-4 py-3">
                        <div className="text-xs font-medium text-slate-800 truncate max-w-[220px]" title={t.description}>{t.description}</div>
                        <span className="inline-block mt-0.5 text-[10px] px-2 py-0.5 rounded font-semibold text-slate-700" style={{ backgroundColor: `${category?.color || '#CBD5E1'}25`, color: category?.color || '#334155' }}>
                          {category?.name || 'Sin Categoría'}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-right text-xs text-slate-500 whitespace-nowrap">{formatCurrency(t.subtotal)}</td>
                      <td className="px-4 py-3 text-right text-xs font-extrabold text-slate-800 whitespace-nowrap">{formatCurrency(netPaid)}</td>
                      <td className="px-4 py-3 text-center whitespace-nowrap">
                        <button onClick={() => editTransaction(t)} className="p-1.5 text-slate-400 hover:text-emerald-600 rounded-md hover:bg-emerald-50 transition-colors mr-1" title="Editar"><Edit2 className="h-4 w-4" /></button>
                        <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'expense', id: t.id, title: `Factura ${t.invoiceNo} - ${t.description}` })} className="p-1.5 text-slate-400 hover:text-rose-600 rounded-md hover:bg-rose-50 transition-colors" title="Eliminar"><Trash2 className="h-4 w-4" /></button>
                      </td>
                    </tr>
                  );
                })}
                {filteredExpenses.length === 0 && (
                  <tr>
                    <td colSpan={bulkMode ? 8 : 7} className="px-6 py-10 text-center text-slate-400 text-sm">
                      No se encontraron registros de gastos para esta búsqueda.
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  };

  const IncomesView = () => {
    const [showForm, setShowForm] = useState(false);
    const [editingId, setEditingId] = useState(null);
    const blankForm = { date: new Date().toISOString().split('T')[0], invoicePrefix: prefixes[0]?.prefix || '', invoiceNumber: '', deliveredBy: '', description: '', amountPaid: '' };
    const [formData, setFormData] = useState(blankForm);

    const openNew = () => {
      if (!activePeriodId) { triggerToast('Primero crea un periodo en Cierre / Periodos', 'error'); return; }
      setEditingId(null);
      setFormData(blankForm);
      setShowForm(true);
    };

    const handleSave = async (e) => {
      e.preventDefault();
      const amount = parseFloat(formData.amountPaid) || 0;

      const payload = {
        periodId: activePeriodId, type: 'income', date: formData.date, invoiceNo: formData.invoicePrefix + formData.invoiceNumber,
        deliveredBy: formData.deliveredBy, description: formData.description,
        subtotal: amount, discount: 0, iva: 0, isTaxable: false, reteFte: 0, reteIca: 0, amountPaid: amount
      };

      try {
        if (editingId) {
          const [row] = await window.SB.crudUpdate('cm_transacciones', editingId, txToDb(payload));
          setTransactions(prev => prev.map(t => t.id === editingId ? txFromDb(row) : t));
          triggerToast('Ingreso actualizado');
        } else {
          const [row] = await window.SB.crudInsert('cm_transacciones', [txToDb(payload)]);
          setTransactions(prev => [...prev, txFromDb(row)]);
          triggerToast('Ingreso/Reintegro registrado a caja');
        }
        setShowForm(false);
        setEditingId(null);
      } catch (err) {
        triggerToast(err.message || 'Error al guardar el ingreso', 'error');
      }
    };

    const editIncome = (t) => {
      const { prefix, number } = splitInvoiceNo(t.invoiceNo, prefixes.map(p => p.prefix));
      setFormData({ date: t.date, invoicePrefix: prefix, invoiceNumber: number, deliveredBy: t.deliveredBy || '', description: t.description || '', amountPaid: t.amountPaid || '' });
      setEditingId(t.id);
      setShowForm(true);
    };

    const incomesList = periodTransactions.filter(t => t.type === 'income');

    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">Ingresos y Reintegros a Caja</h1>
            <p className="text-slate-500 text-sm">Registra abonos de dinero, reposiciones de fondo o préstamos autorizados</p>
          </div>
          <button onClick={openNew} className="bg-sky-600 hover:bg-sky-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" /> Registrar Ingreso
          </button>
        </div>

        {showForm && (
          <div className="bg-white rounded-xl shadow-md border border-slate-200 overflow-hidden max-w-2xl mx-auto">
            <div className="bg-sky-900 text-white p-4 flex justify-between items-center">
              <h2 className="font-bold">{editingId ? 'Editar Registro de Ingreso' : 'Nuevo Registro de Reintegro de Caja'}</h2>
              <button onClick={() => setShowForm(false)} className="text-slate-300 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-4">
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Fecha de Recepción *</label>
                  <input type="date" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.date} onChange={e => setFormData({ ...formData, date: e.target.value })} />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">No. Recibo / Comprobante *</label>
                  <div className="flex gap-1.5">
                    <select
                      className="w-[38%] p-2.5 border border-slate-300 rounded-lg text-sm bg-white"
                      value={formData.invoicePrefix}
                      onChange={e => {
                        if (e.target.value === '__new__') { setShowPrefixModal(true); return; }
                        setFormData({ ...formData, invoicePrefix: e.target.value });
                      }}
                    >
                      <option value="">Sin prefijo</option>
                      {prefixes.map(p => <option key={p.id} value={p.prefix}>{p.prefix}</option>)}
                      <option value="__new__">+ Nuevo prefijo…</option>
                    </select>
                    <input type="text" placeholder="Ej: 002" required className="flex-1 min-w-0 p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.invoiceNumber} onChange={e => setFormData({ ...formData, invoiceNumber: e.target.value })} />
                  </div>
                </div>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Entregado Por (Responsable / Autoriza) *</label>
                <input type="text" placeholder="Ej: Tesorería Central, Gerencia, etc." required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.deliveredBy} onChange={e => setFormData({ ...formData, deliveredBy: e.target.value })} />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Monto Ingresado ($) *</label>
                <input type="number" required min="1" step="any" placeholder="0" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm font-bold text-emerald-700" value={formData.amountPaid} onChange={e => setFormData({ ...formData, amountPaid: e.target.value })} />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Concepto / Motivo de Ingreso *</label>
                <textarea required rows="3" placeholder="Ej: Reintegro de gastos mes anterior por consignación..." className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.description} onChange={e => setFormData({ ...formData, description: e.target.value })}></textarea>
              </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-sky-600 text-white rounded-lg text-sm font-bold hover:bg-sky-700">Guardar Ingreso</button>
              </div>
            </form>
          </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-sky-50/40 flex justify-between items-center">
            <h3 className="font-bold text-slate-800 text-sm">Historial de Ingresos - Periodo {activePeriod?.month || '—'}</h3>
            <span className="text-xs font-semibold text-sky-700 bg-sky-100 px-3 py-1 rounded-full">
              Total Inyectado: {formatCurrency(metrics.totalIncomes)}
            </span>
          </div>

          <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">Fecha</th>
                <th className="px-4 py-3">Comprobante</th>
                <th className="px-4 py-3">Entregado Por</th>
                <th className="px-4 py-3">Concepto</th>
                <th className="px-4 py-3 text-right">Monto</th>
                <th className="px-4 py-3 text-center">Acciones</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {incomesList.map(t => (
                <tr key={t.id} className="hover:bg-slate-50 transition-colors">
                  <td className="px-4 py-3 text-xs text-slate-600 whitespace-nowrap">{t.date}</td>
                  <td className="px-4 py-3 text-xs font-bold text-slate-800 whitespace-nowrap">{t.invoiceNo}</td>
                  <td className="px-4 py-3 text-xs text-slate-700 font-medium">{t.deliveredBy || 'N/A'}</td>
                  <td className="px-4 py-3 text-xs text-slate-600">{t.description}</td>
                  <td className="px-4 py-3 text-right text-xs font-bold text-emerald-600 whitespace-nowrap">+{formatCurrency(t.amountPaid)}</td>
                  <td className="px-4 py-3 text-center whitespace-nowrap">
                    <button onClick={() => editIncome(t)} className="p-1.5 text-slate-400 hover:text-sky-600 rounded-md hover:bg-sky-50 mr-1"><Edit2 className="h-4 w-4" /></button>
                    <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'income', id: t.id, title: `Ingreso ${t.invoiceNo} (${formatCurrency(t.amountPaid)})` })} className="p-1.5 text-slate-400 hover:text-rose-600 rounded-md hover:bg-rose-50"><Trash2 className="h-4 w-4" /></button>
                  </td>
                </tr>
              ))}
              {incomesList.length === 0 && (
                <tr>
                  <td colSpan="6" className="px-6 py-10 text-center text-slate-400 text-sm">
                    No hay registros de ingresos o abonos para este periodo.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  };

  const ProvidersView = () => {
    const [showModal, setShowModal] = useState(false);
    const [editingId, setEditingId] = useState(null);
    const [search, setSearch] = useState('');
    const [isImporting, setIsImporting] = useState(false);
    const fileInputRef = useRef(null);
    const blankForm = { name: '', document: '', address: '', phone: '', email: '', categoryId: '' };
    const [formData, setFormData] = useState(blankForm);

    const TEMPLATE_HEADERS = ['Nombre', 'NIT / Cédula', 'Dirección', 'Teléfono', 'Correo', 'Categoría'];

    const downloadTemplate = async () => {
      try {
        const XLSX = await ensureXLSX();
        const wsData = [
          TEMPLATE_HEADERS,
          ['Distribuidora Ejemplo SAS', '900123456-7', 'Cra 10 # 20-30, Bogotá', '3001234567', 'contacto@ejemplo.com', categories[0]?.name || 'Papelería'],
        ];
        const ws = XLSX.utils.aoa_to_sheet(wsData);
        ws['!cols'] = [{ wch: 28 }, { wch: 16 }, { wch: 30 }, { wch: 14 }, { wch: 26 }, { wch: 18 }];
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Terceros');
        XLSX.writeFile(wb, 'Plantilla_Terceros_CajaMenor.xlsx');
      } catch (err) {
        triggerToast('Error al generar la plantilla', 'error');
      }
    };

    const handleImportFile = async (e) => {
      const file = e.target.files?.[0];
      if (!file) 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: false });

        const catByName = {};
        categories.forEach(c => { catByName[c.name.trim().toLowerCase()] = c.id; });

        const toInsert = [];
        let skippedNoName = 0;
        let unmatchedCategory = 0;
        // salta la fila 1 si es el encabezado (compara sin importar mayúsculas/acentos exactos)
        const startIdx = rows.length && String(rows[0]?.[0] || '').trim().toLowerCase().startsWith('nombre') ? 1 : 0;

        for (let i = startIdx; i < rows.length; i++) {
          const r = rows[i];
          if (!r || !r.length) continue;
          const name = String(r[0] || '').trim();
          if (!name) { skippedNoName++; continue; }
          const document = String(r[1] || '').trim();
          const address = String(r[2] || '').trim();
          const phone = String(r[3] || '').trim();
          const email = String(r[4] || '').trim();
          const catName = String(r[5] || '').trim();
          let categoryId = '';
          if (catName) {
            categoryId = catByName[catName.toLowerCase()] || '';
            if (!categoryId) unmatchedCategory++;
          }
          toInsert.push(provToDb({ name, document, address, phone, email, categoryId }));
        }

        if (!toInsert.length) {
          triggerToast('No se encontraron filas válidas para importar (revisa que la columna Nombre esté llena)', 'error');
          return;
        }

        const rowsInserted = await window.SB.crudInsert('cm_terceros', toInsert);
        setProviders(prev => [...prev, ...rowsInserted.map(provFromDb)]);

        let msg = `${rowsInserted.length} tercero${rowsInserted.length === 1 ? '' : 's'} importado${rowsInserted.length === 1 ? '' : 's'}`;
        if (skippedNoName) msg += ` · ${skippedNoName} fila(s) sin nombre omitida(s)`;
        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 = '';
      }
    };

    const handleSave = async (e) => {
      e.preventDefault();
      try {
        if (editingId) {
          const [row] = await window.SB.crudUpdate('cm_terceros', editingId, provToDb(formData));
          setProviders(prev => prev.map(p => p.id === editingId ? provFromDb(row) : p));
          triggerToast('Tercero actualizado');
        } else {
          const [row] = await window.SB.crudInsert('cm_terceros', [provToDb(formData)]);
          setProviders(prev => [...prev, provFromDb(row)]);
          triggerToast('Nuevo tercero guardado');
        }
        setShowModal(false);
        setEditingId(null);
      } catch (err) {
        triggerToast(err.message || 'Error al guardar el tercero', 'error');
      }
    };

    const editProvider = (p) => {
      setFormData({ name: p.name, document: p.document, address: p.address, phone: p.phone, email: p.email, categoryId: p.categoryId });
      setEditingId(p.id);
      setShowModal(true);
    };

    const filteredProviders = providers.filter(p =>
      p.name.toLowerCase().includes(search.toLowerCase()) ||
      (p.document || '').toLowerCase().includes(search.toLowerCase())
    );

    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">Directorio de Terceros y Proveedores</h1>
            <p className="text-slate-500 text-sm">Administra beneficiarios con sus datos de NIT/Cédula, dirección y contacto</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" /> Descargar 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={() => { setEditingId(null); setFormData(blankForm); setShowModal(true); }} className="bg-emerald-600 hover:bg-emerald-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" /> Crear Tercero
            </button>
          </div>
        </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-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 Tercero' : 'Registrar Nuevo Tercero'}</h3>
                <button onClick={() => setShowModal(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>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Nombre / Razón Social *</label>
                  <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.name} onChange={e => setFormData({ ...formData, name: 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">NIT / Cédula *</label>
                    <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.document} onChange={e => setFormData({ ...formData, document: e.target.value })} />
                  </div>
                  <div>
                    <label className="block text-xs font-semibold text-slate-700 mb-1">Teléfono</label>
                    <input type="text" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.phone} onChange={e => setFormData({ ...formData, phone: e.target.value })} />
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Dirección Física</label>
                  <input type="text" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.address} onChange={e => setFormData({ ...formData, address: e.target.value })} />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Correo Electrónico</label>
                  <input type="email" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.email} onChange={e => setFormData({ ...formData, email: e.target.value })} />
                </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-emerald-600 text-white rounded-lg text-sm font-bold hover:bg-emerald-700">Guardar Tercero</button>
                </div>
              </form>
            </div>
          </div>
        )}

        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
          <div className="relative mb-4">
            <Search className="h-4 w-4 absolute left-3 top-3 text-slate-400" />
            <input type="text" placeholder="Buscar por Nombre o NIT/Cédula..." className="w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg text-sm" value={search} onChange={e => setSearch(e.target.value)} />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {filteredProviders.map(p => (
              <div key={p.id} className="border border-slate-200 rounded-xl p-4 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all flex flex-col justify-between space-y-3">
                <div>
                  <div className="flex justify-between items-start">
                    <h3 className="font-bold text-slate-800 text-sm">{p.name}</h3>
                    <span className="text-[10px] bg-slate-200 text-slate-700 px-2 py-0.5 rounded font-mono font-bold">{p.document}</span>
                  </div>
                  <div className="mt-3 space-y-1 text-xs text-slate-500">
                    <p className="flex items-center"><MapPin className="h-3.5 w-3.5 mr-1.5 text-slate-400" /> {p.address || 'Sin dirección'}</p>
                    <p className="flex items-center"><Phone className="h-3.5 w-3.5 mr-1.5 text-slate-400" /> {p.phone || 'Sin teléfono'}</p>
                    <p className="flex items-center"><Mail className="h-3.5 w-3.5 mr-1.5 text-slate-400" /> {p.email || 'Sin correo'}</p>
                  </div>
                </div>
                <div className="pt-3 border-t border-slate-200 flex justify-end space-x-2">
                  <button onClick={() => editProvider(p)} className="p-1.5 text-slate-500 hover:text-emerald-600 rounded bg-white border border-slate-200"><Edit2 className="h-3.5 w-3.5" /></button>
                  <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'provider', id: p.id, title: p.name })} className="p-1.5 text-slate-500 hover:text-rose-600 rounded bg-white border border-slate-200"><Trash2 className="h-3.5 w-3.5" /></button>
                </div>
              </div>
            ))}
            {filteredProviders.length === 0 && (
              <div className="col-span-full text-center text-slate-400 text-sm py-10">No hay terceros registrados todavía.</div>
            )}
          </div>
        </div>
      </div>
    );
  };

  const CategoriesView = () => {
    const [showModal, setShowModal] = useState(false);
    const [editingId, setEditingId] = useState(null);
    const blankForm = { name: '', color: '#0088FE', description: '' };
    const [formData, setFormData] = useState(blankForm);

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

    const editCategory = (c) => {
      setFormData({ name: c.name, color: c.color, description: c.description });
      setEditingId(c.id);
      setShowModal(true);
    };

    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">Catálogo de Categorías de Gasto</h1>
            <p className="text-slate-500 text-sm">Clasifica y asigna colores para identificar rápidamente tus centros de costo</p>
          </div>
          <button onClick={() => { setEditingId(null); setFormData(blankForm); setShowModal(true); }} className="bg-emerald-600 hover:bg-emerald-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 Categoría
          </button>
        </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">{editingId ? 'Editar Categoría' : 'Crear Categoría'}</h3>
                <button onClick={() => setShowModal(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>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Nombre de Categoría *</label>
                  <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.name} onChange={e => setFormData({ ...formData, name: e.target.value })} />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Color Distintivo *</label>
                  <div className="flex items-center space-x-3">
                    <input type="color" className="h-10 w-16 p-1 border border-slate-300 rounded cursor-pointer" value={formData.color} onChange={e => setFormData({ ...formData, color: e.target.value })} />
                    <span className="text-xs text-slate-500 uppercase font-mono">{formData.color}</span>
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Descripción corta</label>
                  <textarea rows="2" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={formData.description} onChange={e => setFormData({ ...formData, description: e.target.value })}></textarea>
                </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-emerald-600 text-white rounded-lg text-sm font-bold hover:bg-emerald-700">Guardar Categoría</button>
                </div>
              </form>
            </div>
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {categories.map(c => {
            const catExpenses = transactions.filter(t => t.periodId === activePeriodId && t.categoryId === c.id && t.type === 'expense');
            const catTotal = catExpenses.reduce((sum, t) => sum + calculateTransactionTotals(t).netPaid, 0);

            return (
              <div key={c.id} className="bg-white rounded-xl border border-slate-200 p-5 shadow-sm flex flex-col justify-between space-y-4">
                <div className="flex items-start justify-between">
                  <div className="flex items-center space-x-3">
                    <div className="w-4 h-10 rounded-full" style={{ backgroundColor: c.color }}></div>
                    <div>
                      <h3 className="font-bold text-slate-800 text-sm">{c.name}</h3>
                      <p className="text-xs text-slate-500 mt-0.5">{c.description || 'Sin descripción'}</p>
                    </div>
                  </div>
                </div>

                <div className="pt-3 border-t border-slate-100 flex items-center justify-between">
                  <div>
                    <span className="text-[10px] text-slate-400 uppercase font-bold tracking-wider block">Gasto este mes</span>
                    <span className="text-sm font-bold text-slate-800">{formatCurrency(catTotal)}</span>
                  </div>
                  <div className="flex space-x-1">
                    <button onClick={() => editCategory(c)} className="p-1.5 text-slate-400 hover:text-emerald-600 rounded"><Edit2 className="h-4 w-4" /></button>
                    <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'category', id: c.id, title: c.name })} className="p-1.5 text-slate-400 hover:text-rose-600 rounded"><Trash2 className="h-4 w-4" /></button>
                  </div>
                </div>
              </div>
            );
          })}
          {categories.length === 0 && (
            <div className="col-span-full text-center text-slate-400 text-sm py-10">No hay categorías creadas todavía.</div>
          )}
        </div>
      </div>
    );
  };

  // ==========================================================================
  // Auditoría de Cierre: saldo inicial + ingresos − gastos = saldo esperado,
  // vs. el conteo físico real, y desde aquí se hace el cierre documentado del
  // periodo (en vez del simple toggle rápido que ya existía en Periodos).
  // ==========================================================================
  const AuditView = () => {
    const [physicalCount, setPhysicalCount] = useState('');
    const [linkedIncome, setLinkedIncome] = useState(null);
    const [saving, setSaving] = useState(false);
    const [closing, setClosing] = useState(false);

    useEffect(() => {
      setPhysicalCount(activePeriod && activePeriod.physicalCount != null ? String(activePeriod.physicalCount) : '');
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [activePeriodId]);

    useEffect(() => {
      setLinkedIncome(null);
      if (!activePeriod?.initialIncomeId) return;
      let cancelled = false;
      (async () => {
        try {
          const rows = await window.SB.crudSelect('cm_transacciones', { eq: { id: activePeriod.initialIncomeId } });
          if (!cancelled && rows[0]) setLinkedIncome(txFromDb(rows[0]));
        } catch (err) { /* no crítico: solo es una nota informativa */ }
      })();
      return () => { cancelled = true; };
    }, [activePeriod?.initialIncomeId]);

    if (!activePeriod) {
      return (
        <div className="text-center text-slate-400 text-sm py-16">
          Selecciona o crea un periodo en <strong>Periodos / Cierre</strong> para auditarlo.
        </div>
      );
    }

    const expenseCount = periodTransactions.filter(t => t.type === 'expense').length;
    const incomeCount = periodTransactions.filter(t => t.type === 'income').length;
    const diff = physicalCount !== '' ? (parseFloat(physicalCount) || 0) - metrics.expectedBalance : null;
    const cuadra = diff !== null && Math.abs(diff) < 1;

    const handleSaveCount = async (silent) => {
      setSaving(true);
      try {
        const value = physicalCount === '' ? null : (parseFloat(physicalCount) || 0);
        await window.SB.crudUpdate('cm_periodos', activePeriodId, { physical_count: value, physical_count_date: value !== null ? new Date().toISOString().split('T')[0] : null });
        setPeriods(prev => prev.map(p => p.id === activePeriodId ? { ...p, physicalCount: value, physicalCountDate: value !== null ? new Date().toISOString().split('T')[0] : '' } : p));
        if (!silent) triggerToast('Conteo físico guardado');
      } catch (err) {
        triggerToast(err.message || 'Error al guardar el conteo', 'error');
        throw err;
      } finally {
        setSaving(false);
      }
    };

    const handleCloseFromAudit = async () => {
      if (physicalCount === '') { triggerToast('Registra el conteo físico antes de cerrar el periodo', 'error'); return; }
      setClosing(true);
      try {
        await handleSaveCount(true);
        await window.SB.crudUpdate('cm_periodos', activePeriodId, { is_closed: true });
        setPeriods(prev => prev.map(p => p.id === activePeriodId ? { ...p, isClosed: true } : p));
        triggerToast('Periodo auditado y cerrado ✓');
      } catch (err) {
        // handleSaveCount ya mostró el toast si el problema fue ahí
      } finally {
        setClosing(false);
      }
    };

    return (
      <div className="space-y-6 max-w-3xl">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Auditoría de Cierre</h1>
          <p className="text-slate-500 text-sm">
            Periodo: <strong className="text-slate-800">{activePeriod.month}</strong> ({activePeriod.startDate} al {activePeriod.endDate})
            <span className={`ml-2 px-2 py-0.5 rounded text-xs font-bold ${activePeriod.isClosed ? 'bg-amber-100 text-amber-800' : 'bg-sky-100 text-sky-800'}`}>
              {activePeriod.isClosed ? '🔒 Cerrado' : '🔓 Abierto'}
            </span>
          </p>
        </div>

        <div className="bg-white rounded-xl border border-slate-200 shadow-sm divide-y divide-slate-100 overflow-hidden">
          <div className="p-4 flex justify-between items-center">
            <div>
              <p className="text-xs font-bold text-slate-500 uppercase tracking-wide">Saldo Inicial</p>
              {linkedIncome && <p className="text-[11px] text-emerald-600 mt-0.5">Vinculado al ingreso {linkedIncome.invoiceNo} del {linkedIncome.date}</p>}
            </div>
            <span className="text-sm font-bold text-slate-800">{formatCurrency(activePeriod.initialBalance)}</span>
          </div>
          <div className="p-4 flex justify-between items-center">
            <p className="text-xs font-bold text-slate-500 uppercase tracking-wide">+ Ingresos del periodo ({incomeCount})</p>
            <span className="text-sm font-bold text-emerald-600">+{formatCurrency(metrics.totalIncomes)}</span>
          </div>
          <div className="p-4 flex justify-between items-center">
            <p className="text-xs font-bold text-slate-500 uppercase tracking-wide">− Gastos del periodo ({expenseCount})</p>
            <span className="text-sm font-bold text-rose-600">-{formatCurrency(metrics.totalExpenses)}</span>
          </div>
          <div className="p-4 flex justify-between items-center bg-slate-900">
            <p className="text-xs font-bold text-slate-300 uppercase tracking-wide">= Saldo Esperado (Sistema)</p>
            <span className="text-lg font-extrabold text-white">{formatCurrency(metrics.expectedBalance)}</span>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 space-y-4">
          <h3 className="text-sm font-bold text-slate-800">Conteo Físico de Caja</h3>
          <div className="flex flex-col sm:flex-row gap-3 sm:items-end">
            <div className="flex-1">
              <label className="block text-xs font-semibold text-slate-700 mb-1">Dinero contado físicamente ($)</label>
              <input type="number" step="any" placeholder="Cuenta el efectivo y anótalo aquí" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm font-bold" value={physicalCount} onChange={e => setPhysicalCount(e.target.value)} />
            </div>
            <button onClick={() => handleSaveCount(false)} disabled={saving} className="px-4 py-2.5 bg-slate-200 hover:bg-slate-300 disabled:opacity-60 text-slate-700 rounded-lg text-sm font-bold">
              {saving ? 'Guardando...' : 'Guardar Conteo'}
            </button>
          </div>

          {diff !== null && (
            <div className={`rounded-lg p-4 flex justify-between items-center ${cuadra ? 'bg-emerald-50 border border-emerald-200' : diff > 0 ? 'bg-sky-50 border border-sky-200' : 'bg-rose-50 border border-rose-200'}`}>
              <span className={`text-xs font-bold uppercase tracking-wide ${cuadra ? 'text-emerald-700' : diff > 0 ? 'text-sky-700' : 'text-rose-700'}`}>
                {cuadra ? '✓ Cuadra exacto' : diff > 0 ? 'Sobrante en caja' : 'Faltante en caja'}
              </span>
              <span className={`text-lg font-extrabold ${cuadra ? 'text-emerald-700' : diff > 0 ? 'text-sky-700' : 'text-rose-700'}`}>{formatCurrency(Math.abs(diff))}</span>
            </div>
          )}

          <div className="flex justify-end pt-2 border-t border-slate-200">
            {!activePeriod.isClosed ? (
              <button onClick={handleCloseFromAudit} disabled={closing} className="px-5 py-2.5 bg-rose-600 hover:bg-rose-700 disabled:opacity-60 text-white rounded-lg text-sm font-bold">
                {closing ? 'Cerrando...' : '🔒 Registrar Auditoría y Cerrar Periodo'}
              </button>
            ) : (
              <span className="text-xs text-slate-400">Este periodo ya está cerrado. Puedes reabrirlo desde Periodos / Cierre si necesitas corregir algo.</span>
            )}
          </div>
        </div>
      </div>
    );
  };

  const SettingsView = () => {
    const [showPeriodModal, setShowPeriodModal] = useState(false);
    const [editingPeriodId, setEditingPeriodId] = useState(null);
    const [periodData, setPeriodData] = useState({
      month: '', startDate: '', endDate: '',
      responsibleName: userProfile.name, responsibleDocument: userProfile.document,
      baseFund: 500000, initialBalance: 0, initialIncomeId: ''
    });
    const [availableIncomes, setAvailableIncomes] = useState([]);

    // Ingresos ya registrados (de cualquier periodo) que se pueden vincular como el
    // saldo inicial de este periodo — se cargan solo mientras el modal está abierto.
    useEffect(() => {
      if (!showPeriodModal) return;
      let cancelled = false;
      (async () => {
        try {
          const rows = await window.SB.crudSelect('cm_transacciones', { eq: { type: 'income' }, order: { col: 'date', asc: false } });
          if (!cancelled) setAvailableIncomes(rows.map(txFromDb));
        } catch (err) { /* no crítico: el vínculo es opcional */ }
      })();
      return () => { cancelled = true; };
    }, [showPeriodModal]);

    const toggleSignOff = async (roleKey, signerName) => {
      if (!activePeriod) return;
      const currentStatus = activePeriod.status[roleKey];
      const updatedStatus = {
        ...activePeriod.status,
        [roleKey]: !currentStatus,
        [`${roleKey}By`]: !currentStatus ? signerName : '',
        [`${roleKey}Date`]: !currentStatus ? new Date().toISOString().split('T')[0] : ''
      };
      try {
        await window.SB.crudUpdate('cm_periodos', activePeriodId, { status: updatedStatus });
        setPeriods(prev => prev.map(p => p.id === activePeriodId ? { ...p, status: updatedStatus } : p));
        triggerToast(`Firma '${roleKey}' actualizada`);
      } catch (err) {
        triggerToast(err.message || 'Error al firmar la etapa', 'error');
      }
    };

    const handleSavePeriod = async (e) => {
      e.preventDefault();
      const payload = { ...periodData, baseFund: parseFloat(periodData.baseFund) || 0, initialBalance: parseFloat(periodData.initialBalance) || 0 };
      try {
        if (editingPeriodId) {
          const [row] = await window.SB.crudUpdate('cm_periodos', editingPeriodId, periodToDb(payload));
          setPeriods(prev => prev.map(p => p.id === editingPeriodId ? periodFromDb(row) : p));
          triggerToast('Datos del periodo actualizados');
        } else {
          const newPayload = { ...payload, status: { elaboro: false, reviso: false, contabilizo: false, aprobo: false }, isClosed: false };
          const [row] = await window.SB.crudInsert('cm_periodos', [periodToDb(newPayload)]);
          const mapped = periodFromDb(row);
          setPeriods(prev => [...prev, mapped]);
          setActivePeriodId(mapped.id);
          triggerToast('Nuevo periodo de caja menor aperturado');
        }
        setShowPeriodModal(false);
        setEditingPeriodId(null);
      } catch (err) {
        triggerToast(err.message || 'Error al guardar el periodo', 'error');
      }
    };

    const exportFullStateJSON = () => {
      const stateBackup = { version: '1.0', exportedAt: new Date().toISOString(), userProfile, categories, providers, periods, transactions };
      const blob = new Blob([JSON.stringify(stateBackup, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `CajaMenor_Backup_${new Date().toISOString().split('T')[0]}.json`;
      link.click();
      triggerToast('Copia de seguridad en JSON descargada');
    };

    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')}`;

      const suggestedBalance = metrics.expectedBalance || 0;

      setPeriodData({
        month: `${yyyy}-${mm}`, startDate: firstDay, endDate: lastDay,
        responsibleName: userProfile.name, responsibleDocument: userProfile.document,
        baseFund: activePeriod?.baseFund || 500000, initialBalance: suggestedBalance, initialIncomeId: ''
      });
      setEditingPeriodId(null);
      setShowPeriodModal(true);
    };

    return (
      <div className="space-y-8">
        <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 Configuración</h1>
            <p className="text-slate-500 text-sm">Gestiona el historial de cortes de caja y respaldos de información</p>
          </div>
          <button onClick={openNewPeriodModal} className="bg-emerald-600 hover:bg-emerald-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">
          <div className="p-4 border-b border-slate-200 bg-slate-50 flex justify-between items-center">
            <h3 className="font-bold text-slate-800">Historial de Periodos</h3>
          </div>
          <div className="overflow-x-auto">
            <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 de Corte</th>
                  <th className="px-4 py-3">Responsable</th>
                  <th className="px-4 py-3">Base / Saldo Inic.</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-emerald-50/30' : 'hover:bg-slate-50'}`}>
                    <td className="px-4 py-3 whitespace-nowrap font-bold text-slate-800">
                      {p.month}
                      {p.id === activePeriodId && <span className="ml-2 text-[10px] bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full">Activo</span>}
                    </td>
                    <td className="px-4 py-3 whitespace-nowrap text-xs text-slate-600">{p.startDate} al {p.endDate}</td>
                    <td className="px-4 py-3 text-xs text-slate-700">{p.responsibleName}</td>
                    <td className="px-4 py-3 text-xs text-slate-700">
                      Base: <strong>{formatCurrency(p.baseFund)}</strong><br />
                      Inic: <strong>{formatCurrency(p.initialBalance)}</strong>
                    </td>
                    <td className="px-4 py-3 whitespace-nowrap">
                      <span 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'}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-center whitespace-nowrap space-x-1">
                      {p.id !== activePeriodId && (
                        <button onClick={() => { setActivePeriodId(p.id); triggerToast(`Periodo ${p.month} activado`); }} className="p-1.5 text-slate-400 hover:text-sky-600 rounded-md hover:bg-sky-50" title="Ver / Activar"><LayoutDashboard className="h-4 w-4" /></button>
                      )}
                      <button onClick={() => { setEditingPeriodId(p.id); setPeriodData(p); setShowPeriodModal(true); }} className="p-1.5 text-slate-400 hover:text-emerald-600 rounded-md hover:bg-emerald-50" title="Editar"><Edit2 className="h-4 w-4" /></button>
                      <button onClick={() => setDeleteConfirm({ isOpen: true, type: 'period', id: p.id, title: `Periodo ${p.month}` })} className="p-1.5 text-slate-400 hover:text-rose-600 rounded-md hover:bg-rose-50" title="Eliminar"><Trash2 className="h-4 w-4" /></button>
                    </td>
                  </tr>
                ))}
                {periods.length === 0 && (
                  <tr><td colSpan="6" 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>
        </div>

        {activePeriod && (
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 space-y-4">
            <div className="flex justify-between items-center border-b pb-3">
              <div>
                <h2 className="text-lg font-bold text-slate-800">Flujo de Aprobaciones (Periodo Activo)</h2>
                <p className="text-xs text-slate-500">Periodo actual: <strong className="text-slate-800">{activePeriod.month}</strong></p>
              </div>
              <button
                onClick={async () => {
                  const closed = !activePeriod.isClosed;
                  try {
                    await window.SB.crudUpdate('cm_periodos', activePeriodId, { is_closed: closed });
                    setPeriods(periods.map(p => p.id === activePeriodId ? { ...p, isClosed: closed } : p));
                    triggerToast(closed ? 'Periodo cerrado oficialmente' : 'Periodo reabierto');
                  } catch (err) {
                    triggerToast(err.message || 'Error al cambiar el estado del periodo', 'error');
                  }
                }}
                className={`px-4 py-2 rounded-lg text-xs font-bold transition-colors ${activePeriod.isClosed ? 'bg-amber-100 text-amber-800 hover:bg-amber-200' : 'bg-rose-600 text-white hover:bg-rose-700'}`}
              >
                {activePeriod.isClosed ? '🔓 Reabrir Periodo Activo' : '🔒 Finalizar y Cerrar Periodo Activo'}
              </button>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {[
                { key: 'elaboro', title: 'ELABORÓ', role: 'Responsable de Caja' },
                { key: 'reviso', title: 'REVISÓ', role: 'Auditoría / Control' },
                { key: 'contabilizo', title: 'CONTABILIZÓ', role: 'Departamento Contable' },
                { key: 'aprobo', title: 'APROBÓ', role: 'Gerencia General' }
              ].map(step => {
                const isDone = activePeriod.status[step.key];
                const signer = activePeriod.status[`${step.key}By`];
                const date = activePeriod.status[`${step.key}Date`];

                return (
                  <div key={step.key} className={`border rounded-xl p-4 flex flex-col justify-between ${isDone ? 'bg-emerald-50/50 border-emerald-200' : 'bg-slate-50 border-slate-200'}`}>
                    <div>
                      <div className="flex justify-between items-center mb-2">
                        <span className="text-xs font-bold uppercase tracking-wider text-slate-700">{step.title}</span>
                        <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${isDone ? 'bg-emerald-200 text-emerald-800' : 'bg-slate-200 text-slate-600'}`}>
                          {isDone ? 'Firmado' : 'Pendiente'}
                        </span>
                      </div>
                      <p className="text-[11px] text-slate-500 mb-3">{step.role}</p>
                      {isDone && (
                        <div className="text-xs space-y-0.5 text-slate-700">
                          <p className="font-semibold truncate">{signer || 'Firma Registrada'}</p>
                          <p className="text-[10px] text-slate-400">{date}</p>
                        </div>
                      )}
                    </div>
                    <button
                      onClick={() => toggleSignOff(step.key, userProfile.name)}
                      className={`mt-4 w-full py-1.5 text-xs font-bold rounded-lg transition-colors ${isDone ? 'bg-slate-200 text-slate-700 hover:bg-slate-300' : 'bg-emerald-600 text-white hover:bg-emerald-700'}`}
                    >
                      {isDone ? 'Desmarcar' : 'Firmar Etapa'}
                    </button>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        <div className="bg-slate-900 text-white rounded-xl p-6 shadow-md space-y-4">
          <div className="flex items-center space-x-3 border-b border-slate-800 pb-4">
            <div className="p-3 bg-emerald-500/20 text-emerald-400 rounded-lg">
              <Database className="h-6 w-6" />
            </div>
            <div>
              <h2 className="text-lg font-bold">Respaldo en JSON (adicional a la base de datos)</h2>
              <p className="text-xs text-slate-400">Todo ya se guarda automáticamente en la base de datos de Ecocosecha. Esta copia extra en JSON es útil como respaldo manual o para revisar el historial completo offline.</p>
            </div>
          </div>

          <div className="pt-2">
            <div className="bg-slate-800/80 p-4 rounded-xl border border-slate-700 flex flex-col justify-between max-w-sm">
              <div>
                <h3 className="font-bold text-sm text-emerald-400 mb-1">Exportar Copia Completa</h3>
                <p className="text-xs text-slate-300 mb-4">Guarda periodos, gastos, ingresos, proveedores y categorías en un archivo descargable.</p>
              </div>
              <button onClick={exportFullStateJSON} className="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-2.5 rounded-lg text-xs font-bold flex items-center justify-center">
                <Download className="h-4 w-4 mr-2" /> Descargar Backup JSON
              </button>
            </div>
          </div>
        </div>

        {showPeriodModal && (
          <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">{editingPeriodId ? 'Editar Periodo de Caja' : 'Aperturar Nuevo Periodo de Caja Menor'}</h3>
                <button onClick={() => setShowPeriodModal(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 className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs font-semibold text-slate-700 mb-1">Mes del Corte (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>
                    <label className="block text-xs font-semibold text-slate-700 mb-1">Fondo Base Asignado ($)</label>
                    <input type="number" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm font-bold" value={periodData.baseFund} onChange={e => setPeriodData({ ...periodData, baseFund: 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">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>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Saldo Inicial Transferido ($) *</label>
                  <input
                    type="number" required
                    disabled={!!periodData.initialIncomeId}
                    className={`w-full p-2.5 border border-slate-300 rounded-lg text-sm font-bold text-emerald-700 ${periodData.initialIncomeId ? 'bg-slate-100' : ''}`}
                    value={periodData.initialBalance}
                    onChange={e => setPeriodData({ ...periodData, initialBalance: e.target.value })}
                  />
                </div>

                <div className="border border-slate-200 rounded-lg p-3 bg-slate-50 space-y-2">
                  <label className="block text-xs font-semibold text-slate-700">Vincular con un ingreso ya registrado (opcional)</label>
                  <select
                    className="w-full p-2.5 border border-slate-300 rounded-lg text-sm bg-white"
                    value={periodData.initialIncomeId || ''}
                    onChange={e => {
                      const id = e.target.value;
                      if (!id) { setPeriodData({ ...periodData, initialIncomeId: '' }); return; }
                      const inc = availableIncomes.find(i => i.id === id);
                      setPeriodData({ ...periodData, initialIncomeId: id, initialBalance: inc ? inc.amountPaid : periodData.initialBalance });
                    }}
                  >
                    <option value="">-- Sin vincular (monto manual) --</option>
                    {availableIncomes.map(inc => (
                      <option key={inc.id} value={inc.id}>{inc.date} · {inc.invoiceNo} · {inc.deliveredBy || 'N/A'} · {formatCurrency(inc.amountPaid)}</option>
                    ))}
                  </select>
                  {periodData.initialIncomeId && (
                    <p className="text-[11px] text-emerald-700">✓ El saldo inicial se toma de este ingreso. Se verá en la Auditoría de Cierre para trazabilidad.</p>
                  )}
                </div>

                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs font-semibold text-slate-700 mb-1">Nombre Responsable *</label>
                    <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm bg-slate-50" value={periodData.responsibleName} onChange={e => setPeriodData({ ...periodData, responsibleName: e.target.value })} />
                  </div>
                  <div>
                    <label className="block text-xs font-semibold text-slate-700 mb-1">Documento Identidad *</label>
                    <input type="text" required className="w-full p-2.5 border border-slate-300 rounded-lg text-sm bg-slate-50" value={periodData.responsibleDocument} onChange={e => setPeriodData({ ...periodData, responsibleDocument: e.target.value })} />
                  </div>
                </div>

                <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                  <button type="button" onClick={() => setShowPeriodModal(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-emerald-600 text-white rounded-lg text-sm font-bold hover:bg-emerald-700">{editingPeriodId ? 'Guardar Cambios' : 'Aperturar Periodo'}</button>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    );
  };

  const ReportsView = () => {
    // Periodo sobre el que se generan los informes — independiente del periodo
    // activo global, para poder sacar informes de cualquier periodo (abierto o
    // cerrado) sin tener que cambiar el corte activo de toda la app.
    const [reportPeriodId, setReportPeriodId] = useState(activePeriodId);
    const [reportTxns, setReportTxns] = useState([]);
    const [loadingReportTxns, setLoadingReportTxns] = useState(false);
    const [allPeriodsSummary, setAllPeriodsSummary] = useState([]);

    const [isGeneratingExcel, setIsGeneratingExcel] = useState(false);
    const [showPdfRangeModal, setShowPdfRangeModal] = useState(false);
    const [pdfFrom, setPdfFrom] = useState('');
    const [pdfTo, setPdfTo] = useState('');
    const [isGeneratingPdf, setIsGeneratingPdf] = useState(false);
    const [isGeneratingSummary, setIsGeneratingSummary] = useState(false);
    const [isGeneratingLiquidacion, setIsGeneratingLiquidacion] = useState(false);

    const reportPeriod = periods.find(p => p.id === reportPeriodId);

    // El rango de fechas del PDF Detallado debe seguir al periodo elegido arriba —
    // si no, al cambiar de periodo sin volver a abrir el popup, el rango se quedaba
    // pegado al periodo anterior (se veía "Periodo: 2026-07" con "Rango: 2026-06...").
    useEffect(() => {
      if (reportPeriod) { setPdfFrom(reportPeriod.startDate); setPdfTo(reportPeriod.endDate); }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [reportPeriodId]);

    useEffect(() => {
      if (!reportPeriodId) { setReportTxns([]); return; }
      let cancelled = false;
      (async () => {
        setLoadingReportTxns(true);
        try {
          const rows = await window.SB.crudSelect('cm_transacciones', { eq: { period_id: reportPeriodId }, order: { col: 'date', asc: true } });
          if (!cancelled) setReportTxns(rows.map(txFromDb));
        } catch (err) {
          triggerToast(err.message || 'Error al cargar los movimientos del periodo elegido', 'error');
        } finally {
          if (!cancelled) setLoadingReportTxns(false);
        }
      })();
      return () => { cancelled = true; };
    }, [reportPeriodId]);

    // Suma liviana de gastos por periodo (solo period_id + type + amount_paid) para
    // la gráfica de evolución — independiente de qué periodo esté cargado en memoria.
    useEffect(() => {
      if (!periods.length) { setAllPeriodsSummary([]); return; }
      let cancelled = false;
      (async () => {
        try {
          const rows = await window.SB.crudSelect('cm_transacciones', { select: 'period_id, type, amount_paid' });
          if (cancelled) return;
          const byPeriod = {};
          periods.forEach(p => { byPeriod[p.id] = { month: p.month, gastos: 0 }; });
          rows.forEach(r => { if (r.type === 'expense' && byPeriod[r.period_id]) byPeriod[r.period_id].gastos += Number(r.amount_paid) || 0; });
          setAllPeriodsSummary(Object.values(byPeriod));
        } catch (err) { /* la gráfica simplemente queda vacía */ }
      })();
      return () => { cancelled = true; };
    }, [periods]);

    const reportExpenses = () => reportTxns.filter(t => t.type === 'expense').slice().sort((a, b) => (a.date || '').localeCompare(b.date || ''));

    // ---------------- Informe 1: Excel estilizado del periodo ----------------
    const generateExcelReport = async () => {
      if (!reportPeriod) { triggerToast('Elige un periodo primero', 'error'); return; }
      setIsGeneratingExcel(true);
      try {
        const ExcelJS = await ensureExcelJS();
        const wb = new ExcelJS.Workbook();
        const ws = wb.addWorksheet('Caja Menor', { views: [{ showGridLines: false }] });
        cmXlAutoWidth(ws, [6, 12, 16, 16, 26, 26, 14, 30, 13, 13, 13, 13, 16]);

        cmXlTitle(ws, 'A1:M1', 'ECOCOSECHA SAS  ·  DEPARTAMENTO DE TESORERÍA', { bg: CM_XC.dark, size: 14 });
        cmXlTitle(ws, 'A2:M2', 'INFORME DE CAJA MENOR', { bg: CM_XC.darkSoft, size: 11 });

        const respName = reportPeriod.responsibleName || userProfile.name || '';
        const respDoc = reportPeriod.responsibleDocument || userProfile.document || '';
        ws.getCell('A4').value = 'RESPONSABLE DE LA CAJA MENOR:'; ws.getCell('A4').font = { bold: true, size: 9, color: { argb: CM_XC.textDim } };
        ws.mergeCells('C4:F4'); ws.getCell('C4').value = respName; ws.getCell('C4').font = { bold: true };
        ws.getCell('H4').value = 'DOC. IDENTIDAD:'; ws.getCell('H4').font = { bold: true, size: 9, color: { argb: CM_XC.textDim } };
        ws.mergeCells('I4:J4'); ws.getCell('I4').value = respDoc;

        ws.getCell('A5').value = 'BASE DE CAJA MENOR:'; ws.getCell('A5').font = { bold: true, size: 9, color: { argb: CM_XC.textDim } };
        ws.mergeCells('C5:F5'); ws.getCell('C5').value = reportPeriod.baseFund || 0; ws.getCell('C5').numFmt = CM_MONEY_FMT; ws.getCell('C5').font = { bold: true };
        ws.getCell('H5').value = 'PERIODO:'; ws.getCell('H5').font = { bold: true, size: 9, color: { argb: CM_XC.textDim } };
        ws.mergeCells('I5:M5'); ws.getCell('I5').value = `${reportPeriod.month}  (${reportPeriod.startDate} al ${reportPeriod.endDate})`;

        const headerRow = 7;
        cmXlHeaderRow(ws, headerRow, ['Item', 'Fecha', 'No. Factura', 'NIT/Cédula', 'Beneficiario', 'Dirección', 'Teléfono', 'Descripción', 'Subtotal', 'Descuento', 'IVA', 'Total Factura', 'Saldo en Caja'], { right: [8, 9, 10, 11, 12] });

        let saldoRow = headerRow + 1;
        ws.mergeCells(`A${saldoRow}:H${saldoRow}`);
        ws.getCell(`A${saldoRow}`).value = 'SALDO INICIAL CAJA MENOR';
        ws.getCell(`A${saldoRow}`).font = { bold: true, italic: true };
        cmFillCell(ws.getCell(`A${saldoRow}`), CM_XC.band);
        ws.getCell(`M${saldoRow}`).value = reportPeriod.initialBalance || 0;
        ws.getCell(`M${saldoRow}`).numFmt = CM_MONEY_FMT;
        ws.getCell(`M${saldoRow}`).font = { bold: true };
        cmFillCell(ws.getCell(`M${saldoRow}`), CM_XC.band);
        ws.getRow(saldoRow).eachCell(c => { c.border = { bottom: { style: 'hair', color: { argb: CM_XC.border } } }; });

        let saldo = reportPeriod.initialBalance || 0;
        const expenses = reportExpenses();
        const rows = expenses.map((t, i) => {
          const provider = providers.find(p => p.id === t.providerId);
          const { totalInvoice } = calculateTransactionTotals(t);
          saldo -= totalInvoice;
          return [i + 1, t.date, t.invoiceNo, provider?.document || '', provider?.name || 'Varios', provider?.address || '', provider?.phone || '', t.description, t.subtotal, t.discount, t.iva, totalInvoice, saldo];
        });
        cmXlDataRows(ws, saldoRow + 1, rows, { money: [8, 9, 10, 11, 12], right: [8, 9, 10, 11, 12] });

        const totalsRow = saldoRow + 1 + rows.length;
        ws.mergeCells(`A${totalsRow}:H${totalsRow}`);
        ws.getCell(`A${totalsRow}`).value = 'TOTALES';
        ws.getCell(`A${totalsRow}`).font = { bold: true };
        [8, 9, 10, 11].forEach(ci => {
          const col = String.fromCharCode(65 + ci);
          const cell = ws.getCell(`${col}${totalsRow}`);
          cell.value = rows.reduce((s, r) => s + (r[ci] || 0), 0);
          cell.numFmt = CM_MONEY_FMT;
          cell.font = { bold: true };
        });
        ws.getCell(`M${totalsRow}`).value = saldo;
        ws.getCell(`M${totalsRow}`).numFmt = CM_MONEY_FMT;
        ws.getCell(`M${totalsRow}`).font = { bold: true };
        ws.getRow(totalsRow).eachCell(c => { cmFillCell(c, CM_XC.accent); c.font = { ...c.font, color: { argb: CM_XC.white } }; });

        const signRow = totalsRow + 3;
        const roles = [['ELABORÓ', 'elaboroBy'], ['REVISÓ', 'revisoBy'], ['CONTABILIZÓ', 'contabilizoBy'], ['APROBÓ', 'aproboBy']];
        const colStarts = ['A', 'D', 'G', 'J'];
        roles.forEach(([label, key], i) => {
          const col = colStarts[i];
          const nextCol = String.fromCharCode(col.charCodeAt(0) + 2);
          ws.mergeCells(`${col}${signRow}:${nextCol}${signRow}`);
          ws.getCell(`${col}${signRow}`).value = reportPeriod.status?.[key] || '_________________';
          ws.getCell(`${col}${signRow}`).alignment = { horizontal: 'center' };
          ws.getCell(`${col}${signRow}`).border = { top: { style: 'thin', color: { argb: CM_XC.border } } };
          ws.mergeCells(`${col}${signRow + 1}:${nextCol}${signRow + 1}`);
          ws.getCell(`${col}${signRow + 1}`).value = label;
          ws.getCell(`${col}${signRow + 1}`).font = { bold: true, size: 9 };
          ws.getCell(`${col}${signRow + 1}`).alignment = { horizontal: 'center' };
        });

        await cmDownloadWorkbook(wb, `CajaMenor_${reportPeriod.month}.xlsx`);
        triggerToast('Excel del periodo descargado ✓');
      } catch (err) {
        console.error(err);
        triggerToast(err.message || 'Error al generar el Excel', 'error');
      } finally {
        setIsGeneratingExcel(false);
      }
    };

    // ---------------- Informe 2: PDF detallado (rango de fechas, vertical, tamaño Carta) ----------------
    const openPdfRangeModal = () => {
      if (!reportPeriod) { triggerToast('Elige un periodo primero', 'error'); return; }
      setPdfFrom(reportPeriod.startDate); setPdfTo(reportPeriod.endDate);
      setShowPdfRangeModal(true);
    };
    const generateDetailedPdf = async () => {
      if (!pdfFrom || !pdfTo) { triggerToast('Elige el rango de fechas', 'error'); return; }
      setIsGeneratingPdf(true);
      try {
        // El rango de fechas es independiente del periodo elegido arriba (puede
        // cubrir otro mes distinto), así que se consulta directo por fecha en la
        // base — no se puede filtrar sobre reportTxns porque eso solo trae los
        // movimientos del periodo seleccionado, no los de la fecha pedida.
        const rangeRows = await window.SB.crudSelect('cm_transacciones', { gte: { date: pdfFrom }, lte: { date: pdfTo }, order: { col: 'date', asc: true } });
        const inRange = rangeRows.map(txFromDb).filter(t => t.type === 'expense');

        const jsPDF = await ensureJSPDF();
        const doc = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'letter' });
        const marginX = 36;
        const pageW = doc.internal.pageSize.getWidth();
        const pageH = doc.internal.pageSize.getHeight();
        const tableW = pageW - marginX * 2;
        const bottomLimit = pageH - 50;

        const logoW = await cmAddLogo(doc, marginX, 18, 24);
        const titleX = marginX + (logoW ? logoW + 12 : 0);
        doc.setFontSize(12); doc.setFont(undefined, 'bold');
        doc.text('ECOCOSECHA SAS · Relación de Gastos de Caja Menor', titleX, 32);
        doc.setFontSize(9); doc.setFont(undefined, 'normal');
        doc.text(`Periodo: ${reportPeriod.month}  ·  Rango: ${pdfFrom} al ${pdfTo}`, titleX, 46);

        doc.setFontSize(11); doc.setFont(undefined, 'bold');
        doc.text('1. Relación simple de gastos', marginX, 72);
        doc.autoTable({
          startY: 80,
          margin: { left: marginX, right: marginX },
          tableWidth: tableW,
          head: [['Fecha', 'Factura', 'Beneficiario', 'Categoría', 'Descripción', 'Total']],
          body: inRange.map(t => {
            const provider = providers.find(p => p.id === t.providerId);
            const category = categories.find(c => c.id === t.categoryId);
            const { totalInvoice } = calculateTransactionTotals(t);
            return [t.date, t.invoiceNo, provider?.name || 'Varios', category?.name || 'Sin categoría', t.description, formatCurrency(totalInvoice)];
          }),
          headStyles: { fillColor: [6, 95, 70], fontSize: 8 },
          styles: { fontSize: 7.5, cellPadding: 4, overflow: 'linebreak' },
          columnStyles: {
            0: { cellWidth: 52 }, 1: { cellWidth: 55 }, 2: { cellWidth: 95 }, 3: { cellWidth: 75 },
            4: { cellWidth: 'auto' }, 5: { halign: 'right', cellWidth: 60 },
          },
        });

        const grandTotal = inRange.reduce((s, t) => s + calculateTransactionTotals(t).totalInvoice, 0);
        // Sección 2 continúa en la misma página, justo después de la tabla anterior —
        // solo se salta de página cuando el contenido realmente no cabe, para no
        // dejar la mitad de la hoja en blanco.
        let y = doc.lastAutoTable.finalY + 26;
        if (y > bottomLimit - 60) { doc.addPage(); y = 40; }
        doc.setFontSize(11); doc.setFont(undefined, 'bold');
        doc.text('2. Gastos unificados por categoría', marginX, y);
        y += 18;

        const byCat = {};
        inRange.forEach(t => {
          const category = categories.find(c => c.id === t.categoryId);
          const name = category?.name || 'Sin categoría';
          (byCat[name] ||= []).push(t);
        });

        Object.entries(byCat).forEach(([catName, txs]) => {
          const subtotal = txs.reduce((s, t) => s + calculateTransactionTotals(t).totalInvoice, 0);
          if (y > bottomLimit - 40) { doc.addPage(); y = 40; }
          doc.setFontSize(9.5); doc.setFont(undefined, 'bold');
          doc.text(`${catName}  —  ${formatCurrency(subtotal)}`, marginX, y);
          doc.autoTable({
            startY: y + 6,
            margin: { left: marginX, right: marginX },
            tableWidth: tableW,
            head: [['Fecha', 'Factura', 'Beneficiario', 'Descripción', 'Total']],
            body: txs.map(t => {
              const provider = providers.find(p => p.id === t.providerId);
              const { totalInvoice } = calculateTransactionTotals(t);
              return [t.date, t.invoiceNo, provider?.name || 'Varios', t.description, formatCurrency(totalInvoice)];
            }),
            headStyles: { fillColor: [100, 116, 139], fontSize: 8 },
            styles: { fontSize: 7.5, cellPadding: 4 },
            columnStyles: {
              0: { cellWidth: 55 }, 1: { cellWidth: 60 }, 2: { cellWidth: 130 },
              3: { cellWidth: 'auto' }, 4: { halign: 'right', cellWidth: 65 },
            },
          });
          y = doc.lastAutoTable.finalY + 22;
        });

        if (y > bottomLimit - 140) { doc.addPage(); y = 40; }
        doc.setDrawColor(226, 232, 240); doc.line(marginX, y, pageW - marginX, y);
        y += 20;

        doc.setFontSize(10.5); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
        doc.text(`TOTAL GASTOS DEL RANGO (${pdfFrom} al ${pdfTo}): ${formatCurrency(grandTotal)}`, marginX, y);
        y += 26;

        // Saldo final de caja: usa el periodo COMPLETO (no solo el rango elegido
        // arriba), porque es el saldo real de la caja, no un corte parcial.
        const periodIncomes = reportTxns.filter(t => t.type === 'income').reduce((s, t) => s + calculateTransactionTotals(t).netPaid, 0);
        const periodExpensesTotal = reportExpenses().reduce((s, t) => s + calculateTransactionTotals(t).netPaid, 0);
        const saldoFinal = (reportPeriod.initialBalance || 0) + periodIncomes - periodExpensesTotal;

        doc.setFillColor(15, 23, 42);
        doc.roundedRect(marginX, y, pageW - marginX * 2, 60, 8, 8, 'F');
        doc.setFontSize(8.5); doc.setFont(undefined, 'bold'); doc.setTextColor(203, 213, 225);
        doc.text(`SALDO FINAL DE CAJA — PERIODO ${reportPeriod.month} COMPLETO`, marginX + 14, y + 22);
        doc.setFontSize(18); doc.setFont(undefined, 'bold'); doc.setTextColor(255, 255, 255);
        doc.text(formatCurrency(saldoFinal), marginX + 14, y + 46);

        doc.save(`CajaMenor_Detallado_${pdfFrom}_a_${pdfTo}.pdf`);
        triggerToast('PDF detallado descargado ✓');
        setShowPdfRangeModal(false);
      } catch (err) {
        console.error(err);
        triggerToast(err.message || 'Error al generar el PDF', 'error');
      } finally {
        setIsGeneratingPdf(false);
      }
    };

    // ---------------- Informe 3: PDF resumen ejecutivo (gráficas dibujadas, tamaño Carta) ----------------
    const generateExecutiveSummary = async () => {
      if (!reportPeriod) { triggerToast('Elige un periodo primero', 'error'); return; }
      setIsGeneratingSummary(true);
      try {
        const jsPDF = await ensureJSPDF();
        const doc = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'letter' });
        const expenses = reportExpenses();
        const total = expenses.reduce((s, t) => s + calculateTransactionTotals(t).netPaid, 0);
        const promedio = expenses.length ? total / expenses.length : 0;

        const logoW = await cmAddLogo(doc, 40, 16, 30);
        const titleX = 40 + (logoW ? logoW + 14 : 0);
        doc.setFontSize(16); doc.setFont(undefined, 'bold');
        doc.text('ECOCOSECHA SAS', titleX, 40);
        doc.setFontSize(12); doc.setFont(undefined, 'normal');
        doc.text(`Resumen Ejecutivo de Caja Menor · Periodo ${reportPeriod.month}`, titleX, 58);

        const kpis = [
          ['Saldo Inicial', formatCurrency(reportPeriod.initialBalance)],
          ['Total Gastado', formatCurrency(total)],
          ['Nº de Facturas', String(expenses.length)],
          ['Promedio por Factura', formatCurrency(promedio)],
        ];
        let kx = 40;
        kpis.forEach(([label, value]) => {
          doc.setFillColor(240, 253, 244);
          doc.roundedRect(kx, 84, 125, 52, 6, 6, 'F');
          doc.setFontSize(8); doc.setTextColor(100, 116, 139);
          doc.text(label.toUpperCase(), kx + 10, 102);
          doc.setFontSize(12); doc.setFont(undefined, 'bold'); doc.setTextColor(6, 95, 70);
          doc.text(value, kx + 10, 122);
          doc.setFont(undefined, 'normal'); doc.setTextColor(0, 0, 0);
          kx += 133;
        });

        // Barra horizontal genérica: dibuja un ranking con rect() + text()
        const drawBarChart = (title, dataPairs, startY) => {
          doc.setFontSize(12); doc.setFont(undefined, 'bold'); doc.setTextColor(0, 0, 0);
          doc.text(title, 40, startY);
          const maxVal = Math.max(...dataPairs.map(d => d[1]), 1);
          const barMaxWidth = 300;
          let y = startY + 20;
          dataPairs.forEach(([name, value]) => {
            const w = Math.max((value / maxVal) * barMaxWidth, 3);
            doc.setFontSize(9); doc.setFont(undefined, 'normal');
            doc.text(name.length > 28 ? name.slice(0, 28) + '…' : name, 40, y);
            doc.setFillColor(16, 185, 129);
            doc.rect(180, y - 9, w, 12, 'F');
            doc.setFontSize(8.5);
            doc.text(formatCurrency(value), 180 + w + 6, y);
            y += 20;
          });
          return y + 10;
        };

        const byCat = {};
        expenses.forEach(t => {
          const category = categories.find(c => c.id === t.categoryId);
          const name = category?.name || 'Sin categoría';
          byCat[name] = (byCat[name] || 0) + calculateTransactionTotals(t).netPaid;
        });
        const topCats = Object.entries(byCat).sort((a, b) => b[1] - a[1]).slice(0, 6);

        const byProv = {};
        expenses.forEach(t => {
          const provider = providers.find(p => p.id === t.providerId);
          const name = provider?.name || 'Varios';
          byProv[name] = (byProv[name] || 0) + calculateTransactionTotals(t).netPaid;
        });
        const topProv = Object.entries(byProv).sort((a, b) => b[1] - a[1]).slice(0, 6);

        let y = drawBarChart('Mayores Gastos por Categoría', topCats, 170);
        y = drawBarChart('Mayores Gastos por Beneficiario', topProv, y + 20);

        if (topCats.length) {
          const [topCatName, topCatValue] = topCats[0];
          const pct = total > 0 ? (topCatValue / total * 100).toFixed(0) : 0;
          doc.setFontSize(10); doc.setFont(undefined, 'italic'); doc.setTextColor(71, 85, 105);
          doc.text(`Hallazgo: "${topCatName}" concentra el ${pct}% del gasto total del periodo.`, 40, y + 10, { maxWidth: 500 });
        }

        doc.save(`CajaMenor_ResumenEjecutivo_${reportPeriod.month}.pdf`);
        triggerToast('Resumen ejecutivo descargado ✓');
      } catch (err) {
        console.error(err);
        triggerToast(err.message || 'Error al generar el resumen ejecutivo', 'error');
      } finally {
        setIsGeneratingSummary(false);
      }
    };

    // ---------------- Informe 4: Liquidación de Cierre (documento contable en grande, vertical, Carta) ----------------
    const generateLiquidacionPdf = async () => {
      if (!reportPeriod) { triggerToast('Elige un periodo primero', 'error'); return; }
      setIsGeneratingLiquidacion(true);
      try {
        const jsPDF = await ensureJSPDF();
        const doc = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'letter' });
        const pageW = doc.internal.pageSize.getWidth();
        const marginX = 50;

        const incomes = reportTxns.filter(t => t.type === 'income');
        const expenses = reportTxns.filter(t => t.type === 'expense');
        const totalIncomes = incomes.reduce((s, t) => s + calculateTransactionTotals(t).netPaid, 0);
        const totalExpenses = expenses.reduce((s, t) => s + calculateTransactionTotals(t).netPaid, 0);
        const saldoInicial = reportPeriod.initialBalance || 0;
        const saldoFinal = saldoInicial + totalIncomes - totalExpenses;

        const logoW = await cmAddLogo(doc, marginX, 44, 40);
        doc.setFontSize(11); doc.setFont(undefined, 'normal'); doc.setTextColor(100, 116, 139);
        doc.text('ECOCOSECHA SAS', pageW - marginX, 52, { align: 'right' });
        doc.setFontSize(18); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
        doc.text('LIQUIDACIÓN DE CIERRE', pageW - marginX, 74, { align: 'right' });
        doc.text('DE CAJA MENOR', pageW - marginX, 96, { align: 'right' });

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

        doc.setFontSize(9.5); doc.setFont(undefined, 'normal'); doc.setTextColor(71, 85, 105);
        const infoRows = [
          ['Periodo', reportPeriod.month],
          ['Rango de fechas', `${reportPeriod.startDate} al ${reportPeriod.endDate}`],
          ['Responsable', `${reportPeriod.responsibleName || '—'} (${reportPeriod.responsibleDocument || 'sin documento'})`],
          ['Estado', reportPeriod.isClosed ? 'CERRADO' : 'ABIERTO'],
        ];
        infoRows.forEach(([label, value]) => {
          doc.setFont(undefined, 'bold'); doc.text(`${label}:`, marginX, y);
          doc.setFont(undefined, 'normal'); doc.text(String(value), marginX + 120, y);
          y += 18;
        });

        y += 16;
        // Bloques grandes: saldo inicial / presupuesto / ingresos / gastos / saldo final
        const bigBox = (label, value, x, w, accentColor) => {
          doc.setDrawColor(226, 232, 240);
          doc.setFillColor(248, 250, 252);
          doc.roundedRect(x, y, w, 64, 8, 8, 'FD');
          doc.setFontSize(8.5); doc.setFont(undefined, 'bold'); doc.setTextColor(100, 116, 139);
          doc.text(label.toUpperCase(), x + 14, y + 22);
          doc.setFontSize(17); doc.setFont(undefined, 'bold'); doc.setTextColor(...accentColor);
          doc.text(formatCurrency(value), x + 14, y + 48);
        };
        const boxW = (pageW - marginX * 2 - 16) / 2;
        bigBox('Saldo Inicial del Periodo', saldoInicial, marginX, boxW, [15, 23, 42]);
        bigBox('Fondo Base / Presupuesto Asignado', reportPeriod.baseFund || 0, marginX + boxW + 16, boxW, [15, 23, 42]);
        y += 78;
        bigBox('Total Ingresos / Reintegros', totalIncomes, marginX, boxW, [5, 150, 105]);
        bigBox('Total Gastos', totalExpenses, marginX + boxW + 16, boxW, [190, 18, 60]);
        y += 78;

        doc.setDrawColor(15, 23, 42);
        doc.setFillColor(15, 23, 42);
        doc.roundedRect(marginX, y, pageW - marginX * 2, 74, 10, 10, 'F');
        doc.setFontSize(9.5); doc.setFont(undefined, 'bold'); doc.setTextColor(203, 213, 225);
        doc.text('SALDO FINAL ESPERADO (SISTEMA)', marginX + 16, y + 26);
        doc.setFontSize(22); doc.setFont(undefined, 'bold'); doc.setTextColor(255, 255, 255);
        doc.text(formatCurrency(saldoFinal), marginX + 16, y + 56);
        y += 92;

        if (reportPeriod.physicalCount !== null && reportPeriod.physicalCount !== undefined) {
          const diff = reportPeriod.physicalCount - saldoFinal;
          const okColor = Math.abs(diff) < 1 ? [5, 150, 105] : diff > 0 ? [8, 145, 178] : [190, 18, 60];
          doc.setFontSize(9); doc.setFont(undefined, 'normal'); doc.setTextColor(71, 85, 105);
          doc.text(`Conteo físico registrado: ${formatCurrency(reportPeriod.physicalCount)}${reportPeriod.physicalCountDate ? ' (' + reportPeriod.physicalCountDate + ')' : ''}`, marginX, y);
          doc.setFont(undefined, 'bold'); doc.setTextColor(...okColor);
          doc.text(Math.abs(diff) < 1 ? '✓ Cuadra exacto con el sistema' : (diff > 0 ? `Sobrante: ${formatCurrency(diff)}` : `Faltante: ${formatCurrency(Math.abs(diff))}`), marginX + 260, y);
          y += 24;
        } else {
          doc.setFontSize(9); doc.setFont(undefined, 'italic'); doc.setTextColor(148, 163, 184);
          doc.text('Este periodo aún no tiene un conteo físico registrado en Auditoría de Cierre.', marginX, y);
          y += 24;
        }

        doc.setFontSize(9.5); doc.setFont(undefined, 'normal'); doc.setTextColor(71, 85, 105);
        doc.text(`Cantidad de movimientos: ${reportTxns.length}  (${incomes.length} ingreso${incomes.length === 1 ? '' : 's'} · ${expenses.length} gasto${expenses.length === 1 ? '' : 's'})`, marginX, y);
        y += 40;

        const roles = [['ELABORÓ', 'elaboroBy'], ['REVISÓ', 'revisoBy'], ['CONTABILIZÓ', 'contabilizoBy'], ['APROBÓ', 'aproboBy']];
        const colW = (pageW - marginX * 2) / 4;
        doc.setDrawColor(15, 23, 42);
        roles.forEach(([label, key], i) => {
          const x = marginX + i * colW;
          doc.line(x, y, x + colW - 20, y);
          doc.setFontSize(9); doc.setFont(undefined, 'bold'); doc.setTextColor(15, 23, 42);
          doc.text(reportPeriod.status?.[key] || '________________', x, y + 14, { maxWidth: colW - 20 });
          doc.setFontSize(7.5); doc.setFont(undefined, 'normal'); doc.setTextColor(148, 163, 184);
          doc.text(label, x, y + 26);
        });

        doc.save(`CajaMenor_Liquidacion_${reportPeriod.month}.pdf`);
        triggerToast('Liquidación de cierre descargada ✓');
      } catch (err) {
        console.error(err);
        triggerToast(err.message || 'Error al generar la liquidación', 'error');
      } finally {
        setIsGeneratingLiquidacion(false);
      }
    };

    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Reportes y Exportación Oficial</h1>
          <p className="text-slate-500 text-sm">Genera informes listos para archivar o imprimir — todos descargan directo, sin vista previa</p>
        </div>

        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-col sm:flex-row sm:items-center gap-3">
          <label className="text-xs font-bold text-slate-500 uppercase tracking-wide">Periodo para los informes:</label>
          <select className="flex-1 max-w-xs p-2.5 border border-slate-300 rounded-lg text-sm bg-white font-semibold" value={reportPeriodId} onChange={e => setReportPeriodId(e.target.value)}>
            {periods.length === 0 && <option value="">Sin periodos aún</option>}
            {periods.slice().reverse().map(p => (
              <option key={p.id} value={p.id}>{p.month} ({p.isClosed ? 'Cerrado' : 'Abierto'})</option>
            ))}
          </select>
          {loadingReportTxns && <span className="text-xs text-slate-400">Cargando movimientos…</span>}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
            <div>
              <div className="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center mb-4">
                <FileBarChart className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-bold text-slate-800 mb-2">Excel del Periodo</h3>
              <p className="text-slate-500 text-sm mb-6">Informe oficial con el formato de tesorería: encabezado, saldo corriendo, totales y firmas ELABORÓ/REVISÓ/CONTABILIZÓ/APROBÓ.</p>
            </div>
            <button onClick={generateExcelReport} disabled={isGeneratingExcel} className="w-full bg-emerald-600 hover:bg-emerald-700 disabled:opacity-60 text-white py-3 rounded-lg font-bold text-sm flex justify-center items-center">
              <Download className="h-4 w-4 mr-2" /> {isGeneratingExcel ? 'Generando...' : 'Descargar Excel (.xlsx)'}
            </button>
          </div>

          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
            <div>
              <div className="w-12 h-12 bg-sky-100 text-sky-600 rounded-lg flex items-center justify-center mb-4">
                <FileText className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-bold text-slate-800 mb-2">PDF Detallado</h3>
              <p className="text-slate-500 text-sm mb-6">Elige un rango de fechas y descarga un PDF vertical (tamaño Carta) con la relación simple de gastos y, en una segunda sección, unificado por categoría.</p>
            </div>
            <button onClick={openPdfRangeModal} className="w-full bg-sky-600 hover:bg-sky-700 text-white py-3 rounded-lg font-bold text-sm flex justify-center items-center">
              <FileText className="h-4 w-4 mr-2" /> Elegir Rango y Generar PDF
            </button>
          </div>

          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
            <div>
              <div className="w-12 h-12 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center mb-4">
                <PieChartIcon className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-bold text-slate-800 mb-2">Resumen Ejecutivo</h3>
              <p className="text-slate-500 text-sm mb-6">Una página (Carta) con los KPIs del periodo y gráficas de tus mayores gastos por categoría y por beneficiario.</p>
            </div>
            <button onClick={generateExecutiveSummary} disabled={isGeneratingSummary} className="w-full bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white py-3 rounded-lg font-bold text-sm flex justify-center items-center">
              <Download className="h-4 w-4 mr-2" /> {isGeneratingSummary ? 'Generando...' : 'Descargar PDF'}
            </button>
          </div>

          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between">
            <div>
              <div className="w-12 h-12 bg-slate-800 text-white rounded-lg flex items-center justify-center mb-4">
                <ShieldCheck className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-bold text-slate-800 mb-2">Liquidación de Cierre</h3>
              <p className="text-slate-500 text-sm mb-6">El documento oficial del cierre: en cuánto inició, cuánto entró y salió, y en cuánto debió quedar la caja, con firmas de aprobación.</p>
            </div>
            <button onClick={generateLiquidacionPdf} disabled={isGeneratingLiquidacion} className="w-full bg-slate-900 hover:bg-slate-800 disabled:opacity-60 text-white py-3 rounded-lg font-bold text-sm flex justify-center items-center">
              <Download className="h-4 w-4 mr-2" /> {isGeneratingLiquidacion ? 'Generando...' : 'Descargar PDF'}
            </button>
          </div>
        </div>

        {showPdfRangeModal && (
          <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 flex items-center"><FileText className="h-4 w-4 mr-2" /> PDF Detallado — Rango de Fechas</h3>
                <button onClick={() => setShowPdfRangeModal(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
              </div>
              <div 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">Desde</label>
                    <input type="date" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={pdfFrom} onChange={e => setPdfFrom(e.target.value)} /></div>
                  <div><label className="block text-xs font-semibold text-slate-700 mb-1">Hasta</label>
                    <input type="date" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={pdfTo} onChange={e => setPdfTo(e.target.value)} /></div>
                </div>
                <p className="text-[11px] text-slate-400">Incluye la relación simple de gastos y, en una segunda sección, el mismo detalle unificado por categoría.</p>
                <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                  <button type="button" onClick={() => setShowPdfRangeModal(false)} className="px-4 py-2 border rounded-lg text-slate-600 text-sm">Cancelar</button>
                  <button onClick={generateDetailedPdf} disabled={isGeneratingPdf} className="px-4 py-2 bg-sky-600 disabled:opacity-60 text-white rounded-lg text-sm font-bold hover:bg-sky-700">{isGeneratingPdf ? 'Generando...' : 'Generar PDF'}</button>
                </div>
              </div>
            </div>
          </div>
        )}

        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
          <h3 className="text-base font-bold text-slate-800">Evolución de Gastos por Periodo</h3>
          <div className="h-72">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={allPeriodsSummary}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
                <XAxis dataKey="month" tick={{ fontSize: 12, fill: '#64748B' }} />
                <YAxis tickFormatter={v => `$${v / 1000}k`} tick={{ fontSize: 12, fill: '#64748B' }} />
                <RechartsTooltip formatter={v => formatCurrency(v)} />
                <Bar dataKey="gastos" fill="#0D9488" radius={[6, 6, 0, 0]} barSize={40} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
    );
  };

  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-emerald-600 border-t-transparent rounded-full animate-spin mx-auto"></div>
          <p className="text-slate-500 text-sm">Cargando Caja Menor…</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-emerald-600" />
              <span>Corte Activo: <strong className="text-slate-900 font-bold">{activePeriod?.month || 'Ninguno'}</strong></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-emerald-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 === 'expenses' && <ExpensesView />}
            {activeTab === 'incomes' && <IncomesView />}
            {activeTab === 'providers' && <ProvidersView />}
            {activeTab === 'categories' && <CategoriesView />}
            {activeTab === 'reports' && <ReportsView />}
            {activeTab === 'audit' && <AuditView />}
            {activeTab === 'settings' && <SettingsView />}
          </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-emerald-500/20 outline-none transition-all" 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">Documento de Identidad *</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-emerald-500/20 outline-none transition-all" value={userProfile.document} onChange={e => setUserProfile({ ...userProfile, document: 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-emerald-500/20 outline-none transition-all" 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 transition-colors">Cancelar</button>
                <button type="submit" className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-lg shadow-sm transition-colors">Guardar Perfil</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {showPrefixModal && (
        <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"><Hash className="h-4 w-4 mr-2" /> Nuevo Prefijo</h3>
              <button onClick={() => setShowPrefixModal(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
            </div>
            <form onSubmit={handleAddPrefix} className="p-6 space-y-4">
              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Prefijo *</label>
                <input type="text" required autoFocus placeholder="Ej: ECO-ADM-" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" value={newPrefixText} onChange={e => setNewPrefixText(e.target.value)} />
                <p className="text-[11px] text-slate-400 mt-1">Se antepone al número que escribas al registrar un gasto o ingreso (ej. "ECO-ADM-" + "45" = "ECO-ADM-45").</p>
              </div>
              <div className="flex justify-end space-x-3 pt-4 border-t border-slate-200">
                <button type="button" onClick={() => setShowPrefixModal(false)} className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold rounded-lg transition-colors">Cancelar</button>
                <button type="submit" className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-lg shadow-sm transition-colors">Guardar Prefijo</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-emerald-900 text-white border-emerald-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>
              <p className="text-[11px] text-slate-400 mt-2">Esta acción removerá el registro del balance de forma inmediata.</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>
      )}

      <style dangerouslySetInnerHTML={{
        __html: `
        @media print {
          body * { visibility: hidden; }
          .bg-white.min-h-screen.text-slate-900 { visibility: visible; position: absolute; left: 0; top: 0; width: 100%; }
          .bg-white.min-h-screen.text-slate-900 * { visibility: visible; }
        }
      `}} />
    </div>
  );
}

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