// ROCA GOLF — Dashboard: proyectos y OCs desde la BD

function ProjectPicker({ value, onChange, proyectos, alertas = [], pptoResumen = {} }) {
  return (
    <div className="rg-proj-tabs">
      {proyectos.map(p => {
        const manualCount = alertas.filter(a => a.proyectoid === p.id && a.activa !== false).length;
        const pptoCount   = (pptoResumen[p.id] || pptoResumen[String(p.id)])?.en_alerta || 0;
        const total       = manualCount + pptoCount;
        const tipParts    = [];
        if (manualCount > 0) tipParts.push(`${manualCount} alerta${manualCount !== 1 ? 's' : ''} manual${manualCount !== 1 ? 'es' : ''}`);
        if (pptoCount   > 0) tipParts.push(`${pptoCount} presupuesto${pptoCount !== 1 ? 's' : ''} en alerta`);
        return (
          <button key={p.id}
            className={"rg-proj-tab" + (value === p.id ? " active" : "")}
            onClick={() => onChange(p.id)}>
            <span className="swatch" style={{ background: p.color }}/>
            {p.nombre}
            {total > 0 && (
              <span style={{
                marginLeft: 6,
                background: '#e53935',
                color: '#fff',
                borderRadius: 999,
                fontSize: 9,
                fontWeight: 700,
                minWidth: 15,
                height: 15,
                padding: '0 4px',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontFamily: 'var(--rg-font-mono)',
                lineHeight: 1,
                flexShrink: 0,
              }} title={tipParts.join(' · ')}>
                {total}
              </span>
            )}
          </button>
        );
      })}
    </div>
  );
}

