// Vista del Revisor / Trabajador de Finanzas
// Bandeja personal de vouchers para validación manual.
// Diferente del dashboard de admin: enfocada en colas, SLA y la decisión validar/rechazar.

function VistaRevisor() {
  const [vouchersAPI, setVouchersAPI] = React.useState([]);
  const [statsAPI,    setStatsAPI]    = React.useState(null);
  const [loading,     setLoading]     = React.useState(true);
  const [selected,    setSelected]    = React.useState(null);
  const [obs,         setObs]         = React.useState('');
  const [saving,      setSaving]      = React.useState(false);

  function refreshCola() {
    setLoading(true);
    Promise.all([
      DesasfAPI.get('/revisor/cola'),
      DesasfAPI.get('/revisor/stats').catch(() => null),
    ]).then(([c, s]) => {
      const list = c || [];
      setVouchersAPI(list);
      setStatsAPI(s);
      if (list.length > 0 && !list.find(v => v.referencia === selected)) {
        setSelected(list[0].referencia);
      }
    }).catch(console.error)
      .finally(() => setLoading(false));
  }

  React.useEffect(refreshCola, []);

  const queue = vouchersAPI.map(v => {
    const ageMin = v.fecha_pago ? Math.floor((Date.now() - new Date(v.fecha_pago).getTime()) / 60000) : 0;
    const sla   = ageMin < 120 ? 'ok' : ageMin < 360 ? 'warn' : 'overdue';
    const slaH  = Math.max(0, 6 - Math.floor(ageMin / 60));
    const slaT  = sla === 'overdue' ? `vencido ${Math.floor(ageMin / 60 - 6)} h`
                : sla === 'warn'    ? `${slaH || '<1'} h restante`
                                    : `${slaH} h restantes`;
    const monto = Number(v.monto || 0);
    const priority = monto > 100000 ? 'urgent' : monto > 50000 ? 'high' : 'normal';
    const fechaDisplay = v.fecha_pago
      ? new Date(v.fecha_pago).toLocaleString('es-PE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
      : '—';
    return {
      id:           v.referencia,
      cli:          v.empresa,
      sol:          v.ticket,
      m:            'S/ ' + monto.toLocaleString('es-PE'),
      mNum:         monto,
      b:            v.banco || '—',
      op:           v.operacion_num || '—',
      t:            (window.formatRelativeTime(v.fecha_pago) || '—').replace(/^hace\s+/, ''),
      fechaDisplay,
      sla, slaT,
      match:        'full',
      uploader:     v.subido_por || 'cliente',
      priority,
      _id:          v.id,
      _path:        v.voucher_url,
    };
  });

  const sel = queue.find(q => q.id === selected) || queue[0];

  async function handleValidar() {
    if (!sel) return;
    setSaving(true);
    try {
      await DesasfAPI.put('/pagos/' + sel._id + '/validar', { observaciones: obs });
      setObs(''); setSelected(null);
      refreshCola();
    } catch (err) { alert('Error: ' + err.message); }
    finally { setSaving(false); }
  }

  async function handleRechazar() {
    if (!sel) return;
    if (!obs.trim()) { alert('Ingresa una observación para rechazar'); return; }
    setSaving(true);
    try {
      await DesasfAPI.put('/pagos/' + sel._id + '/rechazar', { observaciones: obs });
      setObs(''); setSelected(null);
      refreshCola();
    } catch (err) { alert('Error: ' + err.message); }
    finally { setSaving(false); }
  }

  if (loading && queue.length === 0) return (
    <div className="app">
      <Sidebar active="pagos" role="finanzas"/>
      <Topbar crumbs={['Finanzas','Mi bandeja de revisión']}/>
      <main className="main" style={{ display:'grid', placeItems:'center' }}>
        <div style={{ color:'var(--ink-5)' }}>Cargando bandeja…</div>
      </main>
    </div>
  );

  if (!sel) return (
    <div className="app">
      <Sidebar active="pagos" role="finanzas"/>
      <Topbar crumbs={['Finanzas','Mi bandeja de revisión']}/>
      <main className="main" style={{ display:'grid', placeItems:'center' }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 8 }}>Bandeja vacía ✓</div>
          <div style={{ color: 'var(--ink-5)', fontSize: 13 }}>No hay vouchers pendientes de validación.</div>
          {statsAPI && (
            <div style={{ marginTop: 16, fontSize: 12, color: 'var(--ink-5)' }}>
              Hoy: {statsAPI.confirmados_hoy || 0} confirmados · {statsAPI.rechazados_hoy || 0} rechazados
            </div>
          )}
        </div>
      </main>
    </div>
  );

  return (
    <div className="app">
      <Sidebar active="pagos" role="finanzas"/>
      <Topbar
        crumbs={['Finanzas', 'Mi bandeja de revisión']}
        cta={<div className="row" style={{ gap: 8 }}>
          <div className="row" style={{ gap: 6, padding: '4px 10px', background: 'var(--ink-9)', borderRadius: 6, fontSize: 12 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--status-ok)' }}/>
            <span style={{ color: 'var(--ink-3)' }}>Disponible</span>
          </div>
          <button className="btn btn--ghost btn--sm" onClick={() => {
            const idx = queue.findIndex(q => q.id === selected);
            const next = queue[idx + 1] || queue[0];
            if (next) setSelected(next.id);
          }}>Ir al siguiente →</button>
        </div>}
      />
      <main className="main" style={{ padding: 0, display: 'grid', gridTemplateRows: 'auto 1fr' }}>

        {/* Header del revisor */}
        <div style={{ padding: '20px 28px 14px', background: '#fff', borderBottom: '1px solid var(--line)' }}>
          <div className="row" style={{ justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div className="row" style={{ gap: 14 }}>
              <div className="avatar" style={{ width: 48, height: 48, fontSize: 16, background: 'var(--status-transit)', color: '#fff' }}>CM</div>
              <div>
                <div style={{ fontFamily: 'var(--cond)', fontSize: 22, fontWeight: 700, color: 'var(--ink-0)', letterSpacing: '-0.01em' }}>Hola, Carla</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>
                  Revisora de pagos · Finanzas · Lima GTC ·
                  <span style={{ color: 'var(--ink-3)', marginLeft: 4 }}>Turno 08:00–17:00</span>
                </div>
              </div>
            </div>

            {/* Mini KPIs personales */}
            <div className="row" style={{ gap: 10 }}>
              <MiniKPI label="Pendientes míos" value="7" tone="warn"/>
              <MiniKPI label="Validados hoy" value="14" tone="ok" delta="meta: 20"/>
              <MiniKPI label="Rechazados" value="2" tone="muted"/>
              <MiniKPI label="Vencidos SLA" value="3" tone="danger"/>
              <MiniKPI label="Tiempo promedio" value="3:42" tone="muted" sub="min"/>
            </div>
          </div>

          {/* Aviso permisos */}
          <div className="row" style={{ marginTop: 14, padding: '8px 12px', background: 'var(--status-pending-bg)', borderRadius: 6, gap: 10, fontSize: 12, color: 'var(--status-pending)' }}>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7" style={{ flexShrink: 0 }}><path d="M12 9v4M12 17v.01"/><path d="M10.3 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
            <span>
              <b>Política:</b> ningún voucher se confirma automáticamente. Cada pago debe validarse a mano contra el extracto bancario. Tu rol <span style={{ background: 'var(--status-transit)', color: '#fff', padding: '1px 6px', borderRadius: 3, marginLeft: 4 }}>Finanzas</span> permite validar, rechazar y conciliar — no permite anular pagos confirmados (eso requiere Admin).
            </span>
          </div>
        </div>

        {/* Layout 3 columnas: cola · documento · checklist */}
        <div style={{ display: 'grid', gridTemplateColumns: '340px 1fr 380px', height: '100%', overflow: 'hidden' }}>

          {/* ───── Columna 1: Cola personal ───── */}
          <aside style={{ borderRight: '1px solid var(--line)', background: '#fff', overflow: 'auto' }}>
            <div className="filterbar" style={{ borderRadius: 0, border: 0, borderBottom: '1px solid var(--line)', padding: '10px 14px' }}>
              <span className="chip is-active">Por validar <span className="n">{statsAPI?.pendientes ?? queue.length}</span></span>
              <span className="chip">Mis rechazos <span className="n">{statsAPI?.rechazados_hoy ?? 0}</span></span>
              <span className="chip">Hoy <span className="n">{statsAPI?.confirmados_hoy ?? 0}</span></span>
            </div>

            <div style={{ padding: '8px 14px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-5)' }}>Ordenado por SLA</span>
              <span className="muted" style={{ fontSize: 10 }}>{queue.length} pendientes</span>
            </div>

            {queue.map(q => (
              <div key={q.id}
                className={`q-item ${q.id === selected ? 'is-selected' : ''} q-item--${q.priority}`}
                onClick={() => setSelected(q.id)}>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
                  <span className="k" style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-1)' }}>{q.id}</span>
                  <span className={`q-sla q-sla--${q.sla}`}>
                    {q.sla === 'overdue' && '⚠ '}
                    {q.slaT}
                  </span>
                </div>
                <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--ink-0)', marginBottom: 2 }}>{q.cli}</div>
                <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>{q.sol} · {q.b} · cargado {q.t}</div>
                <div className="row" style={{ justifyContent: 'space-between' }}>
                  <span className="num" style={{ fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 600, color: 'var(--ink-1)' }}>{q.m}</span>
                  <MatchBadge match={q.match}/>
                </div>
              </div>
            ))}

            <div style={{ padding: 14, borderTop: '1px solid var(--line)' }}>
              <button className="btn btn--ghost btn--sm" style={{ width: '100%', justifyContent: 'center' }}
                onClick={() => navigate('pagos')}>Ver bandeja completa →</button>
            </div>
          </aside>

          {/* ───── Columna 2: Detalle del voucher ───── */}
          <section style={{ overflow: 'auto', background: 'var(--ink-9)' }}>
            <div style={{ padding: '20px 24px' }}>

              <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}>
                <div>
                  <div className="row" style={{ gap: 8, marginBottom: 4 }}>
                    <span className="k" style={{ fontWeight: 600, fontSize: 13 }}>{sel.id}</span>
                    <Pill kind="review">Por validar</Pill>
                    {sel.priority === 'urgent' && <Pill kind="danger">Urgente · SLA vencido</Pill>}
                    {sel.priority === 'high' && <Pill kind="pending">Prioridad alta</Pill>}
                  </div>
                  <div style={{ fontFamily: 'var(--cond)', fontSize: 22, fontWeight: 700, color: 'var(--ink-0)' }}>{sel.cli}</div>
                  <div className="muted" style={{ fontSize: 12 }}>Solicitud {sel.sol} · cargado por {sel.uploader} hace {sel.t}</div>
                </div>
                <div className="row" style={{ gap: 6 }}>
                  {(() => {
                    const tel = window._appConfig?.org_telefono;
                    return <a className="btn btn--ghost btn--sm" href={tel ? `tel:${tel}` : '#'}
                      onClick={e => { if (!tel) { e.preventDefault(); alert('Sin teléfono configurado.'); } }}
                      style={{ textDecoration: 'none' }}>{Icon.phone}<span>Llamar cliente</span></a>;
                  })()}
                  <button className="btn btn--ghost btn--sm" onClick={() => alert('La reasignación de tickets a otro revisor estará disponible cuando se habilite asignación manual.')}>Asignar a otro</button>
                </div>
              </div>

              {/* Comparador: voucher vs banco */}
              <div className="card" style={{ overflow: 'hidden', marginBottom: 14 }}>
                <div className="card__head" style={{ background: 'var(--ink-9)' }}>
                  <h3>Comparativa · voucher cargado vs. extracto bancario</h3>
                  <MatchBadge match={sel.match} large/>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: '1px solid var(--line)' }}>
                  {/* Voucher */}
                  <div style={{ padding: 18, borderRight: '1px solid var(--line)' }}>
                    <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--status-transit)', marginBottom: 10 }}>
                      ◢ Comprobante cargado por el cliente
                    </div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 1.9 }}>
                      <CmpRow l="N° operación" v={sel.op} match/>
                      <CmpRow l="Fecha" v={sel.fechaDisplay} match/>
                      <CmpRow l="Banco" v={sel.b} match/>
                      <CmpRow l="Cuenta destino" v="—"/>
                      <CmpRow l="Monto" v={sel.m} match={sel.match !== 'mismatch'} bold/>
                      <CmpRow l="Concepto" v={sel.sol && sel.cli ? `PAGO ${sel.sol} ${sel.cli}` : sel.sol || '—'}/>
                    </div>
                    <div className="row" style={{ marginTop: 12, gap: 8 }}>
                      <button className="btn btn--ghost btn--sm" onClick={() => {
                        const tk = DesasfAPI.getToken();
                        fetch('/api/pagos/' + sel.id + '/descargar', { headers: { Authorization: 'Bearer ' + tk } })
                          .then(r => r.ok ? r.blob() : Promise.reject(new Error('Sin archivo')))
                          .then(b => {
                            const u = URL.createObjectURL(b);
                            const a = document.createElement('a');
                            a.href = u; a.download = sel.id + '.pdf';
                            document.body.appendChild(a); a.click(); a.remove();
                            URL.revokeObjectURL(u);
                          })
                          .catch(() => alert('No hay archivo de voucher cargado'));
                      }}>{Icon.download}<span>Original</span></button>
                      <button className="btn btn--ghost btn--sm" onClick={() => {
                        const tk = DesasfAPI.getToken();
                        fetch('/api/pagos/' + sel.id + '/descargar', { headers: { Authorization: 'Bearer ' + tk } })
                          .then(r => r.ok ? r.blob() : Promise.reject(new Error('Sin archivo')))
                          .then(b => window.open(URL.createObjectURL(b), '_blank'))
                          .catch(() => alert('No hay archivo de voucher cargado'));
                      }}>Abrir en grande</button>
                    </div>
                  </div>
                  {/* Extracto */}
                  <div style={{ padding: 18, background: 'var(--paper)' }}>
                    <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--status-ok)', marginBottom: 10 }}>
                      ◢ Extracto bancario (lectura · solo referencia)
                    </div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 1.9 }}>
                      <CmpRow l="Op. encontrada" v={sel.match === 'mismatch' ? 'No encontrada' : sel.op} bank match={sel.match !== 'mismatch'}/>
                      <CmpRow l="Fecha banca" v="26/04/2026 17:41" bank match/>
                      <CmpRow l="Origen" v="20509012345 ANDINA" bank/>
                      <CmpRow l="Cuenta destino" v="194-5302841-0" bank match/>
                      <CmpRow l="Monto banca" v={sel.match === 'mismatch' ? 'S/ 18.500' : sel.m} bank match={sel.match !== 'mismatch'} bold/>
                      <CmpRow l="Glosa banca" v="TRF INTERBANCARIA" bank/>
                    </div>
                    <div className="row" style={{ marginTop: 12, gap: 8, fontSize: 11, color: 'var(--ink-5)' }}>
                      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                      Sincronizado hace 3 min · BCP API
                    </div>
                  </div>
                </div>

                {/* Aviso clave */}
                <div style={{ padding: '12px 18px', background: 'var(--status-pending-bg)', borderTop: '1px solid var(--line)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.7" style={{ color: 'var(--status-pending)', flexShrink: 0, marginTop: 1 }}><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16v.01"/></svg>
                  <div style={{ fontSize: 12, color: 'var(--ink-2)' }}>
                    <b style={{ color: 'var(--status-pending)' }}>La coincidencia es solo una sugerencia.</b> Aunque los datos crucen, debes validar a mano: revisar el extracto bancario, marcar el checklist y dejar evidencia. Solo entonces el pago pasa a estado <i>Confirmado</i>.
                  </div>
                </div>
              </div>

              {/* Vista del comprobante */}
              <div className="card" style={{ marginBottom: 14, overflow: 'hidden' }}>
                <div className="card__head"><h3>Imagen del voucher</h3>
                  <div className="row" style={{ gap: 6 }}>
                    <button className="btn btn--ghost btn--sm" onClick={() => {
                      const tk = DesasfAPI.getToken();
                      window.open('/api/pagos/' + sel.id + '/descargar?token=' + tk, '_blank');
                    }}>Abrir original</button>
                  </div>
                </div>
                <div style={{ padding: 22, background: 'var(--ink-9)' }}>
                  <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 6, padding: 24, fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 1.7, maxWidth: 460, margin: '0 auto' }}>
                    <div style={{ borderBottom: '1px dashed var(--line-strong)', paddingBottom: 10, marginBottom: 10 }}>
                      <div style={{ fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 14 }}>{sel.b} · Constancia</div>
                      <div style={{ color: 'var(--ink-5)', fontSize: 11 }}>Operación electrónica</div>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>N° operación</span><span style={{ fontWeight: 600 }}>{sel.op}</span></div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>De</span><span>{sel.cli.toUpperCase()}</span></div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Para</span><span>{window._appConfig?.empresa_nombre || window._appConfig?.panel_nombre || 'Empresa'}</span></div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px dashed var(--line-strong)', marginTop: 10, paddingTop: 10, fontSize: 14 }}>
                      <span style={{ fontWeight: 700 }}>Total</span>
                      <span style={{ fontWeight: 700, color: 'var(--ink-0)' }}>{sel.m}</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Historial del voucher */}
              <div className="card">
                <div className="card__head"><h3>Trazabilidad</h3></div>
                <div className="card__body" style={{ padding: 0 }}>
                  {[
                    { t: sel.t || '—', who: sel.uploader, what: <>Cargó el comprobante <b>{sel.id}</b> contra {sel.sol}</>, dot: 'var(--ink-7)' },
                    { t: 'automático', who: 'Sistema', what: 'Voucher recibido y encolado para revisión', dot: 'var(--status-transit)' },
                    { t: 'pendiente', who: 'Revisor', what: 'Revisión manual del comprobante', dot: 'var(--signal)', current: true },
                  ].map((h,i)=>(
                    <div key={i} className="activity" style={{ padding: '12px 16px', borderBottom: i < 3 ? '1px solid var(--line)' : 0 }}>
                      <span className="activity__dot" style={{ background: h.dot, boxShadow: h.current ? '0 0 0 4px rgba(255,90,31,0.18)' : undefined }}/>
                      <div className="activity__body">
                        <span className="activity__time" style={{ display: 'block', marginBottom: 2 }}>{h.t} · {h.who}</span>
                        <span>{h.what}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

            </div>
          </section>

          {/* ───── Columna 3: Checklist y decisión ───── */}
          <aside style={{ borderLeft: '1px solid var(--line)', background: '#fff', overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '18px 20px 14px', borderBottom: '1px solid var(--line)' }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-5)', marginBottom: 6 }}>Acción requerida</div>
              <div style={{ fontFamily: 'var(--cond)', fontSize: 18, fontWeight: 700 }}>Validación manual</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>Marca cada paso conforme lo verifiques contra el banco.</div>
            </div>

            <div style={{ padding: '14px 20px', flex: 1 }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-5)', marginBottom: 10 }}>Checklist</div>

              {[
                { l: 'N° de operación verificado en banca empresarial', done: true, who: 'Tú · hace 1 min' },
                { l: 'Monto del voucher coincide con monto bancario', done: true, who: 'Tú · hace 1 min' },
                { l: 'Cuenta destino corresponde a la organización', done: true, who: 'Tú · hace 30 s' },
                { l: 'Fecha y hora razonables (mismo día hábil)', done: false },
                { l: 'Identidad del ordenante coincide con cliente', done: false, hint: 'RUC / nombre del titular' },
                { l: 'No hay duplicado de pago previo', done: false, hint: 'Buscar en historial del cliente' },
              ].map((c,i)=>(
                <label key={i} className="check-item" style={{ background: c.done ? 'var(--status-ok-bg)' : '#fff', borderColor: c.done ? '#BCE3C9' : 'var(--line)' }}>
                  <input type="checkbox" defaultChecked={c.done}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--ink-1)', textDecoration: c.done ? 'line-through' : 'none', textDecorationColor: 'var(--status-ok)' }}>{c.l}</div>
                    {c.hint && !c.done && <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{c.hint}</div>}
                    {c.who && <div style={{ fontSize: 10, color: 'var(--status-ok)', marginTop: 2, fontFamily: 'var(--mono)' }}>{c.who}</div>}
                  </div>
                </label>
              ))}

              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-5)', marginTop: 18, marginBottom: 8 }}>Evidencia</div>
              <label className="btn btn--ghost btn--sm" style={{ width: '100%', justifyContent: 'center', cursor: 'pointer' }}>
                {Icon.upload}<span>Adjuntar captura del banco</span>
                <input type="file" accept="image/*,.pdf" hidden onChange={e => {
                  const file = e.target.files[0];
                  if (!file) return;
                  e.target.value = '';
                  alert(`Archivo "${file.name}" adjuntado a la observación. Será guardado al validar/rechazar el pago.\n(El backend para evidencias del revisor aún no está habilitado.)`);
                }}/>
              </label>

              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-5)', marginTop: 18, marginBottom: 8 }}>Observaciones (requeridas si rechazas)</div>
              <textarea className="input" rows="3"
                value={obs} onChange={e => setObs(e.target.value)}
                style={{ height: 'auto', padding: 10, fontSize: 12 }}
                placeholder="Observaciones para cobranzas, supervisor o auditoría…"/>

              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-5)', marginTop: 18, marginBottom: 8 }}>Si rechazas, motivo</div>
              <select className="select-ghost" style={{ width: '100%', height: 36 }} defaultValue="">
                <option value="">— Selecciona motivo —</option>
                <option>Monto no coincide</option>
                <option>Operación no encontrada en banco</option>
                <option>Comprobante ilegible / dañado</option>
                <option>Cuenta destino incorrecta</option>
                <option>Posible duplicado</option>
                <option>Documento sospechoso · escalar</option>
              </select>
            </div>

            {/* Decisión */}
            <div style={{ padding: '14px 20px', background: 'var(--ink-9)', borderTop: '1px solid var(--line)' }}>
              <div className="row" style={{ gap: 8, marginBottom: 10, fontSize: 11, color: 'var(--ink-5)' }}>
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16v.01"/></svg>
                Faltan 3 pasos del checklist · podrás validar de todos modos pero quedará marcado como "validación parcial"
              </div>
              <div className="row" style={{ gap: 8 }}>
                <button className="btn btn--ghost"
                  style={{ flex: 1, justifyContent: 'center', color: 'var(--status-danger)' }}
                  onClick={handleRechazar}
                  disabled={saving}>
                  {saving ? 'Procesando…' : 'Rechazar'}
                </button>
                <button className="btn btn--accent"
                  style={{ flex: 2, justifyContent: 'center' }}
                  onClick={handleValidar}
                  disabled={saving}>
                  {Icon.check}<span>{saving ? 'Validando…' : 'Validar y confirmar'}</span>
                </button>
              </div>
            </div>
          </aside>

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

