// ROCA GOLF — Presupuestos por Proyecto (CRUD completo)

function pctColor(pct) {
  if (pct >= 100) return '#b71c1c';
  if (pct >= 90)  return '#e53935';
  if (pct >= 80)  return '#f57c00';
  if (pct >= 70)  return '#f9a825';
  return '#2d6a44';
}

const SEV_LABEL = { over: 'Excedido', alert: 'Alerta', warn: 'Aviso' };

const IcoEdit = (s = 13) => (
  <svg width={s} height={s} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"
    strokeLinecap="round" strokeLinejoin="round">
    <path d="M2 10.5V12h1.5l5.8-5.8-1.5-1.5L2 10.5z"/>
    <path d="M10.3 3.7a1 1 0 0 1 0 1.4L9.5 5.9 8 4.4l.8-.8a1 1 0 0 1 1.5 0z"/>
  </svg>
);

// ── Tarjeta de presupuesto ─────────────────────────────────────────────────
function PptoCard({ pp, onEdit, onReset }) {
  const [confirmDel, setConfirmDel] = useState(false);
  const c = pctColor(pp.pct);
  const famColor = (GANTT_FAM_COLORS || {})[pp.codigofamilia] || '#888';

  function handleReset() {
    if (!confirmDel) { setConfirmDel(true); setTimeout(() => setConfirmDel(false), 3000); return; }
    onReset();
  }

  return (
    <div style={{
      border: '1px solid ' + (pp.severidad === 'over' ? '#e5393533' : pp.severidad === 'alert' ? '#f57c0033' : 'var(--rg-line-2)'),
      borderRadius: 10,
      background: pp.severidad === 'over' ? 'rgba(183,28,28,0.025)' : 'var(--rg-paper)',
      padding: '13px 16px',
      display: 'flex',
      flexDirection: 'column',
      gap: 10,
    }}>

      {/* Fila 1: clave · descripción · badges · acciones */}
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        <span style={{
          fontFamily: 'var(--rg-font-mono)', fontWeight: 700, fontSize: 10.5,
          color: famColor, background: famColor + '18', border: '1px solid ' + famColor + '44',
          borderRadius: 4, padding: '2px 6px', flexShrink: 0, marginTop: 1,
        }}>{pp.insumo_clave}</span>

        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--rg-ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
            title={pp.insumo_descripcion}>{pp.insumo_descripcion}</div>
          {pp.descripcion && (
            <div style={{ fontSize: 11, color: 'var(--rg-muted)', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {pp.descripcion}
            </div>
          )}
        </div>

        {pp.severidad && (
          <span className={"rg-alert-tag " + pp.severidad} style={{ flexShrink: 0 }}>
            {SEV_LABEL[pp.severidad]}
          </span>
        )}

        <button className="rg-icon-btn" onClick={onEdit} title="Editar" style={{ flexShrink: 0 }}>
          {IcoEdit(13)}
        </button>
        {pp.id != null && (
          <button
            className={"rg-icon-btn" + (confirmDel ? " danger" : "")}
            onClick={handleReset}
            title={confirmDel ? "¿Confirmar restablecer?" : "Restablecer"}
            style={{ flexShrink: 0 }}>
            {confirmDel
              ? <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.05em', padding: '0 2px' }}>OK?</span>
              : Icon.x()}
          </button>
        )}
      </div>

      {/* Fila 2: barra de progreso (o "Sin tope"/"Sin presupuesto" si no aplica) */}
      {(pp.sin_tope || pp.sin_presupuesto) ? (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 10.5, color: 'var(--rg-muted)' }}>
          <span>
            Ejercido: <strong>${fmtMoney(pp.gastado, { compact: true })}</strong>
          </span>
          <span style={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
            {pp.sin_tope ? 'Sin tope (Contraloría)' : 'Sin presupuesto asignado'}
          </span>
        </div>
      ) : (
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--rg-muted)', marginBottom: 5 }}>
            <span>
              Ejercido: <strong style={{ color: c }}>${fmtMoney(pp.gastado, { compact: true })}</strong>
              {' '}/ <strong>${fmtMoney(pp.monto, { compact: true })}</strong>
            </span>
            <span>
              Disponible: <strong style={{ color: pp.disponible < 0 ? '#b71c1c' : 'var(--rg-ink)' }}>
                {pp.disponible < 0 ? '-' : ''}${fmtMoney(Math.abs(pp.disponible), { compact: true })}
              </strong>
            </span>
          </div>
          <TopeDesglose pp={pp} style={{ marginTop: -2, marginBottom: 6 }}/>

          {/* Track con tick de umbral */}
          <div style={{ height: 10, background: c + '18', borderRadius: 5, overflow: 'visible', border: '1px solid ' + c + '33', position: 'relative' }}>
            <div style={{ width: Math.min(pp.pct, 100) + '%', height: '100%', background: c, borderRadius: 5, minWidth: pp.pct > 0 ? 3 : 0 }}/>
            <div title={"Umbral " + pp.pct_umbral + "%"} style={{
              position: 'absolute', top: -2, bottom: -2, left: pp.pct_umbral + '%',
              width: 2, background: 'rgba(0,0,0,0.25)', zIndex: 2, borderRadius: 1,
            }}/>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 3, fontSize: 9.5, color: 'var(--rg-muted)' }}>
            <span>0%</span>
            <span style={{ fontWeight: 700, color: c, fontSize: 11 }}>{pp.pct.toFixed(1)}%</span>
            <span>100%</span>
          </div>
        </div>
      )}

      {/* Fila 3: meta */}
      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', fontSize: 10.5, color: 'var(--rg-muted)', fontFamily: 'var(--rg-font-mono)', borderTop: '1px solid var(--rg-line-2)', paddingTop: 8 }}>
        <span>{pp.nombrefamilia}</span>
        <span>Umbral {pp.pct_umbral}%</span>
        {(pp.fecha_inicio || pp.fecha_fin) && (
          <span>{shortDate(pp.fecha_inicio || '')} → {shortDate(pp.fecha_fin || '')}</span>
        )}
      </div>
    </div>
  );
}