function ProjectKpis({ proyecto, tareas, presupuestos, combinados }) {
  const ocsImportadas     = proyecto.ocs_importadas || 0;
  const ejercidoImportado = proyecto.ejercido_importado || 0;

  // "Ejercido" de la tarjeta principal incluye OCs vivas + históricas
  // importadas (rg_oc_importadas) — antes solo mostraba lo vivo del año en
  // curso, subestimando el gasto real del proyecto. Las importadas son
  // históricas por definición (ya resueltas en la otra plataforma), así que
  // se suman completas al ejercido, no al pendiente — "pendiente" sigue
  // siendo solo el de OCs vivas todavía por pagar.
  // FIX 2026-09-30: `proyecto.ejercido` es SUM(oc.total) — ya incluye lo pagado Y
  // lo pendiente, así que `pendiente` es un SUBCONJUNTO suyo. Sumarlos (como se
  // hacía antes) inflaba el total por el pendiente y el porcentaje no medía lo
  // pagado: Rancho El Paraguas mostraba "Ejercido de $3,328,562 · 83.2% pagado"
  // cuando lo comprometido era $2,768,830 y lo pagado $2,209,099 (79.8%). Afectaba
  // a los 18 proyectos ($15.6M inflados en total). Verificado contra la BD del
  // 30-sep: los datos estaban bien, el error era solo de esta tarjeta.
  // UNIFICACIÓN 2026-10-07: "pagado" ya no da por pagado TODO el histórico
  // importado. Las importadas traen su propio pagado/pendiente y no todas venían
  // liquidadas: en VALLE había 19 sin pagar ($3.84M), que esta tarjeta contaba
  // como pagadas mientras Admin. de Proyecto no. Ahora las dos pantallas usan la
  // misma regla (pagado de OCs vivas + lo que el histórico trae como pagado) y
  // este número es igual al "Total pagado, con IVA" de Admin. de Proyecto. Lo
  // importado sin pago registrado se muestra aparte, sin llamarlo ni pagado ni
  // pendiente: es una foto del día de la carga y hay que confirmarlo. Si el
  // backend aún no manda `pagado_importado`, se conserva el cálculo anterior.
  const ejercido        = (proyecto.ejercido || 0) + ejercidoImportado;   // comprometido: OCs vivas + histórico completo
  const pendiente       = proyecto.pendiente || 0;                        // lo que falta pagar de las OCs vivas
  const pagadoImportado = proyecto.pagado_importado != null ? proyecto.pagado_importado : ejercidoImportado;
  const histSinPago     = proyecto.importado_sin_pago || 0;
  const pagado          = Math.max(0, (proyecto.ejercido || 0) - pendiente) + pagadoImportado;
  const pct             = ejercido > 0 ? (pagado / ejercido) * 100 : 0;
  // Conteos por estatus de TODAS las OCs vigentes del proyecto (api/proyectos.php).
  // FIX 2026-10-07: antes se contaban sobre `tareas`, que son solo las 100 OCs que
  // carga el Gantt. VALLE mostraba "Pagadas 60 · Pendientes 40 de 100 OCs" y tiene
  // 487 pagadas, 3 parciales y 95 pendientes de 585. Si el backend aún no manda los
  // conteos, se conserva el cálculo anterior.
  const conteoReal = proyecto.ocs_pagadas != null;
  const pagadas    = conteoReal ? proyecto.ocs_pagadas    : tareas.filter(t => t.progreso >= 100).length;
  const parciales  = conteoReal ? proyecto.ocs_parciales  : tareas.filter(t => t.progreso === 50).length;
  const sinPagar   = conteoReal ? proyecto.ocs_pendientes : tareas.filter(t => t.progreso === 0).length;
  const totalOcs   = conteoReal ? (proyecto.total_ocs || 0) : tareas.length;

  // Claves con OC real pero sin tope definido (ni Contraloría ni local) — gasto
  // que hoy no se está comparando contra ningún límite, riesgo de pasar
  // desapercibido. "sin_tope" (Contraloría dijo explícitamente "sin límite")
  // NO cuenta aquí — es una decisión, no un vacío.
  const sinPresupuestoList     = (presupuestos || []).filter(p => p.sin_presupuesto);
  const gastadoSinPresupuesto  = sinPresupuestoList.reduce((s, p) => s + (p.gastado || 0), 0);

  // Claves individuales + presupuestos combinados actualmente en warn/alert/over.
  const clavesEnAlerta = (presupuestos || []).filter(p => p.severidad).length
                       + (combinados   || []).filter(c => c.severidad).length;

  return (
    <div className="rg-kpi-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
      <div className="rg-kpi featured" style={{ gridColumn: "span 2", background: proyecto.color }}>
        <div className="label">{proyecto.nombre}</div>
        <div className="value"><span className="currency">MXN</span>{fmtMoney(ejercido)}</div>
        <div className="rg-budget-track">
          <div className="rg-budget-fill" style={{ width: Math.min(pct, 100) + "%" }}/>
        </div>
        <div className="rg-budget-meta">
          <span>
            Pagado ${fmtMoney(pagado)} de ${fmtMoney(ejercido)}
            <HelpHint text={
              "El número grande es el TOTAL comprometido del proyecto: incluye OCs " +
              "pagadas, pendientes y parciales, más el histórico importado. \"Pagado\" es lo " +
              "que tiene un pago registrado, con IVA: las OCs del sistema más lo que el " +
              "histórico trae como pagado. Es el mismo número que \"Total pagado, con IVA\" " +
              "en Admin. de Proyecto. \"Pendiente\" es lo que falta pagar de las OCs del " +
              "sistema. \"Costo Acumulado\" en Proyección de Costos es menor porque va sin " +
              "IVA y solo cuenta OCs liquidadas."
            }/>
          </span>
          <span>{pct.toFixed(1)}% pagado · ${fmtMoney(pendiente)} pendiente</span>
        </div>
        {histSinPago > 0 && (
          <div className="rg-budget-meta" style={{ marginTop: 4 }}>
            <span>
              Histórico sin pago registrado: ${fmtMoney(histSinPago)}
              <HelpHint text={
                "OCs del histórico importado que venían sin pagar el día que se cargaron. " +
                "Están dentro del total comprometido, pero no se cuentan como pagadas. Si ya " +
                "se pagaron, hay que actualizarlas en Importar OCs para que pasen a pagado."
              }/>
            </span>
          </div>
        )}
      </div>
      <div className="rg-kpi">
        <div className="label">Órdenes</div>
        <div className="value" style={{ fontSize: 26 }}>{proyecto.total_ocs || tareas.length}</div>
        <div className="delta">
          <span className="rg-spacer"/>
          <span className="pill" style={{ fontFamily: "var(--rg-font-mono)" }}>
            {shortDate(proyecto.inicio)} → {shortDate(proyecto.fin)}
          </span>
        </div>
      </div>
      <div className="rg-kpi">
        <div className="label">Pagadas</div>
        <div className="value" style={{ fontSize: 26, color: "var(--rg-flag-ok)" }}>{pagadas}</div>
        <div className="delta">
          <span style={{ fontSize: 11, color: "var(--rg-muted)", fontFamily: "var(--rg-font-mono)" }}>
            {parciales} con pago parcial
          </span>
        </div>
      </div>
      <div className="rg-kpi">
        <div className="label">Pendientes</div>
        <div className="value" style={{ fontSize: 26, color: "var(--rg-muted)" }}>{sinPagar}</div>
        <div className="delta">
          <span style={{ fontSize: 11, color: "var(--rg-muted)", fontFamily: "var(--rg-font-mono)" }}>
            de {totalOcs} OCs
          </span>
        </div>
      </div>
      <div className="rg-kpi">
        <div className="label">Gastado sin presupuesto</div>
        <div className="value" style={{ fontSize: 22, color: gastadoSinPresupuesto > 0 ? "var(--rg-flag-over)" : "var(--rg-muted)" }}>
          ${fmtMoney(gastadoSinPresupuesto, { compact: true })}
        </div>
        <div className="delta">
          <span style={{ fontSize: 11, color: "var(--rg-muted)", fontFamily: "var(--rg-font-mono)" }}>
            {sinPresupuestoList.length} clave{sinPresupuestoList.length !== 1 ? "s" : ""} sin tope
          </span>
        </div>
      </div>
      <div className="rg-kpi">
        <div className="label">Claves en alerta</div>
        <div className="value" style={{ fontSize: 26, color: clavesEnAlerta > 0 ? "var(--rg-flag-alert)" : "var(--rg-flag-ok)" }}>{clavesEnAlerta}</div>
        <div className="delta">
          <span style={{ fontSize: 11, color: "var(--rg-muted)", fontFamily: "var(--rg-font-mono)" }}>
            ≥ 80% de su tope
          </span>
        </div>
      </div>
      <div className="rg-kpi">
        <div className="label">OCs importadas</div>
        <div className="value" style={{ fontSize: 26 }}>{ocsImportadas}</div>
        <div className="delta">
          <span style={{ fontSize: 11, color: "var(--rg-muted)", fontFamily: "var(--rg-font-mono)" }}>
            ${fmtMoney(ejercidoImportado, { compact: true })} histórico
          </span>
        </div>
      </div>
    </div>
  );
}

