// ROCA GOLF — Reportes con datos reales de la API

const MES_LABELS = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
const MESES_FULL = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
const REPORT_PALETTE = ["#1a4d2e","#c9a961","#2d6a44","#a88838","#4a8a63","#0d2818","#7c9885","#b22222"];
// Colores de desempeño (facturado vs objetivo) — como el dashboard de referencia
const PERF_GREEN  = "#22a34a";
const PERF_ORANGE = "#F47920";
function fmtM(n) { n = Number(n) || 0; return "$" + (n / 1e6).toFixed(1) + "M"; }

// KPI con badge de tendencia (▲/▼ %) para "Indicadores clave"
function PerfKpi({ label, value, valueColor, sub, pill }) {
  return (
    <div className="rg-kpi" style={{ padding: "14px 16px" }}>
      <div className="label" style={{ fontSize: 10.5 }}>{label}</div>
      <div className="value" style={{ fontSize: 26, marginTop: 6, color: valueColor || "var(--rg-ink)", fontWeight: 700 }}>{value}</div>
      {sub && <div style={{ fontSize: 11, color: "var(--rg-muted)", marginTop: 4, fontFamily: "var(--rg-font-mono)" }}>{sub}</div>}
      {pill && (
        <div style={{ marginTop: 8 }}>
          <span style={{ fontSize: 10.5, fontWeight: 700, padding: "2px 8px", borderRadius: 999,
            background: pill.good ? "rgba(45,106,68,0.12)" : "rgba(178,34,34,0.10)",
            color: pill.good ? "#2d6a44" : "#b22222" }}>
            {pill.good ? "▲" : "▼"} {pill.text}
          </span>
        </div>
      )}
    </div>
  );
}

function ReportsKpiCard({ label, value, sub }) {
  return (
    <div className="rg-kpi" style={{ padding: "14px 16px" }}>
      <div className="label" style={{ fontSize: 10.5 }}>{label}</div>
      <div className="value" style={{ fontSize: 22, marginTop: 6 }}>
        {typeof value === "string" && value.startsWith("$") ? <span className="currency">$</span> : null}
        {typeof value === "string" && value.startsWith("$") ? value.slice(1) : value}
      </div>
      {sub && <div style={{ fontSize: 11, color: "var(--rg-muted)", marginTop: 4, fontFamily: "var(--rg-font-mono)" }}>{sub}</div>}
    </div>
  );
}

function MonthlyChart({ data }) {
  if (!data || data.length === 0) {
    return <div style={{ padding: 32, textAlign: "center", color: "var(--rg-muted)", fontSize: 12 }}>Sin datos de gasto mensual</div>;
  }
  const W = 720, H = 220, pad = { l: 52, r: 12, t: 16, b: 28 };
  const vals = data.map(d => d.total);
  const max  = Math.max(...vals, 1);
  const min  = 0;
  const span = max - min || 1;
  const stepX = (W - pad.l - pad.r) / Math.max(data.length - 1, 1);
  const yFor  = v => pad.t + (1 - (v - min) / span) * (H - pad.t - pad.b);
  const xFor  = i => pad.l + i * stepX;
  const points  = data.map((d, i) => `${xFor(i)},${yFor(d.total)}`).join(" ");
  const areaPts = `${xFor(0)},${H - pad.b} ${points} ${xFor(data.length-1)},${H - pad.b}`;
  const ticks   = [0, max * 0.5, max].map(v => Math.round(v));
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      {ticks.map((t, i) => (
        <g key={i}>
          <line x1={pad.l} y1={yFor(t)} x2={W - pad.r} y2={yFor(t)} stroke="var(--rg-line)" strokeDasharray="2 4"/>
          <text x={pad.l - 6} y={yFor(t) + 3.5} fontSize="10" fill="var(--rg-muted)" textAnchor="end" fontFamily="var(--rg-font-mono)">
            ${t >= 1000 ? (t/1000).toFixed(0)+'k' : t}
          </text>
        </g>
      ))}
      <polygon points={areaPts} fill="var(--rg-green-700)" opacity="0.10"/>
      <polyline points={points} fill="none" stroke="var(--rg-green-700)" strokeWidth="2" strokeLinejoin="round"/>
      {data.map((d, i) => (
        <g key={i}>
          <circle cx={xFor(i)} cy={yFor(d.total)} r="3.5" fill="var(--rg-paper)" stroke="var(--rg-green-700)" strokeWidth="1.6"/>
          <text x={xFor(i)} y={H - pad.b + 16} fontSize="10.5" fill="var(--rg-muted)" textAnchor="middle">
            {MES_LABELS[(d.mes || i+1) - 1] || d.mes}
          </text>
        </g>
      ))}
      {data.length > 0 && (
        <circle cx={xFor(data.length-1)} cy={yFor(data[data.length-1].total)} r="6" fill="var(--rg-gold)" opacity="0.3"/>
      )}
    </svg>
  );
}