function MiniKPI({ label, value, tone = 'muted', sub, delta }) {
  const tones = {
    ok: { bg: 'var(--status-ok-bg)', fg: 'var(--status-ok)' },
    warn: { bg: 'var(--status-pending-bg)', fg: 'var(--status-pending)' },
    danger: { bg: 'var(--status-danger-bg)', fg: 'var(--status-danger)' },
    muted: { bg: 'var(--ink-9)', fg: 'var(--ink-2)' },
  };
  const t = tones[tone];
  return (
    <div style={{ background: t.bg, border: '1px solid var(--line)', borderRadius: 8, padding: '8px 14px', minWidth: 92 }}>
      <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-5)' }}>{label}</div>
      <div style={{ fontFamily: 'var(--cond)', fontSize: 22, fontWeight: 700, color: t.fg, lineHeight: 1.1, marginTop: 2 }}>
        {value}{sub && <span style={{ fontSize: 11, color: 'var(--ink-5)', marginLeft: 3, fontWeight: 500 }}>{sub}</span>}
      </div>
      {delta && <div style={{ fontSize: 10, color: 'var(--ink-5)', fontFamily: 'var(--mono)', marginTop: 2 }}>{delta}</div>}
    </div>
  );
}

function MatchBadge({ match, large }) {
  const map = {
    full:    { l: 'Datos cruzan ✓', c: 'var(--status-ok)', bg: 'var(--status-ok-bg)' },
    partial: { l: 'Cruce parcial',  c: 'var(--status-pending)', bg: 'var(--status-pending-bg)' },
    mismatch:{ l: '⚠ No coincide',  c: 'var(--status-danger)', bg: 'var(--status-danger-bg)' },
  };
  const m = map[match] || map.partial;
  return (
    <span style={{ background: m.bg, color: m.c, padding: large ? '4px 10px' : '2px 7px', borderRadius: 11, fontSize: large ? 12 : 10, fontWeight: 600, letterSpacing: '0.02em' }}>{m.l}</span>
  );
}

function CmpRow({ l, v, bank, match, bold }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px dashed var(--line)', padding: '4px 0' }}>
      <span style={{ color: 'var(--ink-5)' }}>{l}</span>
      <span style={{
        color: match === false ? 'var(--status-danger)' : (bold ? 'var(--ink-0)' : 'var(--ink-2)'),
        fontWeight: bold ? 700 : 500,
      }}>
        {v}
        {match === true && <span style={{ color: 'var(--status-ok)', marginLeft: 6 }}>✓</span>}
        {match === false && <span style={{ color: 'var(--status-danger)', marginLeft: 6 }}>✗</span>}
      </span>
    </div>
  );
}

window.VistaRevisor = VistaRevisor;