import { useState } from "react";
import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Area, AreaChart, ComposedChart } from "recharts";

const DATA = {
  monthly_prov: {
    Enero: { "LA RIOJA": 4490533.92, "SANTIAGO DEL ESTERO": 5348797.29, CATAMARCA: 6855118.3, total: 16694449.51, lineas: 196 },
    Febrero: { "LA RIOJA": 11460163.87, "SANTIAGO DEL ESTERO": 6443328.62, CATAMARCA: 13989420.92, total: 31892913.41, lineas: 305 },
    Marzo: { "LA RIOJA": 14565640.9, "SANTIAGO DEL ESTERO": 7747119.29, CATAMARCA: 13610076.8, total: 35922836.99, lineas: 373 },
    Abril: { "LA RIOJA": 17463974.38, "SANTIAGO DEL ESTERO": 10935618.77, CATAMARCA: 13590755.36, total: 41990348.51, lineas: 322 },
  },
  monthly_rubro: {
    Enero: { SALARIOS: 6794092.92, "GASTOS DE PERSONAL": 4037795.92, "COMBUSTIBLES Y LUBRICANTES": 1288329.02, "OTROS GASTOS FIJOS": 1036426, "MOVILIDAD Y VIÁTICOS": 962137.8, "REPARACIONES Y MANTENIMIENTO": 859815, "SERVICIOS BÁSICOS": 687333.73, ALQUILERES: 594230 },
    Febrero: { SALARIOS: 9747542.44, "GASTOS DE PERSONAL": 4156123.01, "COMBUSTIBLES Y LUBRICANTES": 1787381.26, "OTROS GASTOS FIJOS": 6193322.04, "MOVILIDAD Y VIÁTICOS": 2079745.2, "REPARACIONES Y MANTENIMIENTO": 1448736.36, "SERVICIOS BÁSICOS": 1741154.9, ALQUILERES: 3949561 },
    Marzo: { SALARIOS: 8710459.32, "GASTOS DE PERSONAL": 4828811.65, "COMBUSTIBLES Y LUBRICANTES": 2945757.57, "OTROS GASTOS FIJOS": 8226660, "MOVILIDAD Y VIÁTICOS": 2509728.32, "REPARACIONES Y MANTENIMIENTO": 2314741.98, "SERVICIOS BÁSICOS": 862224.15, ALQUILERES: 4986754 },
    Abril: { SALARIOS: 7661785.43, "GASTOS DE PERSONAL": 5784478.84, "COMBUSTIBLES Y LUBRICANTES": 2458409.08, "OTROS GASTOS FIJOS": 13615638.94, "MOVILIDAD Y VIÁTICOS": 1985145, "REPARACIONES Y MANTENIMIENTO": 1966271.56, "SERVICIOS BÁSICOS": 927081.17, ALQUILERES: 5158604 },
  },
  total_cuatri: 126500548.42,
  total_lineas: 1196,
};

const MESES = ["Enero", "Febrero", "Marzo", "Abril"];
const PROVS = ["LA RIOJA", "SANTIAGO DEL ESTERO", "CATAMARCA"];
const PROV_COLORS = { "LA RIOJA": "#2E7D32", "SANTIAGO DEL ESTERO": "#1565C0", CATAMARCA: "#C62828" };
const RUBRO_COLORS = {
  SALARIOS: "#F9A825", "GASTOS DE PERSONAL": "#42A5F5", "COMBUSTIBLES Y LUBRICANTES": "#EF6C00",
  "OTROS GASTOS FIJOS": "#7E57C2", "MOVILIDAD Y VIÁTICOS": "#66BB6A", "REPARACIONES Y MANTENIMIENTO": "#EF5350",
  "SERVICIOS BÁSICOS": "#26A69A", ALQUILERES: "#FDD835",
};

const fmt = (v) => `$${(v / 1e6).toFixed(1)}M`;
const fmtFull = (v) => new Intl.NumberFormat("es-AR", { style: "currency", currency: "ARS", maximumFractionDigits: 0 }).format(v);
const pct = (v, t) => `${((v / t) * 100).toFixed(1)}%`;