// ── Modal editar (v7.0: ya no crea claves nuevas — aparecen solas por tener OC
//    real o tope de Contraloría; este modal solo ajusta % umbral/fechas/
//    descripción/monto local de una clave que ya se muestra) ────────────────
function PptoFormModal({ open, onClose, proyectoid, proyecto, editing, onSaved }) {
  const [insumo,      setInsumo]      = useState(null);
  const [monto,       setMonto]       = useState('');
  const [umbral,      setUmbral]      = useState(80);
  const [fechaInicio, setFechaInicio] = useState('');
  const [fechaFin,    setFechaFin]    = useState('');
  const [descripcion, setDescripcion] = useState('');
  const [saving,      setSaving]      = useState(false);

  const montoEsContraloria = !!(editing && editing.origen_monto === 'contraloria');

  useEffect(() => {
    if (!open || !editing) return;
    setInsumo({ id: editing.insumoid, clave: editing.insumo_clave, descripcion: editing.insumo_descripcion, nombrefamilia: editing.nombrefamilia });
    setMonto(String(editing.monto));
    setUmbral(editing.pct_umbral);
    setFechaInicio(editing.fecha_inicio || '');
    setFechaFin(editing.fecha_fin || '');
    setDescripcion(editing.descripcion || '');
  }, [open, editing]);

  async function handleSave() {
    if (!insumo) return;
    let m;
    if (montoEsContraloria) {
      m = parseFloat(editing.monto_contraloria);
    } else {
      m = parseFloat(monto);
      if (!m || m <= 0) { toast.error('El monto debe ser mayor a 0'); return; }
    }
    setSaving(true);
    try {
      const body = {
        monto:        m,
        pct_umbral:   Math.min(100, Math.max(1, +umbral || 80)),
        fecha_inicio: fechaInicio || null,
        fecha_fin:    fechaFin    || null,
        descripcion:  descripcion.trim(),
      };
      // La clave ya existe (tiene OC/tope) — 'id' solo existe si ya se habían
      // guardado metadatos locales antes. Sin id: este primer guardado los crea.
      if (editing && editing.id != null) {
        await apiFetch('presupuestos_proyecto.php?id=' + editing.id, 'PUT', body);
        toast('Presupuesto actualizado');
      } else {
        await apiFetch('presupuestos_proyecto.php', 'POST', { ...body, proyectoid, insumoid: insumo.id });
        toast('Presupuesto guardado');
      }
      onSaved();
      onClose();
    } catch (e) {
      toast.error(e.message);
    } finally {
      setSaving(false);
    }
  }

  if (!open || !editing) return null;

  return (
    <div className="rg-modal-bg" onClick={onClose}>
      <div className="rg-modal" style={{ maxWidth: 500 }} onClick={e => e.stopPropagation()}>
        <div className="rg-modal-head">
          <h3>Editar presupuesto</h3>
          <button className="rg-icon-btn" onClick={onClose}>{Icon.x()}</button>
        </div>

        <div className="rg-modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>

          {/* Proyecto */}
          <div style={{ padding: '8px 12px', background: 'var(--rg-cream)', borderRadius: 7, fontSize: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 10, height: 10, borderRadius: 2, background: proyecto?.color || '#ccc', display: 'inline-block', flexShrink: 0 }}/>
            <strong style={{ color: 'var(--rg-ink)' }}>{proyecto?.nombre}</strong>
          </div>

          {/* Insumo */}
          <div className="rg-field">
            <label>Insumo</label>
            <div style={{ padding: '9px 12px', background: 'var(--rg-cream)', borderRadius: 7, fontSize: 12, display: 'flex', gap: 8, alignItems: 'center' }}>
              <strong style={{ fontFamily: 'var(--rg-font-mono)', color: 'var(--rg-green-700)' }}>{editing.insumo_clave}</strong>
              <span style={{ color: 'var(--rg-ink)' }}>{editing.insumo_descripcion}</span>
            </div>
          </div>

          {/* Monto + umbral */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 12 }}>
            <div className="rg-field">
              <label>Monto presupuestado ($)</label>
              {montoEsContraloria ? (
                <>
                  <input className="rg-input" type="text" disabled
                    value={editing.sin_tope ? 'Sin tope' : ('$' + fmtMoney(editing.monto_contraloria))}/>
                  <div style={{ fontSize: 10.5, color: 'var(--rg-muted)', marginTop: 4 }}>
                    {editing.sin_tope
                      ? 'Sin tope — Contraloría autorizó este insumo sin límite en pesos.'
                      : (editing.monto_adicional > 0
                          ? `Vigente en Contraloría: original $${fmtMoney(editing.monto_original)} + adicional $${fmtMoney(editing.monto_adicional)} — aquí solo se ajusta el % de alarma.`
                          : 'Definido en Contraloría — aquí solo se ajusta el % de alarma.')}
                  </div>
                </>
              ) : (
                <>
                  <input className="rg-input" type="number" min="1" step="0.01" placeholder="0.00"
                    value={monto} onChange={e => setMonto(e.target.value)}/>
                  {editing.sin_presupuesto && (
                    <div style={{ fontSize: 10.5, color: 'var(--rg-muted)', marginTop: 4 }}>
                      Sin presupuesto asignado todavía — captura un monto local.
                    </div>
                  )}
                </>
              )}
            </div>
            <div className="rg-field">
              <label>Umbral alerta (%)</label>
              <input className="rg-input" type="number" min="1" max="100"
                value={umbral} onChange={e => setUmbral(e.target.value)}/>
            </div>
          </div>

          {/* Fechas */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div className="rg-field">
              <label>Fecha inicio (Gantt)</label>
              <input className="rg-input" type="date" value={fechaInicio} onChange={e => setFechaInicio(e.target.value)}/>
            </div>
            <div className="rg-field">
              <label>Fecha fin (Gantt)</label>
              <input className="rg-input" type="date" value={fechaFin} onChange={e => setFechaFin(e.target.value)}/>
            </div>
          </div>

          {/* Descripción */}
          <div className="rg-field">
            <label>Descripción (opcional)</label>
            <input className="rg-input" placeholder="Notas o contexto adicional…"
              value={descripcion} onChange={e => setDescripcion(e.target.value)}/>
          </div>
        </div>

        <div className="rg-modal-foot">
          <button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
          <button className="rg-btn primary" onClick={handleSave} disabled={saving}>
            {saving ? 'Guardando…' : 'Guardar'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Presupuestos combinados (v8.0) — varias claves bajo un solo tope ────────
// Ej. "Central de riego" = 25,000,000 repartidos entre muchas claves del
// catálogo. Mientras una clave esté en un combinado deja de mostrarse suelta
// (ver el filtro en api/presupuestos_proyecto.php) — quitarla del combinado
// la regresa individual sin pasos extra.

// Árbol de selección de claves: familia → subfamilia → clave, con checkbox por
// nivel (clic en una subfamilia selecciona/deselecciona TODAS sus claves de un
// jalón; clic en una clave selecciona solo esa). Reutilizado por crear y por
// "agregar más claves".
function InsumoTreePicker({ grupo, yaAsignadosMap, selected, onToggle, onToggleMany }) {
  const { data: insData, loading } = useApiData('insumos.php', { grupo: grupo || '', limit: 500 });
  const rows = insData?.rows || [];
  const [expandFam, setExpandFam] = useState({});

  const tree = useMemo(() => {
    const t = {};
    for (const r of rows) {
      const famKey = r.codigofamilia + ' · ' + r.nombrefamilia;
      const subKey = r.codigosubfamilia + ' · ' + r.nombresubfamilia;
      if (!t[famKey]) t[famKey] = {};
      if (!t[famKey][subKey]) t[famKey][subKey] = [];
      t[famKey][subKey].push(r);
    }
    return t;
  }, [rows]);

  if (loading) return <div style={{ padding: 20, textAlign: 'center', color: 'var(--rg-muted)', fontSize: 12 }}>Cargando catálogo…</div>;

  return (
    <div style={{ maxHeight: 320, overflowY: 'auto', border: '1px solid var(--rg-line)', borderRadius: 8 }}>
      {Object.entries(tree).map(([fam, subs]) => (
        <div key={fam} style={{ borderBottom: '1px solid var(--rg-line-2)' }}>
          <div onClick={() => setExpandFam(s => ({ ...s, [fam]: !s[fam] }))}
            style={{ padding: '8px 12px', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', background: 'var(--rg-cream)', display: 'flex', justifyContent: 'space-between' }}>
            <span>{fam}</span>
            <span style={{ color: 'var(--rg-muted)', fontWeight: 400 }}>{expandFam[fam] ? '▲' : '▼'}</span>
          </div>
          {expandFam[fam] && Object.entries(subs).map(([sub, items]) => {
            const idsSub = items.map(i => i.id).filter(id => !yaAsignadosMap[id]);
            const allChecked = idsSub.length > 0 && idsSub.every(id => selected.has(id));
            return (
              <div key={sub} style={{ padding: '4px 12px 4px 20px' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, padding: '4px 0', cursor: idsSub.length ? 'pointer' : 'default', opacity: idsSub.length ? 1 : 0.5 }}>
                  <input type="checkbox" checked={allChecked} disabled={!idsSub.length}
                    onChange={() => onToggleMany(idsSub, !allChecked)}/>
                  {sub} <span style={{ fontWeight: 400, color: 'var(--rg-muted)' }}>({items.length})</span>
                </label>
                {items.map(it => (
                  <label key={it.id} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, padding: '3px 0 3px 18px', opacity: yaAsignadosMap[it.id] ? 0.45 : 1, cursor: yaAsignadosMap[it.id] ? 'default' : 'pointer' }}>
                    <input type="checkbox" disabled={!!yaAsignadosMap[it.id]} checked={selected.has(it.id)} onChange={() => onToggle(it.id)}/>
                    <span className="rg-mono" style={{ color: 'var(--rg-green-700)', fontWeight: 700 }}>{it.clave}</span>
                    <span style={{ color: 'var(--rg-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.descripcion}</span>
                    {yaAsignadosMap[it.id] && <span style={{ color: 'var(--rg-muted)', fontSize: 10 }}>ya en "{yaAsignadosMap[it.id]}"</span>}
                  </label>
                ))}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

function CombinadoFormModal({ open, onClose, proyectoid, proyecto, yaAsignadosMap, onSaved }) {
  const [nombre, setNombre]           = useState('');
  const [monto, setMonto]             = useState('');
  const [fechaInicio, setFechaInicio] = useState('');
  const [fechaFin, setFechaFin]       = useState('');
  const [descripcion, setDescripcion] = useState('');
  const [selected, setSelected]       = useState(() => new Set());
  const [saving, setSaving]           = useState(false);

  useEffect(() => {
    if (open) {
      setNombre(''); setMonto(''); setDescripcion('');
      setFechaInicio(proyecto?.inicio || ''); setFechaFin(proyecto?.fin || '');
      setSelected(new Set());
    }
  }, [open]);

  function toggle(id) { setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); }
  function toggleMany(ids, checked) { setSelected(s => { const n = new Set(s); ids.forEach(id => checked ? n.add(id) : n.delete(id)); return n; }); }

  async function crear() {
    if (!nombre.trim()) { toast.error('El nombre es obligatorio'); return; }
    const m = parseFloat(monto);
    if (!m || m <= 0) { toast.error('El monto debe ser mayor a 0'); return; }
    if (selected.size === 0) { toast.error('Selecciona al menos una clave'); return; }
    setSaving(true);
    try {
      const res = await apiFetch('presupuesto_combinado.php', 'POST', {
        proyectoid, nombre: nombre.trim(), monto: m,
        fecha_inicio: fechaInicio || null, fecha_fin: fechaFin || null,
        descripcion: descripcion.trim(), insumoids: Array.from(selected),
      });
      toast.success(`Combinado creado con ${res.agregados} claves` + (res.omitidos ? ` (${res.omitidos} ya estaban en otro combinado)` : ''));
      onSaved(); onClose();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  if (!open) return null;
  return (
    <RgModal open={open} onClose={onClose} title="Nuevo presupuesto combinado" width={660}
      footer={<><button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
        <button className="rg-btn primary" onClick={crear} disabled={saving}>{saving ? 'Guardando…' : 'Crear'}</button></>}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
        <div className="rg-field" style={{ gridColumn: '1 / -1' }}><label>Nombre</label>
          <input className="rg-input" placeholder="Ej: Central de riego" value={nombre} onChange={e => setNombre(e.target.value)}/></div>
        <div className="rg-field"><label>Presupuesto total ($)</label>
          <input className="rg-input" type="number" min="1" step="1000" placeholder="Ej: 25000000" value={monto} onChange={e => setMonto(e.target.value)}/></div>
        <div className="rg-field"><label>Umbral de alerta</label>
          <div style={{ padding: '9px 12px', background: 'var(--rg-cream)', borderRadius: 7, fontSize: 12, color: 'var(--rg-muted)' }}>Fijo en 80%</div></div>
        <div className="rg-field"><label>Fecha inicio</label>
          <input className="rg-input" type="date" value={fechaInicio} onChange={e => setFechaInicio(e.target.value)}/></div>
        <div className="rg-field"><label>Fecha fin</label>
          <input className="rg-input" type="date" value={fechaFin} onChange={e => setFechaFin(e.target.value)}/></div>
        <div className="rg-field" style={{ gridColumn: '1 / -1' }}><label>Descripción (opcional)</label>
          <input className="rg-input" value={descripcion} onChange={e => setDescripcion(e.target.value)}/></div>
      </div>
      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>
        Claves incluidas <span style={{ color: 'var(--rg-muted)', fontWeight: 400 }}>({selected.size} seleccionadas)</span>
      </div>
      <InsumoTreePicker grupo={proyecto?.catalogo_grupo} yaAsignadosMap={yaAsignadosMap}
        selected={selected} onToggle={toggle} onToggleMany={toggleMany}/>
    </RgModal>
  );
}

function CombinadoAddInsumosModal({ open, onClose, combinado, proyecto, yaAsignadosMap, onSaved }) {
  const [selected, setSelected] = useState(() => new Set());
  const [saving, setSaving]     = useState(false);
  useEffect(() => { if (open) setSelected(new Set()); }, [open]);

  function toggle(id) { setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); }
  function toggleMany(ids, checked) { setSelected(s => { const n = new Set(s); ids.forEach(id => checked ? n.add(id) : n.delete(id)); return n; }); }

  async function agregar() {
    if (selected.size === 0) { toast.error('Selecciona al menos una clave'); return; }
    setSaving(true);
    try {
      const res = await apiFetch('presupuesto_combinado.php?action=add_insumos&id=' + combinado.id, 'POST', { insumoids: Array.from(selected) });
      toast.success(`${res.agregados} claves agregadas` + (res.omitidos ? ` (${res.omitidos} ya estaban en otro combinado)` : ''));
      onSaved(); onClose();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  if (!open || !combinado) return null;
  return (
    <RgModal open={open} onClose={onClose} title={`Agregar claves a "${combinado.nombre}"`} width={660}
      footer={<><button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
        <button className="rg-btn primary" onClick={agregar} disabled={saving}>{saving ? 'Guardando…' : 'Agregar'}</button></>}>
      <div style={{ fontSize: 12, color: 'var(--rg-muted)', marginBottom: 10 }}>{selected.size} claves seleccionadas</div>
      <InsumoTreePicker grupo={proyecto?.catalogo_grupo} yaAsignadosMap={yaAsignadosMap}
        selected={selected} onToggle={toggle} onToggleMany={toggleMany}/>
    </RgModal>
  );
}

function CombinadoEditModal({ open, onClose, combinado, onSaved }) {
  const [nombre, setNombre]           = useState('');
  const [monto, setMonto]             = useState('');
  const [fechaInicio, setFechaInicio] = useState('');
  const [fechaFin, setFechaFin]       = useState('');
  const [descripcion, setDescripcion] = useState('');
  const [saving, setSaving]           = useState(false);

  useEffect(() => {
    if (open && combinado) {
      setNombre(combinado.nombre || '');
      setMonto(String(combinado.monto));
      setFechaInicio(combinado.fecha_inicio || '');
      setFechaFin(combinado.fecha_fin || '');
      setDescripcion(combinado.descripcion || '');
    }
  }, [open, combinado]);

  async function guardar() {
    if (!nombre.trim()) { toast.error('El nombre es obligatorio'); return; }
    const m = parseFloat(monto);
    if (!m || m <= 0) { toast.error('El monto debe ser mayor a 0'); return; }
    setSaving(true);
    try {
      await apiFetch('presupuesto_combinado.php?id=' + combinado.id, 'PUT', {
        nombre: nombre.trim(), monto: m, fecha_inicio: fechaInicio || null, fecha_fin: fechaFin || null, descripcion: descripcion.trim(),
      });
      toast.success('Presupuesto combinado actualizado');
      onSaved(); onClose();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  if (!open || !combinado) return null;
  return (
    <RgModal open={open} onClose={onClose} title="Editar presupuesto combinado" width={480}
      footer={<><button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
        <button className="rg-btn primary" onClick={guardar} disabled={saving}>{saving ? 'Guardando…' : 'Guardar'}</button></>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="rg-field"><label>Nombre</label><input className="rg-input" value={nombre} onChange={e => setNombre(e.target.value)}/></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <div className="rg-field"><label>Presupuesto total ($)</label><input className="rg-input" type="number" min="1" step="1000" value={monto} onChange={e => setMonto(e.target.value)}/></div>
          <div className="rg-field"><label>Umbral</label><div style={{ padding: '9px 12px', background: 'var(--rg-cream)', borderRadius: 7, fontSize: 12, color: 'var(--rg-muted)' }}>Fijo en 80%</div></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <div className="rg-field"><label>Fecha inicio</label><input className="rg-input" type="date" value={fechaInicio} onChange={e => setFechaInicio(e.target.value)}/></div>
          <div className="rg-field"><label>Fecha fin</label><input className="rg-input" type="date" value={fechaFin} onChange={e => setFechaFin(e.target.value)}/></div>
        </div>
        <div className="rg-field"><label>Descripción</label><input className="rg-input" value={descripcion} onChange={e => setDescripcion(e.target.value)}/></div>
      </div>
    </RgModal>
  );
}

function CombinadoCard({ c, onEdit, onDelete, onAddInsumos, onRemoveInsumo }) {
  const [expanded, setExpanded]     = useState(false);
  const [confirmDel, setConfirmDel] = useState(false);
  const col = pctColor(c.pct);

  function handleDelete() {
    if (!confirmDel) { setConfirmDel(true); setTimeout(() => setConfirmDel(false), 3000); return; }
    onDelete();
  }

  return (
    <div style={{
      border: '1px solid ' + (c.severidad === 'over' ? '#e5393533' : c.severidad === 'alert' ? '#f57c0033' : 'var(--rg-line-2)'),
      borderRadius: 10,
      background: c.severidad === 'over' ? 'rgba(183,28,28,0.025)' : 'var(--rg-paper)',
      padding: '13px 16px', display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        <span style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#8a6d1f', background: 'rgba(201,169,97,0.16)', border: '1px solid rgba(201,169,97,0.4)', borderRadius: 4, padding: '2px 6px', flexShrink: 0, marginTop: 1 }}>Combinado</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--rg-ink)' }}>{c.nombre}</div>
          {c.descripcion && <div style={{ fontSize: 11, color: 'var(--rg-muted)', marginTop: 1 }}>{c.descripcion}</div>}
        </div>
        {c.severidad && <span className={"rg-alert-tag " + c.severidad} style={{ flexShrink: 0 }}>{SEV_LABEL[c.severidad]}</span>}
        <button className="rg-icon-btn" onClick={onEdit} title="Editar" style={{ flexShrink: 0 }}>{IcoEdit(13)}</button>
        <button className={"rg-icon-btn" + (confirmDel ? " danger" : "")} onClick={handleDelete}
          title={confirmDel ? "¿Confirmar eliminar combinado?" : "Eliminar combinado"} style={{ flexShrink: 0 }}>
          {confirmDel ? <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.05em', padding: '0 2px' }}>OK?</span> : Icon.x()}
        </button>
      </div>

      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--rg-muted)', marginBottom: 5 }}>
          <span>Ejercido: <strong style={{ color: col }}>${fmtMoney(c.gastado, { compact: true })}</strong> / <strong>${fmtMoney(c.monto, { compact: true })}</strong></span>
          <span>Disponible: <strong style={{ color: c.disponible < 0 ? '#b71c1c' : 'var(--rg-ink)' }}>{c.disponible < 0 ? '-' : ''}${fmtMoney(Math.abs(c.disponible), { compact: true })}</strong></span>
        </div>
        <div style={{ height: 10, background: col + '18', borderRadius: 5, border: '1px solid ' + col + '33', position: 'relative' }}>
          <div style={{ width: Math.min(c.pct, 100) + '%', height: '100%', background: col, borderRadius: 5, minWidth: c.pct > 0 ? 3 : 0 }}/>
          <div title="Umbral 80%" style={{ position: 'absolute', top: -2, bottom: -2, left: '80%', width: 2, background: 'rgba(0,0,0,0.25)', zIndex: 2, borderRadius: 1 }}/>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 3, fontSize: 9.5, color: 'var(--rg-muted)' }}>
          <span>0%</span><span style={{ fontWeight: 700, color: col, fontSize: 11 }}>{c.pct.toFixed(1)}%</span><span>100%</span>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', fontSize: 10.5, color: 'var(--rg-muted)', fontFamily: 'var(--rg-font-mono)', borderTop: '1px solid var(--rg-line-2)', paddingTop: 8, alignItems: 'center' }}>
        <span>{c.miembros.length} clave{c.miembros.length !== 1 ? 's' : ''}</span>
        <span>Umbral 80%</span>
        {(c.fecha_inicio || c.fecha_fin) && <span>{shortDate(c.fecha_inicio || '')} → {shortDate(c.fecha_fin || '')}</span>}
        <button className="rg-btn" style={{ padding: '2px 8px', fontSize: 11 }} onClick={() => setExpanded(e => !e)}>{expanded ? 'Ocultar claves' : 'Ver claves'}</button>
        <button className="rg-btn" style={{ padding: '2px 8px', fontSize: 11 }} onClick={onAddInsumos}>{Icon.plus(11)} Agregar claves</button>
      </div>

      {expanded && (
        <div className="rg-budget-list">
          {c.miembros.map(m => (
            <div key={m.insumoid} className="rg-budget-list-row">
              <span style={{ fontFamily: 'var(--rg-font-mono)', fontSize: 11, fontWeight: 700, color: 'var(--rg-green-700)', flexShrink: 0, minWidth: 72 }}>{m.clave}</span>
              <span className="nm">{m.descripcion}</span>
              <button className="rg-icon-btn danger" title="Quitar del combinado (vuelve a verse individual)" onClick={() => onRemoveInsumo(m.insumoid)}>{Icon.x()}</button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Vista principal ────────────────────────────────────────────────────────
function AlertsView({ thresholds, setThresholds, onNav, alertas, setAlertas, user, onLogout }) {
  const [activeProj, setActiveProj] = useState(null);
  const [modal,      setModal]      = useState(false);
  const [editing,    setEditing]    = useState(null);

  const [showCombinadoForm, setShowCombinadoForm] = useState(false);
  const [editCombinado,     setEditCombinado]     = useState(null);
  const [addInsumosCombinado, setAddInsumosCombinado] = useState(null);

  const { data: proyectos } = useApiData('proyectos.php');
  const { data: presupuestosData, reload: reloadPpto } = useApiData(
    'presupuestos_proyecto.php',
    { proyectoid: activeProj },
    !activeProj
  );
  const { data: pptoResumen, reload: reloadResumen } = useApiData(
    'presupuestos_proyecto.php',
    { mode: 'resumen' }
  );
  const { data: combinadosData, reload: reloadCombinados } = useApiData(
    'presupuesto_combinado.php',
    { proyectoid: activeProj },
    !activeProj
  );

  // Bolsa de presupuesto adicional (rg_presupuesto_adicional, se captura en
  // Proyección de Costos) vs lo que Contraloría ya repartió entre claves (v6.47).
  // Solo lectura — el reparto se hace en Contraloría, nunca aquí.
  const { data: adicionalData } = useApiData(
    'conciliacion.php',
    { proyectoid: activeProj },
    !activeProj
  );

  const presupuestos   = presupuestosData || [];
  const combinados     = combinadosData || [];
  const proyectoActivo = (proyectos || []).find(p => p.id === activeProj);
  const totalActivas   = alertas.filter(a => a.activa !== false).length;

  // insumoid → nombre del combinado al que ya pertenece (para deshabilitar esas
  // claves en el árbol de selección — una clave solo puede vivir en un combinado).
  const yaAsignadosMap = useMemo(() => {
    const m = {};
    combinados.forEach(c => (c.miembros || []).forEach(mi => { m[mi.insumoid] = c.nombre; }));
    return m;
  }, [combinados]);

  function reloadAll() { reloadCombinados(); reloadPpto(); reloadResumen(); }

  async function eliminarCombinado(id) {
    try {
      await apiFetch('presupuesto_combinado.php?id=' + id, 'DELETE');
      toast('Presupuesto combinado eliminado — sus claves vuelven a verse individuales');
      reloadAll();
    } catch (e) { toast.error(e.message); }
  }

  async function quitarClaveCombinado(combinadoId, insumoid) {
    try {
      await apiFetch('presupuesto_combinado.php?id=' + combinadoId + '&insumoid=' + insumoid, 'DELETE');
      toast('Clave quitada del combinado');
      reloadAll();
    } catch (e) { toast.error(e.message); }
  }

  useEffect(() => {
    if (proyectos && proyectos.length > 0 && !activeProj) {
      setActiveProj(proyectos[0].id);
    }
  }, [proyectos]);

  // KPIs del proyecto activo — inconsistencia encontrada 2026-09-03: estos
  // totales solo sumaban claves individuales, sin los Presupuestos Combinados
  // (v8.0). El Dashboard sí los incluye en "Claves en alerta" (rg-dashboard.jsx,
  // ProjectKpis); esta misma vista debe contar igual, o un combinado grande en
  // alerta (ej. "Central de riego 25kk") no se reflejaba aquí arriba.
  const totalAsignado   = presupuestos.reduce((s, p) => s + p.monto, 0)
                         + combinados.reduce((s, c) => s + c.monto, 0);
  const totalEjercido   = presupuestos.reduce((s, p) => s + p.gastado, 0)
                         + combinados.reduce((s, c) => s + c.gastado, 0);
  const totalDisponible = totalAsignado - totalEjercido;
  const pctPromedio     = totalAsignado > 0 ? (totalEjercido / totalAsignado) * 100 : 0;
  const enAlerta        = presupuestos.filter(p => p.severidad).length
                         + combinados.filter(c => c.severidad).length;

  function openEdit(pp) { setEditing(pp); setModal(true); }

  // "Restablecer" — la clave sigue apareciendo si aún tiene OC/tope real; solo
  // borra % umbral/fechas/descripción/monto local capturados aquí.
  async function handleReset(id) {
    try {
      await apiFetch('presupuestos_proyecto.php?id=' + id, 'DELETE');
      reloadPpto();
      reloadResumen();
      toast('Presupuesto restablecido');
    } catch (e) {
      toast.error(e.message);
    }
  }

  return (
    <div className="rg-app">
      <Sidebar active="alerts" onNav={onNav} alertCount={totalActivas} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar
          crumbs="Planeación / Presupuestos"
          title="Presupuestos por Proyecto"
        />
        <div className="rg-content">

          {/* ── KPIs ── */}
          <div className="rg-kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
            <div className="rg-kpi">
              <div className="label">Presupuestos</div>
              <div className="value" style={{ fontSize: 28 }}>{presupuestos.length}</div>
              <div className="delta">
                <span className="pill">{proyectoActivo?.nombre || '—'}</span>
              </div>
            </div>
            <div className="rg-kpi">
              <div className="label">Total asignado</div>
              <div className="value" style={{ fontSize: 22 }}>${fmtMoney(totalAsignado, { compact: true })}</div>
            </div>
            <div className="rg-kpi">
              <div className="label">Total ejercido</div>
              <div className="value" style={{ fontSize: 22, color: pctColor(pctPromedio) }}>
                ${fmtMoney(totalEjercido, { compact: true })}
              </div>
              <div className="delta">
                <span className="pill" style={{ background: pctColor(pctPromedio) + '18', color: pctColor(pctPromedio), border: '1px solid ' + pctColor(pctPromedio) + '44' }}>
                  {pctPromedio.toFixed(1)}% ejercido
                </span>
              </div>
            </div>
            <div className="rg-kpi">
              <div className="label">Disponible</div>
              <div className="value" style={{ fontSize: 22, color: totalDisponible < 0 ? '#b71c1c' : 'var(--rg-green-700)' }}>
                {totalDisponible < 0 ? '-' : ''}${fmtMoney(Math.abs(totalDisponible), { compact: true })}
              </div>
              {enAlerta > 0 && (
                <div className="delta">
                  <span className="pill" style={{ background: '#f57c0018', color: '#f57c00', border: '1px solid #f57c0044' }}>
                    {enAlerta} en alerta
                  </span>
                </div>
              )}
            </div>
          </div>

          {/* ── Presupuesto adicional: bolsa vs repartido en Contraloría (v6.47) ── */}
          {activeProj && adicionalData && adicionalData.repartido != null
            && (adicionalData.total_adicional > 0 || adicionalData.repartido > 0) && (
            <div className="rg-card" style={{ padding: '10px 18px', display: 'flex', gap: 22, flexWrap: 'wrap', alignItems: 'center', fontSize: 12 }}>
              <strong style={{ color: 'var(--rg-ink)' }}>
                Presupuesto adicional
                <HelpHint text="La bolsa se registra en Proyección de Costos. Contraloría la reparte entre claves (eso sube su tope vigente) y no deja repartir más que la bolsa. Aquí solo se muestra."/>
              </strong>
              <span>Bolsa: <strong>${fmtMoney(adicionalData.total_adicional)}</strong></span>
              <span>Repartido a claves: <strong>${fmtMoney(adicionalData.repartido)}</strong></span>
              <span>
                Disponible para repartir:{' '}
                <strong style={{ color: adicionalData.disponible_repartir < 0 ? '#b71c1c' : 'var(--rg-green-700)' }}>
                  {adicionalData.disponible_repartir < 0 ? '-' : ''}${fmtMoney(Math.abs(adicionalData.disponible_repartir))}
                </strong>
              </span>
            </div>
          )}

          {/* ── Presupuestos combinados (v8.0) ── */}
          {activeProj && (
            <div className="rg-card">
              <div className="rg-card-header">
                <div>
                  <h3>Presupuestos combinados</h3>
                  <div className="sub">
                    {combinados.length > 0
                      ? `${combinados.length} combinado${combinados.length !== 1 ? 's' : ''} · varias claves bajo un solo tope`
                      : 'Agrupa varias claves bajo un tope general (ej. "Central de riego")'}
                  </div>
                </div>
                <button className="rg-btn primary" onClick={() => setShowCombinadoForm(true)}>
                  {Icon.plus(13)} Presupuesto combinado
                </button>
              </div>
              {combinados.length > 0 && (
                <div style={{ padding: '14px 18px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
                  {combinados.map(c => (
                    <CombinadoCard key={c.id} c={c}
                      onEdit={() => setEditCombinado(c)}
                      onDelete={() => eliminarCombinado(c.id)}
                      onAddInsumos={() => setAddInsumosCombinado(c)}
                      onRemoveInsumo={(insumoid) => quitarClaveCombinado(c.id, insumoid)}/>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* ── Contenido ── */}
          <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>

            {/* Proyectos */}
            <div className="rg-card" style={{ width: 220, flexShrink: 0 }}>
              <div className="rg-card-header">
                <div><h3>Proyectos</h3></div>
              </div>
              <div style={{ padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 5 }}>
                {!(proyectos && proyectos.length) && (
                  <div style={{ padding: '14px 0', textAlign: 'center', color: 'var(--rg-muted)', fontSize: 11.5 }}>Cargando…</div>
                )}
                {(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" + (activeProj === p.id ? " active" : "")}
                      onClick={() => setActiveProj(p.id)}
                      style={{ width: '100%', justifyContent: 'flex-start' }}>
                      <span className="swatch" style={{ background: p.color }}/>
                      <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.nombre}</span>
                      {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>
            </div>

            {/* Tarjetas de presupuesto */}
            <div className="rg-card" style={{ flex: 1, minWidth: 0 }}>
              <div className="rg-card-header">
                <div>
                  <h3 style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {proyectoActivo && (
                      <span style={{ width: 10, height: 10, borderRadius: 2, background: proyectoActivo.color, display: 'inline-block', flexShrink: 0 }}/>
                    )}
                    {proyectoActivo?.nombre || 'Selecciona un proyecto'}
                  </h3>
                  <div className="sub">{presupuestos.length} clave{presupuestos.length !== 1 ? 's' : ''} con OC real o tope de Contraloría</div>
                </div>
              </div>

              <div style={{ padding: '14px 18px', display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 620, overflowY: 'auto' }}>
                {!activeProj && (
                  <div style={{ padding: 30, textAlign: 'center', color: 'var(--rg-muted)', fontSize: 12.5 }}>
                    Selecciona un proyecto para ver sus presupuestos.
                  </div>
                )}
                {activeProj && presupuestos.length === 0 && (
                  <div style={{ padding: 36, textAlign: 'center', color: 'var(--rg-muted)', fontSize: 12.5, border: '1px dashed var(--rg-line-2)', borderRadius: 10, lineHeight: 1.7 }}>
                    Sin claves con OC real ni tope de Contraloría para este proyecto todavía.
                    Aparecerán solas en cuanto haya una orden de compra o Contraloría defina un tope.
                  </div>
                )}
                {presupuestos.map(pp => (
                  <PptoCard
                    key={pp.insumoid}
                    pp={pp}
                    onEdit={() => openEdit(pp)}
                    onReset={() => handleReset(pp.id)}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </main>

      {proyectoActivo && (
        <PptoFormModal
          open={modal}
          onClose={() => { setModal(false); setEditing(null); }}
          proyectoid={activeProj}
          proyecto={proyectoActivo}
          editing={editing}
          onSaved={() => { reloadPpto(); reloadResumen(); }}
        />
      )}

      {proyectoActivo && (
        <CombinadoFormModal
          open={showCombinadoForm}
          onClose={() => setShowCombinadoForm(false)}
          proyectoid={activeProj}
          proyecto={proyectoActivo}
          yaAsignadosMap={yaAsignadosMap}
          onSaved={reloadAll}
        />
      )}

      <CombinadoEditModal
        open={!!editCombinado}
        onClose={() => setEditCombinado(null)}
        combinado={editCombinado}
        onSaved={reloadAll}
      />

      {proyectoActivo && (
        <CombinadoAddInsumosModal
          open={!!addInsumosCombinado}
          onClose={() => setAddInsumosCombinado(null)}
          combinado={addInsumosCombinado}
          proyecto={proyectoActivo}
          yaAsignadosMap={yaAsignadosMap}
          onSaved={reloadAll}
        />
      )}
    </div>
  );
}

Object.assign(window, { AlertsView });