function NewAlertModal({ open, onClose, proyecto, tareas, onSave, prefill, saving }) {
  const today = new Date().toISOString().slice(0, 10);
  const [tareaid,   setTareaid]   = useState("");
  const [fecha,     setFecha]     = useState(today);
  const [severidad, setSeveridad] = useState("warn");
  const [titulo,    setTitulo]    = useState("");
  const [desc,      setDesc]      = useState("");

  useEffect(() => {
    if (open) {
      setTareaid(prefill?.tareaid ? String(prefill.tareaid) : (tareas[0] ? String(tareas[0].id) : ""));
      setFecha(prefill?.fecha || today);
      setSeveridad(prefill?.severidad || "warn");
      setTitulo(prefill?.titulo || "");
      setDesc(prefill?.descripcion || prefill?.desc || "");
    }
  }, [open]);

  if (!open) return null;
  const tarea = tareas.find(t => t.id === +tareaid) || tareas[0];

  return (
    <div className="rg-modal-bg" onClick={onClose}>
      <div className="rg-modal" onClick={e => e.stopPropagation()}>
        <div className="rg-modal-head">
          <div>
            <h3>{prefill?.id ? "Editar alerta" : "Nueva alerta"}</h3>
            <div style={{ fontSize: 11.5, color: "var(--rg-muted)", marginTop: 2 }}>
              Proyecto: <strong style={{ color: "var(--rg-ink)" }}>{proyecto?.nombre}</strong>
            </div>
          </div>
          <button className="rg-icon-btn" onClick={onClose}>{Icon.x()}</button>
        </div>
        <div className="rg-modal-body">
          {tareas.length > 0 && (
            <div className="rg-field full">
              <label>OC / Insumo relacionado</label>
              <select className="rg-select" value={tareaid} onChange={e => setTareaid(e.target.value)}>
                <option value="">— Ninguno —</option>
                {tareas.map(t => (
                  <option key={t.id} value={t.id}>{t.clave} · {t.desc}</option>
                ))}
              </select>
            </div>
          )}
          <div className="rg-field">
            <label>Fecha objetivo</label>
            <input className="rg-input" type="date" value={fecha} onChange={e => setFecha(e.target.value)}/>
          </div>
          {tarea && (
            <div className="rg-field">
              <label>OC seleccionada</label>
              <div style={{ fontFamily: "var(--rg-font-mono)", fontSize: 12, color: "var(--rg-muted)", padding: "7px 0" }}>
                {tarea.clave} · {tarea.desc}
              </div>
            </div>
          )}
          <div className="rg-field full">
            <label>Severidad</label>
            <div className="rg-sev-pick">
              {[
                { k: "warn",  l: "Aviso 80%",  c: "var(--rg-flag-warn)" },
                { k: "alert", l: "Alerta 90%", c: "var(--rg-flag-alert)" },
                { k: "over",  l: "Excedido",   c: "var(--rg-flag-over)" }
              ].map(s => (
                <button key={s.k} className={s.k + (severidad === s.k ? " active" : "")} onClick={() => setSeveridad(s.k)}>
                  <GolfFlag level={s.k} size={18} animate={false}/>
                  <span style={{ color: s.c, fontWeight: 600 }}>{s.l}</span>
                </button>
              ))}
            </div>
          </div>
          <div className="rg-field full">
            <label>Título</label>
            <input className="rg-input" placeholder="Ej: Riesgo de excedente"
              value={titulo} onChange={e => setTitulo(e.target.value)}/>
          </div>
          <div className="rg-field full">
            <label>Descripción</label>
            <textarea className="rg-input" rows="3" placeholder="Detalle de la alerta…"
              value={desc} onChange={e => setDesc(e.target.value)} style={{ resize: "vertical" }}/>
          </div>
        </div>
        <div className="rg-modal-foot">
          <button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="rg-btn primary" disabled={saving || !titulo.trim()} onClick={() => {
            onSave({
              tareaid:     tarea ? tarea.id : null,
              clave:       tarea ? tarea.clave : null,
              fecha, severidad,
              titulo:      titulo.trim() || "Alerta",
              descripcion: desc
            });
          }}>
            {saving ? "Guardando…" : <>{Icon.check(13)} {prefill?.id ? "Actualizar" : "Crear alerta"}</>}
          </button>
        </div>
      </div>
    </div>
  );
}

function shortDate(iso) {
  if (!iso) return "—";
  const d = new Date(iso + "T00:00:00");
  return `${String(d.getDate()).padStart(2,"0")}/${String(d.getMonth()+1).padStart(2,"0")}`;
}

