// ─── Aprobaciones · Notificaciones de margen ──────────────────────────────
// AprobacionesScreen: avisos de margen bajo (solo lectura + dismiss=DELETE, sin
// alta/edición) — la campanita del header. Extraída tal cual de
// screens-others.jsx (P9, split del cajón de 5 módulos) — cero cambio de
// comportamiento: el payload real (presupuestoId/expedienteId/solicitanteId,
// uuid) ya lo arregló P5 (dominio/margen.js, MicosSyncMargenNotif); acá solo se
// verifica que la pantalla siga resolviendo esos ids a los labels legibles de
// siempre. Expone a window: AprobacionesScreen. Consume EntityListScreen
// (ui/entity-list.jsx), TablePill (ui/primitives.jsx), formatMoney/
// formatMoneyShort (dominio/formato.js), MicosMargenSemaforo (dominio/margen.js).

const APROB_TIPO_LABELS = {
  PRESUPUESTO: { label: 'Presupuesto', tone: 'accent', route: 'presupuesto' },
  REMITO:      { label: 'Remito',      tone: 'info',   route: 'remito' },
};

function AprobacionesScreen({ onOpen }) {
  // Avisos de margen: SOLO presupuestos, acotado a 10 (decisión del usuario:
  // solo notifican, no bloquean armar el presupuesto; los remitos no avisan).
  const [, _force] = React.useReducer((x) => x + 1, 0);
  const solicitudes   = APROBACIONES.filter((a) => a.tipo === 'PRESUPUESTO').slice(0, (window.APROBACIONES_MAX || 10));
  const costoTotal    = solicitudes.reduce((s, a) => s + a.costo, 0);
  const gananciaTotal = solicitudes.reduce((s, a) => s + a.ganancia, 0);
  // Descartar = quitar la notificación (no bloquea nada, es solo un aviso).
  const dismiss = (a) => { if (window.MicosStore) window.MicosStore.remove('aprobaciones', a.id); _force(); };

  // P5 (arbitraje P2 #2, ver dominio/margen.js): el payload de MicosSyncMargenNotif pasó de
  // documento/expedienteId/solicitante (strings legibles, PERO no eran columnas reales — el
  // bug que arregló P5) a presupuestoId/expedienteId/solicitanteId (uuid reales, las columnas
  // de verdad). Acá resolvemos esos ids contra las colecciones hidratadas para seguir
  // mostrando lo mismo de siempre (PRE-.../EXP-.../Nombre Apellido) en vez del uuid crudo.
  // Mismo límite conocido que el resto del bundle (ventana hidratada capada a BIG_LIMIT=500,
  // core/store.js): si el presupuesto/expediente no entró en esa ventana, cae al fallback.
  const documentoLabel = (a) => {
    const pre = (window.PRESUPUESTOS || []).find((p) => p.id === a.presupuestoId);
    // FIX (P15, H2): antes `PRE-${pre.numero}` — dropeaba el `L-` de un presupuesto legacy.
    return pre ? pre.publicId : (a.presupuestoId || '—');
  };
  const expedienteLabel = (a) => {
    const exp = (window.EXPEDIENTES || []).find((e) => e.id === a.expedienteId);
    return exp ? exp.publicId : (a.expedienteId || '—');
  };
  const solicitanteLabel = (a) => {
    const u = (window.USUARIOS || []).find((x) => x.id === a.solicitanteId);
    return u ? `${u.nombre} ${u.apellido}` : '—';
  };

  return (
    <EntityListScreen
      eyebrow="Herramientas · Solicitudes"
      title="Notificaciones de margen"
      description="Presupuestos que cayeron por debajo del % de ganancia esperado. Es solo un aviso — no bloquea armar el presupuesto."
      // FIX hallazgo auditoría 05/07/2026 ("Ver historial" sin onClick, secondaryAction del
      // header): no existe ninguna vista de historial de avisos de margen (dismiss = DELETE
      // real, no hay ledger a mostrar) — se saca el botón en vez de dejar la promesa sin
      // cablear (CLAUDE.md decisión estructural #3: "lo que quede sin uso se puede borrar").
      kpis={[
        { label: 'Avisos de margen', value: String(solicitudes.length),    delta: 'Solo presupuestos', deltaTone: 'neutral', icon: IconCheckCircle },
        { label: 'Expedientes',    value: String(new Set(solicitudes.map(a => a.expedienteId)).size), delta: 'Involucrados', deltaTone: 'neutral', icon: IconFileText },
        { label: 'Costo total',    value: formatMoneyShort(costoTotal),       delta: `${solicitudes.length} presupuestos`, deltaTone: 'neutral', icon: IconDollar },
        { label: 'Ganancia total', value: formatMoneyShort(gananciaTotal),    delta: `${costoTotal ? Math.round(gananciaTotal / costoTotal * 100) : 0}% promedio`, deltaTone: 'pos', icon: IconTrendingUp },
      ]}
      columns={[
        { key: 'tipo', label: 'Tipo', width: '140px',
          render: (a) => <TablePill label={APROB_TIPO_LABELS[a.tipo].label} tone={APROB_TIPO_LABELS[a.tipo].tone} /> },
        { key: 'documento', label: 'Documento · Expediente', width: '1.5fr',
          render: (a) => (
            <div className="min-w-0">
              <p className="font-mono text-[12.5px] font-bold tracking-wide uppercase" style={{ color: 'var(--accent)' }}>{documentoLabel(a)}</p>
              <p className="text-[11.5px] mt-0.5 truncate" style={{ color: 'var(--muted-foreground)' }}>
                <span className="font-mono font-bold">{expedienteLabel(a)}</span>
                <span className="mx-1.5">·</span>
                <span>{a.motivo}</span>
              </p>
            </div>
          ),
        },
        { key: 'solicitante', label: 'Solicitante', width: '130px',
          render: (a) => <span className="text-[12.5px] font-semibold" style={{ color: 'var(--foreground)' }}>{solicitanteLabel(a)}</span> },
        { key: 'costo', label: 'Costo', width: '130px',
          render: (a) => <span className="text-[13.5px] font-extrabold tabular-nums" style={{ color: 'var(--foreground)' }}>{formatMoney(a.costo)}</span> },
        { key: 'ganancia', label: 'Ganancia', width: '160px',
          // % y color = margen del PEOR producto flageado vs el umbral que disparó el aviso
          // (MICOS_UMBRAL_GANANCIA), no el agregado del presupuesto vs 25/30% — BUGS-caza-
          // 01-07-2026.md #17/M10 (ver window.MicosMargenSemaforo, dominio/margen.js).
          render: (a) => {
            const sem = window.MicosMargenSemaforo(a);
            return (
              <div className="flex flex-col gap-0.5">
                <span className="text-[13.5px] font-extrabold tabular-nums" style={{ color: 'var(--foreground)' }}>
                  {formatMoney(a.ganancia)}
                </span>
                <span className="text-[11px] font-bold tabular-nums" style={{ color: sem.color }}>
                  {sem.pct.toFixed(0)}%
                </span>
              </div>
            );
          },
        },
        { key: 'acciones', label: '', width: '64px', align: 'right',
          render: (a) => (
            <div className="flex items-center justify-end">
              <span
                role="button"
                tabIndex={0}
                onClick={(e) => { e.stopPropagation(); dismiss(a); }}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); e.preventDefault(); dismiss(a); } }}
                title="Descartar notificación"
                className="inline-flex items-center justify-center rounded-md transition-colors cursor-pointer"
                style={{ width: 32, height: 32, color: 'var(--muted-foreground)' }}
                onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--danger)'; e.currentTarget.style.background = 'rgba(220, 38, 38, 0.10)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--muted-foreground)'; e.currentTarget.style.background = 'transparent'; }}
              >
                <IconX size={15} />
              </span>
            </div>
          ),
        },
      ]}
      rows={solicitudes}
      onRowClick={(a) => onOpen && onOpen(a)}
      searchPlaceholder="Buscar por documento, expediente o solicitante…"
      searchFilter={(a, q) =>
        documentoLabel(a).toLowerCase().includes(q) ||
        solicitanteLabel(a).toLowerCase().includes(q) ||
        expedienteLabel(a).toLowerCase().includes(q)
      }
      dateField="creado"
      exportFilename="Notificaciones de margen"
      exportConfig={[
        { label: 'Tipo', value: (a) => (APROB_TIPO_LABELS[a.tipo] || {}).label || a.tipo },
        { label: 'Documento', value: (a) => documentoLabel(a) },
        { label: 'Expediente', value: (a) => expedienteLabel(a) },
        { label: 'Motivo', value: (a) => a.motivo },
        { label: 'Solicitante', value: (a) => solicitanteLabel(a) },
        { label: 'Costo', value: (a) => a.costo },
        { label: 'Ganancia', value: (a) => a.ganancia },
        { label: '% Ganancia', value: (a) => (a.costo > 0 ? Math.round(a.ganancia / a.costo * 100) + '%' : '') },
      ]}
    />
  );
}

Object.assign(window, { AprobacionesScreen });