function StatusDonut({ statusDist }) {
  const dist = statusDist || [];
  const mapColor = { PAGADO: "var(--rg-flag-ok)", PAGO_PARCIAL: "var(--rg-flag-warn)", PENDIENTE: "var(--rg-flag-over)" };
  const mapLabel = { PAGADO: "Pagado", PAGO_PARCIAL: "Parcial", PENDIENTE: "Pendiente" };
  const segs = dist.map(d => ({ k: mapLabel[d.status] || d.status, v: d.monto, c: mapColor[d.status] || "var(--rg-muted)" }));
  const sum  = segs.reduce((a, s) => a + s.v, 0) || 1;
  const r = 56, c = 2 * Math.PI * r;
  let off = 0;

  if (segs.length === 0) {
    return (
      <div className="rg-donut-wrap" style={{ justifyContent: "center", padding: 32 }}>
        <span style={{ color: "var(--rg-muted)", fontSize: 12 }}>Sin datos de pagos</span>
      </div>
    );
  }

  return (
    <div className="rg-donut-wrap">
      <svg width="140" height="140" viewBox="0 0 140 140">
        <circle cx="70" cy="70" r={r} fill="none" stroke="var(--rg-line)" strokeWidth="14"/>
        {segs.map(s => {
          const len  = (s.v / sum) * c;
          const dash = `${len} ${c - len}`;
          const el   = <circle key={s.k} cx="70" cy="70" r={r} fill="none" stroke={s.c}
            strokeWidth="14" strokeDasharray={dash} strokeDashoffset={-off} transform="rotate(-90 70 70)"/>;
          off += len;
          return el;
        })}
        <text x="70" y="68" textAnchor="middle" fontFamily="var(--rg-font-display)" fontSize="20" fontWeight="600" fill="var(--rg-ink)">
          ${(sum/1000).toFixed(0)}K
        </text>
        <text x="70" y="84" textAnchor="middle" fontSize="9.5" fill="var(--rg-muted)" letterSpacing="0.1em">TOTAL MXN</text>
      </svg>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
        {segs.map(s => (
          <div className="rg-row" key={s.k} style={{ justifyContent: "space-between" }}>
            <div className="rg-row" style={{ gap: 8 }}>
              <span className="rg-dot" style={{ background: s.c }}/>
              <span style={{ fontSize: 12 }}>{s.k}</span>
            </div>
            <span className="rg-mono" style={{ fontSize: 12, fontWeight: 600 }}>${fmtMoney(s.v, { compact: true })}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function TopProveedoresChart({ topProv }) {
  const sorted = (topProv || []).slice().sort((a,b) => b.monto - a.monto);
  const max    = Math.max(...sorted.map(s => s.monto), 1);
  if (sorted.length === 0) {
    return <div style={{ padding: 32, textAlign: "center", color: "var(--rg-muted)", fontSize: 12 }}>Sin proveedores con OCs este año</div>;
  }
  return (
    <div style={{ padding: "16px 20px", display: "flex", flexDirection: "column", gap: 11 }}>
      {sorted.map((p, i) => (
        <div key={p.id} style={{ display: "grid", gridTemplateColumns: "20px minmax(0,1fr) 90px", gap: 10, alignItems: "center" }}>
          <span style={{ fontFamily: "var(--rg-font-mono)", fontSize: 11, color: "var(--rg-muted)" }}>#{i+1}</span>
          <div>
            <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 4, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.nombre}</div>
            <div className="rg-bar-track">
              <div className="fill" style={{ width: (p.monto/max)*100 + "%", background: i === 0 ? "var(--rg-green-700)" : i === 1 ? "var(--rg-green-600)" : "var(--rg-green-500)" }}/>
            </div>
          </div>
          <span className="rg-mono" style={{ fontSize: 12, fontWeight: 600, textAlign: "right" }}>${fmtMoney(p.monto)}</span>
        </div>
      ))}
    </div>
  );
}

function FamilyTable({ familias, thresholds }) {
  const data  = (familias || []).slice().sort((a,b) => b.gastado - a.gastado);
  const total = data.reduce((a,f) => a + f.gastado, 0);
  if (data.length === 0) {
    return <div style={{ padding: 32, textAlign: "center", color: "var(--rg-muted)", fontSize: 12 }}>Sin gasto por familia este año</div>;
  }
  return (
    <div>
      {data.map((f, i) => {
        const pct   = f.pct_budget || (f.budget > 0 ? (f.gastado / f.budget) * 100 : 0);
        const lv    = flagLevel(pct, thresholds);
        const share = total > 0 ? (f.gastado / total) * 100 : 0;
        return (
          <div key={f.codigo} style={{ display: "grid", gridTemplateColumns: "26px minmax(0,1.3fr) 1fr 80px", gap: 14, alignItems: "center", padding: "12px 18px", borderBottom: "1px solid var(--rg-line)" }}>
            <GolfFlag level={lv} size={22} animate={false}/>
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 500 }}>{f.nombre}</div>
              <div style={{ fontSize: 10.5, color: "var(--rg-muted)", fontFamily: "var(--rg-font-mono)", marginTop: 2 }}>Familia {f.codigo} · {f.ocs || 0} OCs</div>
            </div>
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--rg-muted)", fontFamily: "var(--rg-font-mono)", marginBottom: 4 }}>
                <span>${fmtMoney(f.gastado)}</span>
                <span>{share.toFixed(1)}% del total</span>
              </div>
              <div className="rg-track"><div className={"fill " + lv} style={{ width: Math.min(pct,100) + "%" }}/></div>
            </div>
            <div className="rg-mono" style={{ fontWeight: 600, textAlign: "right", color: flagColor(lv) }}>{pct.toFixed(0)}%</div>
          </div>
        );
      })}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
//  PANEL DE TESORERIA (al elegir un proyecto)
//  Todo CON IVA, que es lo que sale del banco, y por el rango de fechas que se
//  elija arriba. La vista general sigue siendo anual y sin este detalle.
// ═══════════════════════════════════════════════════════════════════════════

// Paleta categorica validada con el verificador de contraste/daltonismo.
// El dorado de marca queda por debajo de 3:1 contra el papel, asi que donde se
// usa va siempre con su cifra escrita al lado, nunca color solo.
const TES_SERIES = {
  pagado:       { light: "#2f8457", dark: "#2f8457", label: "Pagado" },
  comprometido: { light: "#3a6fb0", dark: "#3a6fb0", label: "Comprometido" },
};
const TES_AGING = ["#e8c57a", "#d9a441", "#c07c22", "#9c4f1f"];   // secuencial: a mas viejo, mas oscuro

function tesEtiquetaPeriodo(iso, gran) {
  const [a, m, d] = String(iso).split("-").map(Number);
  if (!a) return iso;
  if (gran === "mes")    return `${MES_LABELS[(m || 1) - 1]} ${String(a).slice(2)}`;
  if (gran === "semana") return `${d} ${MES_LABELS[(m || 1) - 1]}`;
  return `${d} ${MES_LABELS[(m || 1) - 1]}`;
}

function TesKpi({ label, value, sub, color, fuerte }) {
  return (
    <div className="rg-kpi" style={{ padding: "13px 16px", borderLeft: color ? `3px solid ${color}` : undefined }}>
      <div style={{ fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--rg-muted)", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: fuerte ? 23 : 20, fontWeight: 700, fontFamily: "var(--rg-font-mono)", color: color || "var(--rg-ink)", marginTop: 5, lineHeight: 1.1 }}>
        {value}
      </div>
      {sub && <div style={{ fontSize: 10.5, color: "var(--rg-muted)", marginTop: 3 }}>{sub}</div>}
    </div>
  );
}

// Barra horizontal con su cifra escrita: una sola serie, sin leyenda — el titulo
// de la tarjeta dice que mide.
function TesBarras({ filas, color, max, money = true }) {
  const tope = max || Math.max(1, ...filas.map(f => Math.abs(f.valor)));
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
      {filas.map((f, i) => (
        <div key={i}>
          <div style={{ display: "flex", justifyContent: "space-between", gap: 10, fontSize: 11.5, marginBottom: 3 }}>
            <span style={{ color: "var(--rg-ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }} title={f.etiqueta}>{f.etiqueta}</span>
            <span style={{ fontFamily: "var(--rg-font-mono)", fontWeight: 700, color: "var(--rg-ink)", flexShrink: 0 }}>
              {money ? "$" + fmtMoney(f.valor, { compact: true }) : f.valor}
            </span>
          </div>
          <div style={{ height: 8, background: "var(--rg-cream)", borderRadius: 4, overflow: "hidden" }}>
            {Math.abs(f.valor) > 0.005 && (
              <div style={{ width: Math.max(1.5, (Math.abs(f.valor) / tope) * 100) + "%", height: "100%",
                            background: Array.isArray(color) ? color[i % color.length] : color, borderRadius: 4 }}/>
            )}
          </div>
          {f.sub && <div style={{ fontSize: 10, color: "var(--rg-muted)", marginTop: 2 }}>{f.sub}</div>}
        </div>
      ))}
    </div>
  );
}

function TesoreriaPanel({ proyectoid, desde, hasta, gran, setGran }) {
  const { data, loading, error } = useApiData(
    'tesoreria.php',
    { proyectoid, desde, hasta, granularidad: gran },
    !proyectoid
  );

  const t = (typeof rgTheme === 'function') ? rgTheme() : {};
  const k = data?.kpis || {};
  const serie = data?.serie || [];
  const prov  = data?.proveedores || [];
  const fams  = data?.familias || [];
  const aging = data?.aging || [];

  const labels = serie.map(x => tesEtiquetaPeriodo(x.periodo, data?.granularidad));
  const vPag   = serie.map(x => x.pagado);
  const vComp  = serie.map(x => x.comprometido);
  let ap = 0, ac = 0;
  const accPag  = vPag.map(v => (ap += v));
  const accComp = vComp.map(v => (ac += v));

  const money = (n) => "$" + fmtMoney(n || 0, { compact: true });
  const saldoTotal = aging.reduce((a, b) => a + (b.saldo || 0), 0);

  if (!proyectoid) return null;
  if (loading) return (
    <div className="rg-card" style={{ padding: 28, textAlign: "center", color: "var(--rg-muted)" }}>
      Cargando el detalle de tesorería…
    </div>
  );
  if (error) return (
    <div className="rg-card" style={{ padding: 20, color: "var(--rg-flag-over)" }}>
      No se pudo cargar el detalle de tesorería.
    </div>
  );

  const baseOpts = (typeof rgBaseOptions === 'function') ? rgBaseOptions(t, { money: true }) : {};
  const optsFlujo = {
    ...baseOpts,
    plugins: { ...(baseOpts.plugins || {}),
      legend: { ...((baseOpts.plugins || {}).legend || {}), display: true, position: 'top', align: 'end' } },
    scales: { ...(baseOpts.scales || {}),
      x: { ...((baseOpts.scales || {}).x || {}),
           // con muchos periodos se rotula uno de cada N: el eje se lee, y el
           // dato exacto de cada barra sigue estando en el tooltip
           ticks: { ...(((baseOpts.scales || {}).x || {}).ticks || {}),
                    autoSkip: true, maxRotation: labels.length > 14 ? 45 : 0, minRotation: 0,
                    maxTicksLimit: labels.length > 26 ? 13 : labels.length } } },
  };

  return (
    <>
      {/* ── Cabecera del panel ── */}
      <div className="rg-card" style={{ padding: "13px 18px", display: "flex", justifyContent: "space-between",
                                        alignItems: "center", flexWrap: "wrap", gap: 12,
                                        borderLeft: "3px solid var(--rg-green-700)" }}>
        <div>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--rg-ink)" }}>
            Tesorería · {data?.proyecto?.nombre}
          </div>
          <div style={{ fontSize: 11.5, color: "var(--rg-muted)", marginTop: 2 }}>
            Del {desde} al {hasta} · {data?.dias} días · importes <strong>con IVA</strong>, convertidos a pesos
          </div>
        </div>
        <div className="rg-field" style={{ minWidth: 150 }}>
          <label>Ver por</label>
          <select className="rg-select" value={gran} onChange={e => setGran(e.target.value)}>
            <option value="auto">Automático ({data?.granularidad})</option>
            <option value="dia">Día</option>
            <option value="semana">Semana</option>
            <option value="mes">Mes</option>
          </select>
        </div>
      </div>

      {/* ── Los cuatro numeros que pide Finanzas ── */}
      <div className="rg-kpi-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <TesKpi label="Pagado en el periodo" value={money(k.pagado)} fuerte
                color={TES_SERIES.pagado.light}
                sub={`${k.ocs_pagadas || 0} OCs liquidadas · salió del banco`}/>
        <TesKpi label="Comprometido" value={money(k.comprometido)}
                color={TES_SERIES.comprometido.light}
                sub={`${k.ocs || 0} OCs emitidas en el rango`}/>
        <TesKpi label="Por pagar" value={money(k.por_pagar)}
                color="var(--rg-flag-warn)"
                sub={`${k.ocs_por_pagar || 0} OCs pendientes de liquidar`}/>
        <TesKpi label="IVA incluido" value={money(k.iva)}
                sub="de las OCs del periodo (tasa real, no 16% supuesto)"/>
      </div>

      {/* ── Flujo por periodo ── */}
      <div className="rg-card">
        <div className="rg-card-header">
          <div>
            <h3>Flujo por {data?.granularidad === 'dia' ? 'día' : data?.granularidad}</h3>
            <div className="sub">Lo pagado contra lo comprometido en cada periodo, con IVA</div>
          </div>
        </div>
        <div style={{ padding: "4px 16px 16px" }}>
          {serie.length === 0 ? (
            <div style={{ padding: 26, textAlign: "center", color: "var(--rg-muted)", fontSize: 12.5 }}>
              No hay movimientos en este rango de fechas.
            </div>
          ) : typeof RgChart === "function" ? (
            <RgChart type="bar" height={300} data={{
              labels,
              datasets: [
                { label: "Pagado",       data: vPag,  backgroundColor: TES_SERIES.pagado.light,       borderRadius: 4, borderSkipped: false, maxBarThickness: 26 },
                { label: "Comprometido", data: vComp, backgroundColor: TES_SERIES.comprometido.light, borderRadius: 4, borderSkipped: false, maxBarThickness: 26 },
              ],
            }} options={optsFlujo}/>
          ) : null}
        </div>
      </div>

      {/* ── Acumulado (va en su propia grafica: misma unidad, otra escala) ── */}
      {serie.length > 1 && typeof RgChart === "function" && (
        <div className="rg-card">
          <div className="rg-card-header">
            <div>
              <h3>Acumulado del periodo</h3>
              <div className="sub">Cómo se ha ido acumulando el gasto desde el inicio del rango</div>
            </div>
          </div>
          <div style={{ padding: "4px 16px 16px" }}>
            <RgChart type="line" height={280} data={{
              labels,
              datasets: [
                { label: "Pagado acumulado", data: accPag, borderColor: TES_SERIES.pagado.light,
                  backgroundColor: TES_SERIES.pagado.light + "22", borderWidth: 2, fill: true,
                  pointRadius: 0, pointHoverRadius: 5, tension: 0.25 },
                { label: "Comprometido acumulado", data: accComp, borderColor: TES_SERIES.comprometido.light,
                  backgroundColor: "transparent", borderWidth: 2, borderDash: [5, 4],
                  pointRadius: 0, pointHoverRadius: 5, tension: 0.25 },
              ],
            }} options={optsFlujo}/>
          </div>
        </div>
      )}

      {/* ── Antiguedad del saldo + proveedores ── */}
      <div style={{ display: "grid", gridTemplateColumns: "minmax(300px, 1fr) minmax(340px, 1.3fr)", gap: 14 }}>
        <div className="rg-card">
          <div className="rg-card-header">
            <div>
              <h3>Antigüedad del saldo por pagar</h3>
              <div className="sub">Cuánto lleva esperando lo que aún no se liquida · total {money(saldoTotal)}</div>
            </div>
          </div>
          <div style={{ padding: "4px 16px 16px" }}>
            {saldoTotal <= 0 ? (
              <div style={{ padding: 22, textAlign: "center", color: "var(--rg-muted)", fontSize: 12.5 }}>
                No hay saldo pendiente en este rango.
              </div>
            ) : (
              <TesBarras color={TES_AGING}
                filas={aging.map(a => ({ etiqueta: a.tramo, valor: a.saldo, sub: `${a.ocs} OC${a.ocs === 1 ? "" : "s"}` }))}/>
            )}
          </div>
        </div>

        <div className="rg-card">
          <div className="rg-card-header">
            <div>
              <h3>Proveedores del periodo</h3>
              <div className="sub">Por lo comprometido · la cifra en verde es lo ya pagado</div>
            </div>
          </div>
          <div style={{ padding: "4px 16px 16px" }}>
            {prov.length === 0 ? (
              <div style={{ padding: 22, textAlign: "center", color: "var(--rg-muted)", fontSize: 12.5 }}>Sin proveedores en el rango.</div>
            ) : (
              <TesBarras color={TES_SERIES.comprometido.light}
                filas={prov.map(p => ({
                  etiqueta: p.nombre, valor: p.comprometido,
                  sub: `${p.ocs} OC${p.ocs === 1 ? "" : "s"} · pagado $${fmtMoney(p.pagado, { compact: true })}`,
                }))}/>
            )}
          </div>
        </div>
      </div>

      {/* ── Familias: tabla, que es lo que Finanzas copia al cierre ── */}
      {fams.length > 0 && (
        <div className="rg-card">
          <div className="rg-card-header">
            <div>
              <h3>Gasto por familia</h3>
              <div className="sub">Con el IVA de cada OC prorrateado entre sus partidas</div>
            </div>
          </div>
          <div style={{ overflowX: "auto" }}>
            <table className="rg-table" style={{ width: "100%" }}>
              <thead>
                <tr>
                  <th style={{ textAlign: "left" }}>Familia</th>
                  <th style={{ textAlign: "right" }}>Comprometido</th>
                  <th style={{ textAlign: "right" }}>Pagado</th>
                  <th style={{ textAlign: "right" }}>Por pagar</th>
                  <th style={{ textAlign: "right", width: 110 }}>% pagado</th>
                </tr>
              </thead>
              <tbody>
                {fams.map((f, i) => {
                  const pend = Math.max(0, f.comprometido - f.pagado);
                  const pct  = f.comprometido > 0 ? (f.pagado / f.comprometido) * 100 : 0;
                  return (
                    <tr key={i}>
                      <td><span className="rg-mono" style={{ fontSize: 11 }}>{f.codigo}</span> {f.nombre}</td>
                      <td className="rg-mono" style={{ textAlign: "right" }}>${fmtMoney(f.comprometido, { compact: true })}</td>
                      <td className="rg-mono" style={{ textAlign: "right", color: TES_SERIES.pagado.light, fontWeight: 600 }}>${fmtMoney(f.pagado, { compact: true })}</td>
                      <td className="rg-mono" style={{ textAlign: "right", color: pend > 0 ? "var(--rg-flag-warn)" : "var(--rg-muted)" }}>${fmtMoney(pend, { compact: true })}</td>
                      <td style={{ textAlign: "right" }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "flex-end" }}>
                          <div style={{ width: 46, height: 6, background: "var(--rg-cream)", borderRadius: 3, overflow: "hidden" }}>
                            <div style={{ width: Math.min(100, pct) + "%", height: "100%", background: TES_SERIES.pagado.light }}/>
                          </div>
                          <span className="rg-mono" style={{ fontSize: 11 }}>{pct.toFixed(0)}%</span>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {k.importadas > 0 && (
        <div style={{ fontSize: 11.5, color: "var(--rg-muted)", padding: "0 4px 4px" }}>
          Incluye {k.importadas} OC{k.importadas === 1 ? "" : "s"} del histórico importado por ${fmtMoney(k.importado_total, { compact: true })},
          que ya traen su IVA dentro y no tienen desglose de partidas.
        </div>
      )}
    </>
  );
}

function ReportsView({ thresholds, setThresholds, onNav, user, onLogout, anio, setAnio }) {
  const [proyectoid, setProyectoid] = useState("");
  const [fechaDesde, setFechaDesde] = useState(`${anio}-01-01`);
  const [fechaHasta, setFechaHasta] = useState(`${anio}-12-31`);
  const [gran,       setGran]       = useState("auto");

  // Al cambiar de año, el rango salta a ese año completo: si no, el panel de
  // tesorería se quedaría consultando fechas del año anterior sin avisar.
  useEffect(() => {
    setFechaDesde(`${anio}-01-01`);
    setFechaHasta(`${anio}-12-31`);
  }, [anio]);

  // El selector de Proyecto (y los campos Desde/Hasta) existían en el filtro
  // pero nunca se mandaban a la API — api/reports.php ahora acepta
  // ?proyectoid= y acota todas las secciones que tienen esa columna (todas
  // menos "Ingresos", que es a nivel empresa). Desde/Hasta siguen sin
  // conectar: la API solo filtra por año completo (?anio=), no por rango de
  // fechas — pendiente si se necesita ese nivel de detalle.
  const { data: reportData, loading } = useApiData('reports.php', { anio, proyectoid });
  const { data: proyectos }           = useApiData('proyectos.php');

  const global    = reportData?.global    || {};
  const mensual   = reportData?.mensual   || [];
  const statusDist = reportData?.statusDist || [];
  const topProv   = reportData?.topProv   || [];
  const familias  = reportData?.familias  || [];
  const ingresos      = reportData?.ingresos      || [];
  const gastosPagados = reportData?.gastos_pagados || [];
  const historico     = reportData?.historico     || [];

  // ── v3.0: datos para las gráficas Chart.js de ingresos vs gastos ──
  const chartTheme = (typeof rgTheme === 'function') ? rgTheme() : {};
  const ingVals    = ingresos.map(x => x.total);
  const gastoVals  = gastosPagados.map(x => x.total);
  let _acc = 0; const ingAcum = ingVals.map(v => (_acc += v));
  const totalIngresos = ingVals.reduce((a, b) => a + b, 0);
  const totalGastosPg = gastoVals.reduce((a, b) => a + b, 0);
  const balanceAnual  = totalIngresos - totalGastosPg;

  // ── Evolución acumulada mensual: facturado real acumulado vs objetivo lineal ──
  const PROYECCION_MENSUAL_MXN = 15237354; // objetivo lineal por mes (ajustable · $182.8M/año)
  let _lastMes = 0;
  ingresos.forEach(x => { if ((x.total || 0) > 0) _lastMes = Math.max(_lastMes, x.mes); });
  const evoLabels   = ["Inicio"].concat(MES_LABELS.slice(0, _lastMes));
  const evoReal     = [0].concat(ingAcum.slice(0, _lastMes));
  const evoObjetivo = Array.from({ length: _lastMes + 1 }, (_, i) => i * PROYECCION_MENSUAL_MXN);
  const evoData = {
    labels: evoLabels,
    datasets: [
      { label: "Facturado acum. (real)", data: evoReal, borderColor: chartTheme.green,
        backgroundColor: (chartTheme.green || "#1a4d2e") + "22", fill: true, tension: 0.35,
        borderWidth: 2.5, pointRadius: 4, pointBackgroundColor: chartTheme.green, pointBorderColor: chartTheme.paper, pointBorderWidth: 1.5 },
      { label: "Objetivo acumulado", data: evoObjetivo, borderColor: PERF_ORANGE,
        backgroundColor: "transparent", fill: false, borderDash: [6, 5], tension: 0,
        borderWidth: 2, pointRadius: 3, pointBackgroundColor: PERF_ORANGE, pointBorderColor: chartTheme.paper },
    ],
  };
  const evoOptions = (typeof rgBaseOptions === "function") ? (() => {
    const o = rgBaseOptions(chartTheme, { money: true, legend: true });
    o.layout = { padding: { right: 100, top: 22 } };   // espacio para las etiquetas de fin
    o.plugins.datalabels = {
      align: "right", anchor: "end", clamp: true, clip: false,
      formatter: (v, ctx) => ctx.dataIndex === ctx.dataset.data.length - 1 ? "$" + Math.round(v).toLocaleString("es-MX") + " MXN" : "",
      color: (ctx) => ctx.dataset.borderColor,
      font: { family: chartTheme.mono || "monospace", weight: "700", size: 11 },
    };
    return o;
  })() : {};

  // ── Indicadores clave + Gráficas de desempeño (facturado real vs objetivo) ──
  const mesIdx        = Math.max(0, _lastMes - 1);
  const mesFull       = _lastMes > 0 ? MESES_FULL[mesIdx] : "—";
  const mesShort      = _lastMes > 0 ? MES_LABELS[mesIdx] : "—";
  const facturadoMes  = _lastMes > 0 ? ingVals[mesIdx] : 0;
  const objetivoMes   = PROYECCION_MENSUAL_MXN;
  const pctMes        = objetivoMes > 0 ? (facturadoMes / objetivoMes) * 100 : 0;
  const facturadoAcum = totalIngresos;
  const objetivoAcum  = PROYECCION_MENSUAL_MXN * _lastMes;
  const pctAcum       = objetivoAcum > 0 ? (facturadoAcum / objetivoAcum) * 100 : 0;
  const difObjetivo   = facturadoAcum - objetivoAcum;
  const objetivoAnual = PROYECCION_MENSUAL_MXN * 12;

  const perfBarOptions = (typeof rgBaseOptions === "function") ? (() => {
    const o = rgBaseOptions(chartTheme, { money: true, legend: false });
    o.layout = { padding: { top: 30 } };
    o.plugins.datalabels = {
      anchor: "end", align: "top", clamp: true, clip: false,
      formatter: (v) => "$" + Math.round(v).toLocaleString("es-MX") + " MXN",
      color: chartTheme.ink || "#14110d",
      font: { family: chartTheme.mono || "monospace", weight: "700", size: 11 },
    };
    return o;
  })() : {};
  const perfMesData = { labels: ["Facturado actual", "Objetivo mensual"], datasets: [
    { data: [facturadoMes, objetivoMes], backgroundColor: [PERF_GREEN, PERF_ORANGE], borderRadius: 6, maxBarThickness: 130 },
  ] };
  const perfAcumData = { labels: ["Facturado acum. (real)", "Objetivo acumulado"], datasets: [
    { data: [facturadoAcum, objetivoAcum], backgroundColor: [PERF_GREEN, PERF_ORANGE], borderRadius: 6, maxBarThickness: 130 },
  ] };

  // Antes esto bajaba un CSV con el desglose por familia y nada mas: ni una OC,
  // ni los pagos, ni el IVA. Ahora baja el reporte de tesoreria completo, que es
  // un xlsx de seis hojas y respeta el proyecto y el rango de fechas elegidos.
  const [bajando, setBajando] = useState(false);
  async function handleExport() {
    if (bajando) return;
    setBajando(true);
    try {
      const q = new URLSearchParams({ desde: fechaDesde, hasta: fechaHasta, granularidad: gran });
      if (proyectoid) q.set('proyectoid', proyectoid);
      const res = await fetch('api/export_tesoreria.php?' + q.toString(), { credentials: 'same-origin' });
      if (!res.ok) {
        let msg = 'No se pudo generar el reporte.';
        try { const j = await res.json(); if (j && j.error) msg = j.error; } catch (_) {}
        toast.error(msg);
        return;
      }
      const blob = await res.blob();
      const url  = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      const quien = proyectoid
        ? ((proyectos || []).find(p => String(p.id) === String(proyectoid))?.clave || proyectoid)
        : 'Global';
      a.download = `Reporte_Tesoreria_${quien}_${fechaDesde}_a_${fechaHasta}.xlsx`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (err) { toast.error(err.message); }
    finally { setBajando(false); }
  }

  return (
    <div className="rg-app">
      <Sidebar active="reports" onNav={onNav} alertCount={0} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar crumbs="Compras / Reportes" title="Reportes y estadísticas"
          actions={<button className="rg-btn primary" onClick={handleExport} disabled={bajando}
                     title="Baja un Excel de seis hojas con el detalle de las OCs, los pagos y los cortes del periodo">
                     {Icon.excel()} {bajando ? 'Generando…' : 'Reporte de Tesorería'}
                   </button>}/>
        <div className="rg-content">

          {/* Filtros */}
          <div className="rg-filter-bar" style={{ gridTemplateColumns: "120px 130px 130px 1fr auto" }}>
            <div className="rg-field">
              <label>Año</label>
              <select className="rg-select" value={anio} onChange={e => setAnio(+e.target.value)}>
                {[2024,2025,2026,2027].map(y => <option key={y} value={y}>{y}</option>)}
              </select>
            </div>
            <div className="rg-field">
              <label>Desde</label>
              <input className="rg-input" type="date" value={fechaDesde} onChange={e => setFechaDesde(e.target.value)}/>
            </div>
            <div className="rg-field">
              <label>Hasta</label>
              <input className="rg-input" type="date" value={fechaHasta} onChange={e => setFechaHasta(e.target.value)}/>
            </div>
            <div className="rg-field">
              <label>Proyecto</label>
              <select className="rg-select" value={proyectoid} onChange={e => setProyectoid(e.target.value)}>
                <option value="">Todos los proyectos</option>
                {(proyectos || []).map(p => <option key={p.id} value={p.id}>{p.nombre}</option>)}
              </select>
            </div>
            <button className="rg-btn" onClick={() => { setFechaDesde(`${anio}-01-01`); setFechaHasta(`${anio}-12-31`); setProyectoid(""); }} style={{ height: 32 }}>
              {Icon.x()} Limpiar
            </button>
          </div>

          {/* Con proyecto elegido se muestra el panel de Tesorería, que es por
              rango de fechas y con IVA. Sin proyecto, la vista general de
              siempre, que es anual. Antes salían las dos cosas mezcladas. */}
          {proyectoid ? (
            <TesoreriaPanel proyectoid={proyectoid} desde={fechaDesde} hasta={fechaHasta}
                            gran={gran} setGran={setGran}/>
          ) : (<>

          {/* KPIs globales */}
          {loading ? (
            <div className="rg-kpi-grid" style={{ gridTemplateColumns: "repeat(6, 1fr)" }}>
              {[1,2,3,4,5,6].map(i => (
                <div key={i} className="rg-kpi" style={{ padding: "14px 16px" }}>
                  <div style={{ height: 10, borderRadius: 3, background: "var(--rg-line)", width: "60%", animation: "rg-pulse 1.3s ease-in-out infinite" }}/>
                  <div style={{ height: 22, borderRadius: 3, background: "var(--rg-line)", width: "80%", marginTop: 8, animation: "rg-pulse 1.3s ease-in-out infinite" }}/>
                </div>
              ))}
            </div>
          ) : (
            <div className="rg-kpi-grid" style={{ gridTemplateColumns: "repeat(6, 1fr)" }}>
              <ReportsKpiCard label="Total OCs"   value={global.total_ocs  || 0}                     sub={`año ${anio}`}/>
              <ReportsKpiCard label="Total MXN"   value={"$" + fmtMoney(global.total_mxn || 0)}     sub={`${global.pagadas || 0} pagadas`}/>
              <ReportsKpiCard label="Pendiente"   value={"$" + fmtMoney(global.total_pendiente || 0)} sub="por pagar"/>
              <ReportsKpiCard label="Pagadas"     value={global.pagadas    || 0}                     sub="OCs liquidadas"/>
              <ReportsKpiCard label="Pendientes"  value={global.pendientes || 0}                     sub="OCs sin pago"/>
              <ReportsKpiCard label="Críticas"    value={global.criticas   || 0}                     sub="prioridad alta"/>
            </div>
          )}

          {/* Gráficas */}
          {loading ? (
            <div className="rg-card" style={{ padding: "18px 20px", display: "flex", flexDirection: "column", gap: 12 }}>
              {[1,2,3,4,5,6].map(i => <div key={i} style={{ height: 14, borderRadius: 4, background: "var(--rg-line)", width: i%3===0?"55%":i%2===0?"80%":"90%", animation: "rg-pulse 1.3s ease-in-out infinite" }}/>)}
            </div>
          ) : (
            <>
              <div className="rg-chart-row">
                <div className="rg-card">
                  <div className="rg-card-header">
                    <div>
                      <h3>Gasto mensual MXN</h3>
                      <div className="sub">{anio} · por mes</div>
                    </div>
                  </div>
                  <div style={{ padding: "16px 18px 18px" }}>
                    <MonthlyChart data={mensual}/>
                  </div>
                </div>
                <div className="rg-card">
                  <div className="rg-card-header">
                    <div>
                      <h3>Status de pago</h3>
                      <div className="sub">Distribución MXN · {anio}</div>
                    </div>
                  </div>
                  <StatusDonut statusDist={statusDist}/>
                </div>
              </div>

              {/* ── v3.0 · Ingresos y balance (Chart.js re-tematizado) ── */}
              {typeof RgChart === "function" && (<>
              <div className="rg-card-header" style={{ padding: "6px 2px 10px", border: "none" }}>
                <div>
                  <h3 style={{ margin: 0 }}>Ingresos y balance</h3>
                  <div className="sub">Ingresos (MXN) vs gasto pagado · {anio}</div>
                </div>
              </div>

              <div className="rg-kpi-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", marginBottom: 14 }}>
                <ReportsKpiCard label="Ingresos del año" value={"$" + fmtMoney(totalIngresos)} sub={`${anio} · MXN`}/>
                <ReportsKpiCard label="Gasto pagado"     value={"$" + fmtMoney(totalGastosPg)} sub="OCs liquidadas"/>
                <ReportsKpiCard label="Balance"          value={(balanceAnual < 0 ? "-$" : "$") + fmtMoney(Math.abs(balanceAnual))} sub={balanceAnual >= 0 ? "superávit" : "déficit"}/>
              </div>

              <div className="rg-chart-row">
                <div className="rg-card">
                  <div className="rg-card-header"><div><h3>Gastos vs Ingresos por mes</h3><div className="sub">Barras · {anio}</div></div></div>
                  <div style={{ padding: "14px 16px 16px" }}>
                    <RgChart type="bar" height={260}
                      data={{ labels: MES_LABELS, datasets: [
                        { label: "Ingresos",       data: ingVals,   backgroundColor: chartTheme.green, borderRadius: 4, maxBarThickness: 20 },
                        { label: "Gasto (pagado)", data: gastoVals, backgroundColor: chartTheme.gold,  borderRadius: 4, maxBarThickness: 20 },
                      ] }}
                      options={rgBaseOptions(chartTheme, { money: true, legend: true })}/>
                  </div>
                </div>
                <div className="rg-card">
                  <div className="rg-card-header"><div><h3>Ingresos por mes</h3><div className="sub">MXN · {anio}</div></div></div>
                  <div style={{ padding: "14px 16px 16px" }}>
                    <RgChart type="bar" height={260}
                      data={{ labels: MES_LABELS, datasets: [
                        { label: "Ingresos", data: ingVals, backgroundColor: chartTheme.green2, borderRadius: 4, maxBarThickness: 30 },
                      ] }}
                      options={rgBaseOptions(chartTheme, { money: true, legend: false })}/>
                  </div>
                </div>
              </div>

              {/* Evolución acumulada mensual: facturado real vs objetivo lineal */}
              <div className="rg-card">
                <div className="rg-card-header"><div><h3>Evolución acumulada mensual</h3><div className="sub">Curva real vs objetivo lineal acumulado (~$15.2M/mes) · {anio}</div></div></div>
                <div style={{ padding: "16px 18px 20px" }}>
                  <RgChart type="line" height={330} useDatalabels data={evoData} options={evoOptions}/>
                </div>
              </div>

              {/* ── Indicadores clave (facturado vs objetivo) ── */}
              <div className="rg-card-header" style={{ padding: "18px 2px 10px", border: "none" }}>
                <div>
                  <h3 style={{ margin: 0 }}>Indicadores clave</h3>
                  <div className="sub">Facturación real vs objetivo · {anio}</div>
                </div>
              </div>
              <div className="rg-kpi-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", marginBottom: 16 }}>
                <PerfKpi label={`FACTURADO ${mesFull.toUpperCase()}`} value={fmtM(facturadoMes)} valueColor="#16a34a"
                  sub={`Objetivo: ${fmtM(objetivoMes)}`} pill={{ good: pctMes >= 100, text: Math.abs(pctMes - 100).toFixed(1) + "%" }}/>
                <PerfKpi label={`FACTURADO ACUM. ENE–${mesShort.toUpperCase()}`} value={fmtM(facturadoAcum)} valueColor="#16a34a"
                  sub={`Objetivo: ${fmtM(objetivoAcum)}`} pill={{ good: pctAcum >= 100, text: Math.abs(pctAcum - 100).toFixed(1) + "%" }}/>
                <PerfKpi label="DIFERENCIA VS OBJETIVO" value={(difObjetivo >= 0 ? "+" : "-") + fmtM(Math.abs(difObjetivo))}
                  valueColor={difObjetivo >= 0 ? "#16a34a" : "#b22222"} sub={difObjetivo >= 0 ? "Superando el objetivo" : "Por debajo del objetivo"}/>
                <PerfKpi label={`OBJETIVO ANUAL ${anio}`} value={fmtM(objetivoAnual)} valueColor="#2563eb" sub={`${fmtM(objetivoMes)} / mes`}/>
              </div>

              {/* ── Gráficas de desempeño ── */}
              <div className="rg-card-header" style={{ padding: "6px 2px 10px", border: "none" }}>
                <div>
                  <h3 style={{ margin: 0 }}>Gráficas de desempeño</h3>
                  <div className="sub">Avance de facturación vs objetivo · {anio}</div>
                </div>
              </div>
              <div className="rg-chart-row">
                <div className="rg-card">
                  <div className="rg-card-header"><div><h3>Avance de facturación — mes activo</h3><div className="sub">{mesFull} {anio}</div></div></div>
                  <div style={{ padding: "10px 16px 16px" }}>
                    <div className="rg-row" style={{ gap: 16, padding: "0 2px 8px" }}>
                      <span className="rg-row" style={{ gap: 6, fontSize: 12 }}><span className="rg-dot" style={{ background: PERF_GREEN }}/>Facturado actual</span>
                      <span className="rg-row" style={{ gap: 6, fontSize: 12 }}><span className="rg-dot" style={{ background: PERF_ORANGE }}/>Objetivo mensual</span>
                    </div>
                    <RgChart type="bar" height={280} useDatalabels data={perfMesData} options={perfBarOptions}/>
                  </div>
                </div>
                <div className="rg-card">
                  <div className="rg-card-header"><div><h3>Avance acumulado ene – mes activo</h3><div className="sub">Enero–{mesFull} {anio} · DIF: {(difObjetivo >= 0 ? "+" : "-") + fmtM(Math.abs(difObjetivo))}</div></div></div>
                  <div style={{ padding: "10px 16px 16px" }}>
                    <div className="rg-row" style={{ gap: 16, padding: "0 2px 8px" }}>
                      <span className="rg-row" style={{ gap: 6, fontSize: 12 }}><span className="rg-dot" style={{ background: PERF_GREEN }}/>Facturado acum.</span>
                      <span className="rg-row" style={{ gap: 6, fontSize: 12 }}><span className="rg-dot" style={{ background: PERF_ORANGE }}/>Objetivo acumulado</span>
                    </div>
                    <RgChart type="bar" height={280} useDatalabels data={perfAcumData} options={perfBarOptions}/>
                  </div>
                </div>
              </div>
              </>)}
            </>
          )}

          </>)}
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { ReportsView, REPORT_PALETTE });