// Colores de barra según utilización
function budgetBarClass(pct) {
  if (pct >= 100) return "over";
  if (pct >= 90)  return "alert";
  if (pct >= 80)  return "warn";
  return "ok";
}

// ─── Modal: OCs que conforman el gasto de una clave (clic en tarjeta) ─────────
// Reemplaza al viejo "Ver / editar presupuestos" (BudgetModal) — esa edición ya
// vive en el módulo "Presupuestos" (rg-alerts.jsx). Aquí solo se navega: qué OCs
// componen el gasto de esta clave, con un ojito por fila para ver el detalle
// completo (OCDetailModal para OCs vivas, EditOCModal para históricas importadas).
function OcsPorInsumoModal({ open, onClose, proyectoid, target, user, proyectos }) {
  const isCombinado = target?.kind === 'combinado';
  const pp        = isCombinado ? null : target?.data;
  const combinado = isCombinado ? target?.data : null;
  const insumoid  = pp?.insumoid;
  const grupoid   = combinado?.id;
  const { data: ocs, loading } = useApiData(
    'presupuestos_proyecto.php',
    isCombinado ? { mode: 'ocs', proyectoid, grupoid } : { mode: 'ocs', proyectoid, insumoid },
    !open || !proyectoid || (!insumoid && !grupoid)
  );

  const [detailOcId, setDetailOcId] = useState(null);   // OC viva → OCDetailModal
  const [impRow,      setImpRow]    = useState(null);   // OC importada → EditOCModal
  const [loadingImp,  setLoadingImp] = useState(false);

  async function verDetalle(row) {
    if (!row.importada) { setDetailOcId(row.id); return; }
    setLoadingImp(true);
    try {
      // mode=ocs solo trae folio/fecha/monto (para el tooltip del Gantt) — para
      // la previsualización completa de una OC importada hace falta el resto de
      // sus campos (proveedor, empresa, moneda, pagos…), así que se pide aparte.
      const res = await apiFetch('oc_import.php', 'GET', null, { id: row.id - 1000000000 });
      const full = (res.rows || [])[0];
      if (full) setImpRow(full); else toast.error('No se encontró la OC importada.');
    } catch (e) { toast.error(e.message); }
    finally { setLoadingImp(false); }
  }

  return (
    <>
      <RgModal open={open} onClose={onClose} width={640}
        title={isCombinado ? `OCs de "${combinado?.nombre}"` : (pp ? `OCs de ${pp.insumo_clave}` : 'OCs')}
        footer={<button className="rg-btn" onClick={onClose}>Cerrar</button>}>
        {pp && (
          <div style={{ fontSize: 12.5, color: 'var(--rg-ink)', marginBottom: 14 }}>{pp.insumo_descripcion}</div>
        )}
        {isCombinado && combinado && (
          <div style={{ fontSize: 12.5, color: 'var(--rg-ink)', marginBottom: 14 }}>
            {combinado.miembros.length} clave{combinado.miembros.length !== 1 ? 's' : ''} combinadas: {combinado.miembros.map(m => m.clave).join(', ')}
          </div>
        )}
        {/* Atajo al total de todas las claves: cierra este detalle y baja al
            resumen del final de la rejilla, para leer el proyecto completo sin
            ir sumando tarjeta por tarjeta. */}
        <button className="rg-btn" style={{ marginBottom: 12, display: 'flex', alignItems: 'center', gap: 6 }}
          title="Ir al final de las claves, donde está la suma de todas"
          onClick={() => {
            onClose();
            setTimeout(() => {
              const el = document.getElementById('rg-totales-claves');
              if (el) {
                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                el.style.transition = 'box-shadow .25s';
                el.style.boxShadow = '0 0 0 2px var(--rg-green-700)';
                setTimeout(() => { el.style.boxShadow = ''; }, 1800);
              }
            }, 80);
          }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
            <path d="M6 1v9M2.5 6.5L6 10l3.5-3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Ver el total de todas las claves
        </button>

        {loading && <div style={{ textAlign: 'center', padding: 28, color: 'var(--rg-muted)' }}>Cargando…</div>}
        {!loading && (!ocs || ocs.length === 0) && (
          <div style={{ textAlign: 'center', padding: 28, color: 'var(--rg-muted)', fontSize: 12.5 }}>
            Sin OCs registradas para esta clave todavía.
          </div>
        )}
        {!loading && ocs && ocs.length > 0 && (
          <div style={{ overflowX: 'auto' }}>
            <table className="rg-table" style={{ width: '100%' }}>
              <thead>
                <tr>
                  <th style={{ textAlign: 'left' }}>Folio</th>
                  <th style={{ textAlign: 'left' }}>Fecha</th>
                  <th style={{ textAlign: 'left' }}>Descripción</th>
                  <th style={{ textAlign: 'right' }}>Monto</th>
                  <th style={{ textAlign: 'right' }}>Ver</th>
                </tr>
              </thead>
              <tbody>
                {/* Una OC con dos partidas del mismo insumo vuelve dos veces: el id
                    solo no es único, hay que combinarlo con la posición. */}
                {ocs.map((r, i) => (
                  <tr key={r.id + '-' + i}>
                    <td className="rg-mono" style={{ fontSize: 11.5 }}>
                      {r.importada ? r.folio : fmtFolio(r.folio)}
                      {r.importada && <span style={{ marginLeft: 6, fontSize: 9, color: 'var(--rg-muted)', textTransform: 'uppercase' }}>importada</span>}
                    </td>
                    <td className="rg-mono" style={{ fontSize: 11 }}>{fmtFecha(r.fecha)}</td>
                    <td style={{ fontSize: 12, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={r.primera_partida}>
                      {r.primera_partida || '—'}
                    </td>
                    <td className="rg-mono" style={{ textAlign: 'right', fontSize: 12 }}>${fmtMoney(r.monto)}</td>
                    <td style={{ textAlign: 'right' }}>
                      <button className="rg-icon-btn" title="Ver detalle de la OC" onClick={() => verDetalle(r)} disabled={loadingImp}>
                        {Icon.eye(14)}
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </RgModal>

      {/* Solo lectura: desde aquí no se registran pagos de OCs vivas — eso vive
          en Órdenes de Compra. Las importadas sí se pueden editar (EditOCModal,
          tal cual funciona en "Importar OCs"). */}
      <OCDetailModal open={!!detailOcId} onClose={() => setDetailOcId(null)} ocId={detailOcId} user={user} readOnly/>
      <EditOCModal open={!!impRow} row={impRow} proyectos={proyectos} onClose={() => setImpRow(null)} onSaved={() => setImpRow(null)}/>
    </>
  );
}

// ─── Panel de presupuestos: tarjetas con barra de utilización ─────────────────
function BudgetPanel({ proyectoid, onVerOcs, presupuestos, combinados, loading }) {
  const [ordenarLimite, setOrdenarLimite] = useState(false);

  // Suma de las claves con tope. Va aqui arriba a proposito: hay un return
  // temprano mas abajo (cargando) y un hook despues de el cambia el numero de
  // hooks entre renders — React tumba el componente con "Rendered fewer hooks".
  const totalesClaves = useMemo(() => {
    // Los presupuestos combinados son una tarjeta más y sus claves ya no vienen
    // en la lista suelta (el backend las quita para no contarlas dos veces), así
    // que entran aquí por su propio tope.
    const conTope = [
      ...(presupuestos || []).filter(p => !p.sin_tope && !p.sin_presupuesto),
      ...(combinados   || []).filter(c => (Number(c.monto) || 0) > 0),
    ];
    if (!conTope.length) return null;
    const nComb = (combinados || []).filter(c => (Number(c.monto) || 0) > 0).length;
    return {
      claves:   conTope.length,
      nComb,
      monto:    conTope.reduce((a, p) => a + (Number(p.monto) || 0), 0),
      pagado:   conTope.reduce((a, p) => a + (Number(p.pagado_iva) || 0), 0),
      porPagar: conTope.reduce((a, p) => a + (Number(p.por_pagar_iva) || 0), 0),
    };
  }, [presupuestos, combinados]);


  if (loading) return (
    <div className="rg-card">
      <div className="rg-card-header">
        <div><h3>Presupuesto Global por Insumo</h3><div className="sub">Cargando…</div></div>
      </div>
    </div>
  );

  // Solo se muestran claves/combinados con gasto real ejercido — una clave en
  // $0 no aporta nada visible aquí y solo abulta el DOM sin necesidad.
  const presupuestosConGasto = (presupuestos || []).filter(p => p.gastado > 0);
  const combinadosConGasto   = (combinados   || []).filter(c => c.gastado > 0);
  const totalSinFiltro = (presupuestos?.length || 0) + (combinados?.length || 0);

  // Orden descendente por % del límite consumido (más cerca del límite, más
  // arriba) — ayuda a ubicar rápido qué insumos están más cerca de excederse.
  // pct siempre es numérico (nunca null), así que este sort nunca da NaN.
  const listaOrdenada = ordenarLimite
    ? [...presupuestosConGasto].sort((a, b) => b.pct - a.pct)
    : presupuestosConGasto;
  const combinadosList = combinadosConGasto;
  const totalCount = presupuestosConGasto.length + combinadosList.length;

  return (
    <div className="rg-card">
      <div className="rg-card-header">
        <div>
          <h3>Presupuesto Global por Insumo</h3>
          <div className="sub">
            {totalCount > 0
              ? `${totalCount} entradas${combinadosList.length ? ` (${combinadosList.length} combinadas)` : ''} con gasto ejercido · clic en una tarjeta para ver sus OCs`
              : (totalSinFiltro > 0
                  ? "Hay claves con tope asignado, pero ninguna con gasto ejercido todavía"
                  : "Sin claves con OC ni tope de Contraloría para este proyecto todavía")}
          </div>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          {presupuestosConGasto.length > 0 && (
            <button className={"rg-btn" + (ordenarLimite ? " primary" : "")} onClick={() => setOrdenarLimite(o => !o)}
              title="Ordenar por % del límite consumido (más cerca del límite, más arriba)">
              {Icon.filter(13)} % límite
            </button>
          )}
        </div>
      </div>

      {totalCount === 0 ? (
        <div className="rg-budget-empty">
          {totalSinFiltro > 0
            ? "Ninguna clave tiene gasto ejercido todavía — aparecerán aquí en cuanto registren una OC pagada o con importe real."
            : "Sin presupuestos. Las claves aparecen solas en cuanto tengan una OC real (viva o importada) o un tope definido por Contraloría."}
        </div>
      ) : (
        <div className="rg-budget-grid">
          {combinadosList.map(c => {
            const cls = budgetBarClass(c.pct);
            const fillW = Math.min(c.pct, 100).toFixed(1);
            return (
              <div key={"comb" + c.id} className={"rg-budget-item " + (c.severidad || "")}
                onClick={() => onVerOcs({ kind: "combinado", data: c })} style={{ cursor: "pointer" }}>
                <div className="rg-budget-item-head">
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 9.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", color: "#8a6d1f" }}>Combinado</div>
                    <div style={{ fontSize: 12, fontWeight: 700, color: "var(--rg-green-700)" }}>{c.nombre}</div>
                    <div style={{ fontSize: 11, color: "var(--rg-ink)", marginTop: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                      {c.miembros.length} clave{c.miembros.length !== 1 ? "s" : ""}
                    </div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 3, flexShrink: 0 }}>
                    {c.severidad && <GolfFlag level={c.severidad} size={14} animate={c.severidad !== "warn"}/>}
                  </div>
                </div>
                <BarraPresupuesto monto={c.monto} pagado={c.pagado_iva} porPagar={c.por_pagar_iva}/>
                <CifrasPresupuesto monto={c.monto} pagado={c.pagado_iva} porPagar={c.por_pagar_iva}/>
              </div>
            );
          })}
          {listaOrdenada.map(pp => {
            const cls = budgetBarClass(pp.pct);
            const fillW = Math.min(pp.pct, 100).toFixed(1);
            return (
              <div key={pp.insumoid} className={"rg-budget-item " + (pp.severidad || "")}
                onClick={() => onVerOcs({ kind: "pp", data: pp })} style={{ cursor: "pointer" }}>
                <div className="rg-budget-item-head">
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontFamily: "var(--rg-font-mono)", fontSize: 11.5, fontWeight: 700, color: "var(--rg-green-700)" }}>{pp.insumo_clave}</div>
                    <div style={{ fontSize: 11, color: "var(--rg-ink)", marginTop: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }} title={pp.insumo_descripcion}>{pp.insumo_descripcion}</div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 3, flexShrink: 0 }}>
                    <span style={{ fontSize: 10, fontFamily: "var(--rg-font-mono)", background: "var(--rg-cream)", border: "1px solid var(--rg-line)", borderRadius: 4, padding: "1px 5px", color: "var(--rg-muted)" }}>{pp.nombrefamilia}</span>
                    {pp.severidad && <GolfFlag level={pp.severidad} size={14} animate={pp.severidad !== "warn"}/>}
                  </div>
                </div>
                {(pp.sin_tope || pp.sin_presupuesto) ? (
                  <div className="rg-budget-nums" style={{ padding: "6px 0" }}>
                    <span>Ejercido: ${fmtMoney(pp.gastado, { compact: true })}</span>
                    <span style={{ fontSize: 10.5, fontWeight: 700, color: "var(--rg-muted)", textTransform: "uppercase", letterSpacing: "0.04em" }}>
                      {pp.sin_tope ? "Sin tope (Contraloría)" : "Sin presupuesto asignado"}
                    </span>
                  </div>
                ) : (
                  <>
                    <BarraPresupuesto monto={pp.monto} pagado={pp.pagado_iva} porPagar={pp.por_pagar_iva}/>
                    <CifrasPresupuesto monto={pp.monto} pagado={pp.pagado_iva} porPagar={pp.por_pagar_iva}/>
                    <TopeDesglose pp={pp} style={{ marginTop: 2 }}/>
                  </>
                )}
                {pp.descripcion && (
                  <div style={{ fontSize: 10.5, color: "var(--rg-muted)", lineHeight: 1.4, borderTop: "1px dashed var(--rg-line)", paddingTop: 6, marginTop: 2 }}>{pp.descripcion}</div>
                )}
              </div>
            );
          })}
        </div>
      )}

      {/* Suma de todas las claves con tope. Es el mismo desglose de las tarjetas,
          para poder leer el proyecto completo sin ir sumando a mano. */}
      {totalesClaves && (
        <div id="rg-totales-claves" className="rg-card" style={{ margin: "0 14px 14px", background: "var(--rg-cream)" }}>
          <div className="rg-card-header" style={{ paddingBottom: 4 }}>
            <div>
              <h3 style={{ fontSize: 13 }}>Total de las {totalesClaves.claves} claves con presupuesto</h3>
              <div className="sub">
                Mismas cifras que las tarjetas · el gasto va con IVA, el presupuesto es el de Contraloría
                {totalesClaves.nComb > 0 && ` · incluye ${totalesClaves.nComb} presupuesto${totalesClaves.nComb !== 1 ? 's' : ''} combinado${totalesClaves.nComb !== 1 ? 's' : ''}`}
              </div>
            </div>
          </div>
          <div style={{ padding: "0 16px 14px" }}>
            <BarraPresupuesto monto={totalesClaves.monto} pagado={totalesClaves.pagado} porPagar={totalesClaves.porPagar}/>
            <CifrasPresupuesto monto={totalesClaves.monto} pagado={totalesClaves.pagado}
                               porPagar={totalesClaves.porPagar} compact={false}/>
          </div>
        </div>
      )}
    </div>
  );
}

// Descarga del REPORTE DE CONSUMO en Excel — el mismo reporte que Contraloría,
// con las cifras de aquí (api/export_consumo.php usa presuClavesProyecto(), la
// misma función que pinta estas tarjetas, para que descarga y pantalla no puedan
// diferir). Ocupa el lugar del viejo "+ Alerta": las alertas ya no se crean a
// mano, se derivan de la OC real contra el tope de Contraloría.
function BotonReporteConsumo({ proyecto }) {
  const [bajando, setBajando] = useState(false);
  const pid = proyecto?.id;

  async function descargar() {
    if (!pid || bajando) return;
    setBajando(true);
    try {
      const res = await fetch('api/export_consumo.php?proyectoid=' + pid, { credentials: 'same-origin' });
      if (!res.ok) {
        // El endpoint responde JSON cuando algo falla; el éxito es binario.
        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;
      a.download = `Reporte_Consumo_${proyecto.clave || pid}.xlsx`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (err) { toast.error(err.message); }
    finally { setBajando(false); }
  }

  return (
    <button className="rg-btn primary" onClick={descargar} disabled={!pid || bajando}
      title={pid ? 'Descargar el Reporte de consumo de este proyecto en Excel' : 'Elige un proyecto primero'}>
      <svg width="13" height="13" viewBox="0 0 12 12" fill="none" aria-hidden="true" style={{ marginRight: 2 }}>
        <path d="M6 1v7M3 5.5L6 8.5 9 5.5M1.5 10.5h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      {bajando ? 'Generando…' : 'Reporte de consumo'}
    </button>
  );
}

function DashboardView({ thresholds, setThresholds, onNav, alertas, setAlertas, user, onLogout, anio, setAnio }) {
  const [proyectoid,    setProyectoid]    = useState(null);
  const [modalOpen,     setModalOpen]     = useState(false);
  const [prefill,       setPrefill]       = useState(null);
  const [saving,        setSaving]        = useState(false);
  const [ocsModalTarget, setOcsModalTarget] = useState(null);

  const { data: proyectos, loading: loadingProys } = useApiData('proyectos.php');

  const { data: ordenesData, loading: loadingOrdenes, reload: reloadOrdenes } = useApiData(
    'ordenes.php',
    { proyectoid, limit: 100 },
    !proyectoid
  );

  const { data: presupuestosData, loading: loadingPpto, reload: reloadPpto } = useApiData(
    'presupuestos_proyecto.php',
    { proyectoid },
    !proyectoid
  );

  // Presupuestos combinados (v8.0) — solo lectura aquí; gestión completa en
  // "Presupuestos" (rg-alerts.jsx).
  const { data: combinadosData } = useApiData(
    'presupuesto_combinado.php',
    { proyectoid },
    !proyectoid
  );

  // Resumen de alertas de presupuesto por proyecto — para badges en ProjectPicker
  const { data: pptoResumen, reload: reloadResumen } = useApiData(
    'presupuestos_proyecto.php',
    { mode: 'resumen' }
  );

  // Seleccionar primer proyecto al cargar
  useEffect(() => {
    if (proyectos && proyectos.length > 0 && !proyectoid) {
      setProyectoid(proyectos[0].id);
    }
  }, [proyectos]);

  const proyecto = useMemo(() =>
    (proyectos || []).find(p => p.id === proyectoid) || null,
    [proyectos, proyectoid]
  );

  // Mapear OCs a formato de tarea Gantt (14 días de visibilidad por barra)
  const tareas = useMemo(() => {
    if (!ordenesData?.rows) return [];
    return ordenesData.rows.map(oc => {
      const finDate = new Date((oc.fecha || new Date().toISOString().slice(0,10)) + 'T00:00:00');
      finDate.setDate(finDate.getDate() + 14);
      return {
        id:         oc.id,
        proyectoid: oc.proyectoid,
        clave:      `#${oc.folio}`,
        desc:       oc.proveedor_nombre || `OC #${oc.folio}`,
        inicio:     oc.fecha,
        fin:        finDate.toISOString().slice(0, 10),
        monto:      oc.total,
        moneda:     oc.moneda,
        progreso:   oc.statuspago === 'PAGADO' ? 100 : oc.statuspago === 'PAGO_PARCIAL' ? 50 : 0,
        statuspago: oc.statuspago
      };
    });
  }, [ordenesData]);

  const projectAlerts = alertas.filter(a => a.proyectoid === proyectoid && a.activa !== false);

  async function handleSaveAlert(payload) {
    setSaving(true);
    try {
      if (prefill?.id) {
        await apiFetch('alertas.php?id=' + prefill.id, 'PUT', payload);
        setAlertas(alertas.map(a => a.id === prefill.id ? { ...a, ...payload } : a));
        toast('Alerta actualizada');
      } else {
        const res = await apiFetch('alertas.php', 'POST', {
          ...payload,
          proyectoid,
          autor: user?.nombre || 'Sistema'
        });
        setAlertas([...alertas, {
          ...payload, id: res.id, proyectoid,
          autor: user?.nombre, activa: true
        }]);
        toast('Alerta creada');
      }
      setModalOpen(false);
    } catch (e) {
      toast.error(e.message);
    } finally {
      setSaving(false);
    }
  }

  // Skeleton mientras cargan proyectos
  if (loadingProys || !proyectos) {
    return (
      <div className="rg-app">
        <Sidebar active="dashboard" onNav={onNav} alertCount={alertas.filter(a => a.activa !== false).length} user={user} onLogout={onLogout}/>
        <main className="rg-main">
          <Topbar crumbs="Compras / Dashboard" title="Panel de proyectos"/>
          <div className="rg-content">
            {[1,2,3].map(i => (
              <div key={i} className="rg-card" style={{ padding: 18, display: "flex", flexDirection: "column", gap: 10 }}>
                {[1,2].map(j => <div key={j} style={{ height: 14, borderRadius: 4, background: "var(--rg-line)", width: j===1?"60%":"85%", animation: "rg-pulse 1.3s ease-in-out infinite" }}/>)}
              </div>
            ))}
          </div>
        </main>
      </div>
    );
  }

  const today = new Date().toLocaleDateString('es-MX', { day: '2-digit', month: 'short', year: 'numeric' });

  return (
    <div className="rg-app">
      <Sidebar active="dashboard" onNav={onNav} alertCount={alertas.filter(a => a.activa !== false).length} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar crumbs="Compras / Dashboard" title="Panel de proyectos"
          actions={<BotonReporteConsumo proyecto={proyecto}/>}/>
        <div className="rg-content">

          {/* Selector de proyecto */}
          <div className="rg-card" style={{ padding: "14px 18px" }}>
            <div className="rg-row" style={{ justifyContent: "space-between", marginBottom: 12 }}>
              <div>
                <div style={{ fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--rg-muted)", fontWeight: 500 }}>Selecciona proyecto</div>
                <div style={{ fontSize: 12, color: "var(--rg-muted)", marginTop: 4 }}>Cada proyecto muestra sus OCs como actividades en el Gantt</div>
              </div>
              <span className="rg-pill">
                <span className="rg-dot" style={{ background: "var(--rg-flag-over)" }}/> Hoy: {today}
              </span>
            </div>
            <ProjectPicker value={proyectoid} onChange={setProyectoid} proyectos={proyectos} alertas={alertas} pptoResumen={pptoResumen || {}}/>
          </div>

          {/* KPIs del proyecto */}
          {proyecto && <ProjectKpis proyecto={proyecto} tareas={tareas} presupuestos={presupuestosData} combinados={combinadosData}/>}

          {/* Panel de presupuestos por insumo */}
          {proyecto && (
            <BudgetPanel
              proyectoid={proyectoid}
              presupuestos={presupuestosData || []}
              combinados={combinadosData || []}
              loading={loadingPpto}
              onVerOcs={(target) => setOcsModalTarget(target)}
            />
          )}

          {/* Gantt */}
          {proyecto && (
            <div className="rg-card" style={{ overflow: "visible" }}>
              <div className="rg-card-header">
                <div>
                  <h3>Diagrama de Gantt · {proyecto.nombre}</h3>
                  <div className="sub">
                    {loadingPpto ? "Cargando…" : `${(presupuestosData || []).length} insumos con presupuesto · ${shortDate(proyecto.inicio)} → ${shortDate(proyecto.fin)} · ${projectAlerts.length} alertas activas`}
                  </div>
                </div>
                <div className="rg-row">
                  <button className="rg-btn" onClick={() => reloadOrdenes()}>{Icon.filter()} Recargar</button>
                </div>
              </div>
              {loadingPpto
                ? <div style={{ padding: "18px 20px", display: "flex", flexDirection: "column", gap: 10 }}>
                    {[1,2,3,4].map(i => <div key={i} style={{ height: 13, borderRadius: 4, background: "var(--rg-line)", width: i%2===0?"75%":"55%", animation: "rg-pulse 1.3s ease-in-out infinite" }}/>)}
                  </div>
                : <GanttChart proyecto={proyecto} presupuestos={presupuestosData || []} alertas={projectAlerts}
                    onAlertClick={(a) => { setPrefill(a); setModalOpen(true); }}
                    onAddAlert={() => { setPrefill(null); setModalOpen(true); }}/>
              }
            </div>
          )}

        </div>
      </main>

      <NewAlertModal open={modalOpen} onClose={() => { setModalOpen(false); setPrefill(null); }}
        proyecto={proyecto} tareas={tareas} prefill={prefill} saving={saving}
        onSave={handleSaveAlert}/>

      <OcsPorInsumoModal
        open={!!ocsModalTarget}
        onClose={() => setOcsModalTarget(null)}
        proyectoid={proyectoid}
        target={ocsModalTarget}
        user={user}
        proyectos={proyectos}
      />
    </div>
  );
}

Object.assign(window, { DashboardView, NewAlertModal, BudgetPanel, OcsPorInsumoModal, shortDate });