const CustomTooltip = ({ active, payload, label }) => {
  if (!active || !payload) return null;
  return (
    <div style={{ background: "rgba(15,15,20,0.95)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 8, padding: "10px 14px", backdropFilter: "blur(10px)" }}>
      <p style={{ color: "#ccc", fontSize: 11, margin: 0, marginBottom: 6, letterSpacing: 1 }}>{label}</p>
      {payload.map((p, i) => (
        <p key={i} style={{ color: p.color || p.fill, fontSize: 13, margin: "3px 0", fontWeight: 600 }}>
          {p.name}: {fmtFull(p.value)}
        </p>
      ))}
    </div>
  );
};

export default function Dashboard() {
  const [view, setView] = useState("provincia");
  const [selectedProv, setSelectedProv] = useState(null);

  const monthlyData = MESES.map((m) => ({
    mes: m.substring(0, 3),
    mesFull: m,
    ...DATA.monthly_prov[m],
    total: DATA.monthly_prov[m].total,
    lineas: DATA.monthly_prov[m].lineas,
  }));

  const rubroData = MESES.map((m) => ({ mes: m.substring(0, 3), ...DATA.monthly_rubro[m] }));
  const RUBROS = Object.keys(DATA.monthly_rubro.Enero);

  const pieData = PROVS.map((p) => ({
    name: p,
    value: MESES.reduce((s, m) => s + DATA.monthly_prov[m][p], 0),
  }));

  const provDetail = selectedProv
    ? MESES.map((m) => ({
        mes: m.substring(0, 3),
        mesFull: m,
        total: DATA.monthly_prov[m][selectedProv],
        ...Object.fromEntries(RUBROS.map((r) => [r, DATA.monthly_rubro[m][r] || 0])),
      }))
    : null;

  const varEneAbr = ((DATA.monthly_prov.Abril.total - DATA.monthly_prov.Enero.total) / DATA.monthly_prov.Enero.total * 100).toFixed(0);

  return (
    <div style={{ background: "linear-gradient(135deg, #0a0a0f 0%, #12121a 50%, #0d0d15 100%)", minHeight: "100vh", color: "#e8e8ec", fontFamily: "'DM Sans', 'Segoe UI', sans-serif", padding: "24px 20px" }}>
      <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@700&display=swap" rel="stylesheet" />

      {/* Header */}
      <div style={{ textAlign: "center", marginBottom: 32 }}>
        <h1 style={{ fontFamily: "'Space Mono', monospace", fontSize: 28, fontWeight: 700, margin: 0, background: "linear-gradient(90deg, #66BB6A, #42A5F5, #EF5350)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
          GASTOS DE CAJA 2026
        </h1>
        <p style={{ color: "#888", fontSize: 13, margin: "6px 0 0", letterSpacing: 2 }}>CHESS ERP · ENERO — ABRIL</p>
      </div>

      {/* KPIs */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 28 }}>
        {[
          { label: "Total Cuatrimestre", value: fmt(DATA.total_cuatri), sub: fmtFull(DATA.total_cuatri), color: "#66BB6A" },
          { label: "Líneas Procesadas", value: DATA.total_lineas.toLocaleString(), sub: `${Math.round(DATA.total_lineas / 4)}/mes promedio`, color: "#42A5F5" },
          { label: "Promedio Mensual", value: fmt(DATA.total_cuatri / 4), sub: fmtFull(DATA.total_cuatri / 4), color: "#FFA726" },
          { label: "Crecimiento Ene→Abr", value: `+${varEneAbr}%`, sub: `${fmt(DATA.monthly_prov.Enero.total)} → ${fmt(DATA.monthly_prov.Abril.total)}`, color: "#EF5350" },
        ].map((kpi, i) => (
          <div key={i} style={{ background: "rgba(255,255,255,0.04)", borderRadius: 12, padding: "16px 14px", border: `1px solid rgba(255,255,255,0.06)`, position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: kpi.color }} />
            <p style={{ fontSize: 10, color: "#888", margin: 0, letterSpacing: 1.5, textTransform: "uppercase" }}>{kpi.label}</p>
            <p style={{ fontSize: 26, fontWeight: 700, margin: "6px 0 2px", color: kpi.color, fontFamily: "'Space Mono', monospace" }}>{kpi.value}</p>
            <p style={{ fontSize: 11, color: "#666", margin: 0 }}>{kpi.sub}</p>
          </div>
        ))}
      </div>

      {/* View Toggle */}
      <div style={{ display: "flex", gap: 8, marginBottom: 20, justifyContent: "center" }}>
        {[
          { key: "provincia", label: "🌎 Por Provincia" },
          { key: "rubro", label: "📊 Por Rubro" },
          { key: "tabla", label: "📋 Tabla Cruzada" },
        ].map((v) => (
          <button key={v.key} onClick={() => { setView(v.key); setSelectedProv(null); }}
            style={{ padding: "8px 20px", borderRadius: 8, border: view === v.key ? "1px solid rgba(255,255,255,0.3)" : "1px solid rgba(255,255,255,0.08)",
              background: view === v.key ? "rgba(255,255,255,0.1)" : "rgba(255,255,255,0.02)", color: view === v.key ? "#fff" : "#888",
              cursor: "pointer", fontSize: 13, fontWeight: 600, transition: "all 0.2s" }}>
            {v.label}
          </button>
        ))}
      </div>

      {/* VIEW: PROVINCIA */}
      {view === "provincia" && (
        <div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 20 }}>
            {/* Bar chart */}
            <div style={{ background: "rgba(255,255,255,0.03)", borderRadius: 14, padding: 20, border: "1px solid rgba(255,255,255,0.06)" }}>
              <h3 style={{ fontSize: 13, color: "#aaa", margin: "0 0 16px", letterSpacing: 1 }}>EVOLUCIÓN MENSUAL POR PROVINCIA</h3>
              <ResponsiveContainer width="100%" height={280}>
                <BarChart data={monthlyData} barCategoryGap="20%">
                  <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                  <XAxis dataKey="mes" tick={{ fill: "#888", fontSize: 11 }} />
                  <YAxis tickFormatter={(v) => fmt(v)} tick={{ fill: "#888", fontSize: 10 }} />
                  <Tooltip content={<CustomTooltip />} />
                  {PROVS.map((p) => (<Bar key={p} dataKey={p} fill={PROV_COLORS[p]} radius={[3, 3, 0, 0]} name={p} cursor="pointer" onClick={() => setSelectedProv(p)} />))}
                </BarChart>
              </ResponsiveContainer>
            </div>

            {/* Pie + trend */}
            <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 16 }}>
              <div style={{ background: "rgba(255,255,255,0.03)", borderRadius: 14, padding: "14px 20px", border: "1px solid rgba(255,255,255,0.06)" }}>
                <h3 style={{ fontSize: 13, color: "#aaa", margin: "0 0 8px", letterSpacing: 1 }}>DISTRIBUCIÓN ACUMULADA</h3>
                <ResponsiveContainer width="100%" height={120}>
                  <PieChart>
                    <Pie data={pieData} cx="50%" cy="50%" innerRadius={30} outerRadius={52} dataKey="value" label={({ name, percent }) => `${name.split(" ")[0]} ${(percent * 100).toFixed(0)}%`}
                      labelLine={false} style={{ fontSize: 9 }}>
                      {pieData.map((_, i) => (<Cell key={i} fill={Object.values(PROV_COLORS)[i]} />))}
                    </Pie>
                    <Tooltip formatter={(v) => fmtFull(v)} />
                  </PieChart>
                </ResponsiveContainer>
              </div>
              <div style={{ background: "rgba(255,255,255,0.03)", borderRadius: 14, padding: "14px 20px", border: "1px solid rgba(255,255,255,0.06)" }}>
                <h3 style={{ fontSize: 13, color: "#aaa", margin: "0 0 8px", letterSpacing: 1 }}>TENDENCIA TOTAL</h3>
                <ResponsiveContainer width="100%" height={120}>
                  <AreaChart data={monthlyData}>
                    <defs>
                      <linearGradient id="gradTotal" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#66BB6A" stopOpacity={0.3} />
                        <stop offset="100%" stopColor="#66BB6A" stopOpacity={0} />
                      </linearGradient>
                    </defs>
                    <XAxis dataKey="mes" tick={{ fill: "#888", fontSize: 10 }} />
                    <YAxis tickFormatter={(v) => fmt(v)} tick={{ fill: "#888", fontSize: 9 }} />
                    <Tooltip content={<CustomTooltip />} />
                    <Area type="monotone" dataKey="total" stroke="#66BB6A" fill="url(#gradTotal)" strokeWidth={2} name="Total" />
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>

          {/* Province cards */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
            {PROVS.map((prov) => {
              const total = MESES.reduce((s, m) => s + DATA.monthly_prov[m][prov], 0);
              const ene = DATA.monthly_prov.Enero[prov];
              const abr = DATA.monthly_prov.Abril[prov];
              const growth = ((abr - ene) / ene * 100).toFixed(0);
              const selected = selectedProv === prov;
              return (
                <div key={prov} onClick={() => setSelectedProv(selected ? null : prov)}
                  style={{ background: selected ? `${PROV_COLORS[prov]}18` : "rgba(255,255,255,0.03)", borderRadius: 14,
                    padding: 18, border: `1px solid ${selected ? PROV_COLORS[prov] + "60" : "rgba(255,255,255,0.06)"}`,
                    cursor: "pointer", transition: "all 0.2s" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                    <span style={{ fontSize: 13, fontWeight: 700, color: PROV_COLORS[prov] }}>📍 {prov}</span>
                    <span style={{ fontSize: 11, color: Number(growth) > 0 ? "#66BB6A" : "#EF5350", fontWeight: 600 }}>
                      {Number(growth) > 0 ? "▲" : "▼"} {growth}%
                    </span>
                  </div>
                  <p style={{ fontSize: 22, fontWeight: 700, margin: "0 0 4px", fontFamily: "'Space Mono', monospace" }}>{fmt(total)}</p>
                  <p style={{ fontSize: 11, color: "#888", margin: 0 }}>{pct(total, DATA.total_cuatri)} del total · {fmtFull(total)}</p>
                  <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
                    {MESES.map((m) => {
                      const v = DATA.monthly_prov[m][prov];
                      const maxV = Math.max(...MESES.map((mm) => DATA.monthly_prov[mm][prov]));
                      return (
                        <div key={m} style={{ flex: 1, textAlign: "center" }}>
                          <div style={{ height: 40, display: "flex", alignItems: "flex-end", justifyContent: "center" }}>
                            <div style={{ width: "80%", height: `${(v / maxV) * 100}%`, background: PROV_COLORS[prov], borderRadius: "3px 3px 0 0", opacity: 0.7, minHeight: 4 }} />
                          </div>
                          <p style={{ fontSize: 9, color: "#888", margin: "4px 0 0" }}>{m.substring(0, 3)}</p>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>

          {/* Drill-down */}
          {selectedProv && (
            <div style={{ marginTop: 20, background: `${PROV_COLORS[selectedProv]}08`, borderRadius: 14, padding: 20, border: `1px solid ${PROV_COLORS[selectedProv]}30` }}>
              <h3 style={{ fontSize: 14, color: PROV_COLORS[selectedProv], margin: "0 0 12px" }}>📊 Detalle: {selectedProv}</h3>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
                {MESES.map((m) => (
                  <div key={m} style={{ background: "rgba(0,0,0,0.2)", borderRadius: 10, padding: 14 }}>
                    <p style={{ fontSize: 11, color: "#888", margin: 0 }}>{m}</p>
                    <p style={{ fontSize: 18, fontWeight: 700, margin: "4px 0", fontFamily: "'Space Mono', monospace", color: PROV_COLORS[selectedProv] }}>
                      {fmt(DATA.monthly_prov[m][selectedProv])}
                    </p>
                    <p style={{ fontSize: 10, color: "#666", margin: 0 }}>{pct(DATA.monthly_prov[m][selectedProv], DATA.monthly_prov[m].total)} del mes</p>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* VIEW: RUBRO */}
      {view === "rubro" && (
        <div>
          <div style={{ background: "rgba(255,255,255,0.03)", borderRadius: 14, padding: 20, border: "1px solid rgba(255,255,255,0.06)", marginBottom: 20 }}>
            <h3 style={{ fontSize: 13, color: "#aaa", margin: "0 0 16px", letterSpacing: 1 }}>EVOLUCIÓN POR RUBRO (APILADO)</h3>
            <ResponsiveContainer width="100%" height={340}>
              <BarChart data={rubroData}>
                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                <XAxis dataKey="mes" tick={{ fill: "#888", fontSize: 11 }} />
                <YAxis tickFormatter={(v) => fmt(v)} tick={{ fill: "#888", fontSize: 10 }} />
                <Tooltip content={<CustomTooltip />} />
                <Legend wrapperStyle={{ fontSize: 10 }} />
                {RUBROS.map((r) => (<Bar key={r} dataKey={r} stackId="a" fill={RUBRO_COLORS[r] || "#999"} name={r.length > 22 ? r.substring(0, 20) + "…" : r} />))}
              </BarChart>
            </ResponsiveContainer>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {RUBROS.map((rubro) => {
              const total = MESES.reduce((s, m) => s + (DATA.monthly_rubro[m][rubro] || 0), 0);
              return (
                <div key={rubro} style={{ background: "rgba(255,255,255,0.03)", borderRadius: 12, padding: 14, border: "1px solid rgba(255,255,255,0.06)" }}>
                  <div style={{ width: 8, height: 8, borderRadius: "50%", background: RUBRO_COLORS[rubro], marginBottom: 8 }} />
                  <p style={{ fontSize: 10, color: "#888", margin: 0, lineHeight: 1.3 }}>{rubro}</p>
                  <p style={{ fontSize: 18, fontWeight: 700, margin: "4px 0 2px", fontFamily: "'Space Mono', monospace" }}>{fmt(total)}</p>
                  <p style={{ fontSize: 10, color: "#666", margin: 0 }}>{pct(total, DATA.total_cuatri)}</p>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* VIEW: TABLA */}
      {view === "tabla" && (
        <div style={{ background: "rgba(255,255,255,0.03)", borderRadius: 14, padding: 20, border: "1px solid rgba(255,255,255,0.06)", overflowX: "auto" }}>
          <h3 style={{ fontSize: 13, color: "#aaa", margin: "0 0 16px", letterSpacing: 1 }}>MATRIZ PROVINCIA × MES</h3>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
            <thead>
              <tr>
                <th style={{ textAlign: "left", padding: "10px 12px", borderBottom: "1px solid rgba(255,255,255,0.1)", color: "#888" }}>Provincia</th>
                {MESES.map((m) => (<th key={m} style={{ textAlign: "right", padding: "10px 12px", borderBottom: "1px solid rgba(255,255,255,0.1)", color: "#888" }}>{m}</th>))}
                <th style={{ textAlign: "right", padding: "10px 12px", borderBottom: "1px solid rgba(255,255,255,0.1)", color: "#fff", fontWeight: 700 }}>TOTAL</th>
                <th style={{ textAlign: "right", padding: "10px 12px", borderBottom: "1px solid rgba(255,255,255,0.1)", color: "#888" }}>%</th>
              </tr>
            </thead>
            <tbody>
              {PROVS.map((prov) => {
                const total = MESES.reduce((s, m) => s + DATA.monthly_prov[m][prov], 0);
                return (
                  <tr key={prov} style={{ borderBottom: "1px solid rgba(255,255,255,0.04)" }}>
                    <td style={{ padding: "10px 12px", fontWeight: 600, color: PROV_COLORS[prov] }}>📍 {prov}</td>
                    {MESES.map((m) => (<td key={m} style={{ textAlign: "right", padding: "10px 12px", fontFamily: "'Space Mono', monospace", fontSize: 11 }}>{fmtFull(DATA.monthly_prov[m][prov])}</td>))}
                    <td style={{ textAlign: "right", padding: "10px 12px", fontWeight: 700, fontFamily: "'Space Mono', monospace", fontSize: 11, color: PROV_COLORS[prov] }}>{fmtFull(total)}</td>
                    <td style={{ textAlign: "right", padding: "10px 12px", color: "#888" }}>{pct(total, DATA.total_cuatri)}</td>
                  </tr>
                );
              })}
              <tr style={{ borderTop: "2px solid rgba(255,255,255,0.15)" }}>
                <td style={{ padding: "10px 12px", fontWeight: 700 }}>TOTAL</td>
                {MESES.map((m) => (<td key={m} style={{ textAlign: "right", padding: "10px 12px", fontWeight: 700, fontFamily: "'Space Mono', monospace", fontSize: 11 }}>{fmtFull(DATA.monthly_prov[m].total)}</td>))}
                <td style={{ textAlign: "right", padding: "10px 12px", fontWeight: 700, fontFamily: "'Space Mono', monospace", fontSize: 12, color: "#66BB6A" }}>{fmtFull(DATA.total_cuatri)}</td>
                <td style={{ textAlign: "right", padding: "10px 12px", fontWeight: 700 }}>100%</td>
              </tr>
            </tbody>
          </table>

          <h3 style={{ fontSize: 13, color: "#aaa", margin: "28px 0 16px", letterSpacing: 1 }}>MATRIZ RUBRO × MES</h3>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
            <thead>
              <tr>
                <th style={{ textAlign: "left", padding: "10px 12px", borderBottom: "1px solid rgba(255,255,255,0.1)", color: "#888" }}>Rubro</th>
                {MESES.map((m) => (<th key={m} style={{ textAlign: "right", padding: "10px 12px", borderBottom: "1px solid rgba(255,255,255,0.1)", color: "#888" }}>{m}</th>))}
                <th style={{ textAlign: "right", padding: "10px 12px", borderBottom: "1px solid rgba(255,255,255,0.1)", color: "#fff" }}>TOTAL</th>
              </tr>
            </thead>
            <tbody>
              {RUBROS.map((rubro) => {
                const total = MESES.reduce((s, m) => s + (DATA.monthly_rubro[m][rubro] || 0), 0);
                return (
                  <tr key={rubro} style={{ borderBottom: "1px solid rgba(255,255,255,0.04)" }}>
                    <td style={{ padding: "10px 12px", fontSize: 11 }}>
                      <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: RUBRO_COLORS[rubro], marginRight: 8 }} />
                      {rubro}
                    </td>
                    {MESES.map((m) => (<td key={m} style={{ textAlign: "right", padding: "10px 12px", fontFamily: "'Space Mono', monospace", fontSize: 10 }}>{fmtFull(DATA.monthly_rubro[m][rubro] || 0)}</td>))}
                    <td style={{ textAlign: "right", padding: "10px 12px", fontWeight: 600, fontFamily: "'Space Mono', monospace", fontSize: 11 }}>{fmtFull(total)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      <p style={{ textAlign: "center", fontSize: 10, color: "#444", marginTop: 24 }}>
        Dashboard generado desde datos crudos CHESS ERP · Enero–Abril 2026 · Total: {fmtFull(DATA.total_cuatri)}
      </p>
    </div>
  );
}