/* global React */
// Terminal LatAm — ActionsInbox (used as hero in Today + standalone)

const TAC_T = window.T_THEME;
const TAC_FM = window.T_FM;
const TAC_FS = window.T_FS;
const TAC_S = window.TerminalSectionLabel;
const TAC_B = window.TerminalBtn;

const ActionCard = ({ a, expanded, onToggle, onAction }) => {
  const colP = a.priority === "P0" ? TAC_T.red : a.priority === "P1" ? TAC_T.amber : TAC_T.cyan;
  const conf = a.confidence;
  const confCol = conf >= 0.85 ? TAC_T.green : conf >= 0.7 ? TAC_T.amber : TAC_T.muteDim;
  return (
    <div style={{ border: `1px solid ${TAC_T.line}`, borderLeft: `3px solid ${colP}`, background: TAC_T.surface }}>
      <div onClick={onToggle} style={{ padding: "14px 18px", cursor: "pointer", display: "grid", gridTemplateColumns: "44px 1fr 180px 220px 90px", gap: 14, alignItems: "center" }}>
        <span style={{ color: colP, fontFamily: TAC_FM, fontSize: 11, letterSpacing: "0.14em", fontWeight: 700, padding: "3px 8px", border: `1px solid ${colP}`, textAlign: "center" }}>{a.priority}</span>
        <div>
          <div style={{ fontFamily: TAC_FS, fontSize: 14, color: TAC_T.ink, fontWeight: 500, marginBottom: 4 }}>{a.title}</div>
          <div style={{ fontSize: 10, color: TAC_T.muteDim, letterSpacing: "0.06em" }}>{a.account.toUpperCase()} · {a.category} · ETA {a.eta}</div>
        </div>
        <div style={{ fontSize: 11, color: TAC_T.green, fontFamily: TAC_FS, fontWeight: 500 }}>{a.impact.primary}</div>
        <div style={{ fontSize: 10, color: TAC_T.mute }}>
          <div>conf <span style={{ color: confCol, fontFamily: TAC_FM }}>{conf.toFixed(2)}</span> · {a.impact.leads}</div>
          <div style={{ color: TAC_T.muteDim, marginTop: 3 }}>{a.rollback}</div>
        </div>
        <span style={{ fontFamily: TAC_FM, color: TAC_T.muteDim, fontSize: 14, textAlign: "right" }}>{expanded ? "▾" : "▸"}</span>
      </div>

      {expanded && (
        <div style={{ borderTop: `1px solid ${TAC_T.line}`, padding: "16px 18px", display: "grid", gridTemplateColumns: "1fr 1fr 240px", gap: 18, background: TAC_T.bg }}>
          <div>
            <div style={{ fontSize: 9, color: TAC_T.mute, letterSpacing: "0.14em", marginBottom: 8 }}>POR QUÉ · evidencia</div>
            <ul style={{ padding: 0, margin: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
              {a.why.map((w,i) => (
                <li key={i} style={{ fontSize: 11, color: TAC_T.ink, paddingLeft: 14, position: "relative" }}>
                  <span style={{ position: "absolute", left: 0, color: TAC_T.amber }}>→</span>{w}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 12, fontSize: 10, color: TAC_T.muteDim }}>scope · {a.scope}</div>
            <div style={{ fontSize: 10, color: TAC_T.muteDim, marginTop: 3 }}>evidence · {a.evidence}</div>
          </div>
          <div>
            <div style={{ fontSize: 9, color: TAC_T.mute, letterSpacing: "0.14em", marginBottom: 8 }}>IMPACTO PREDICHO</div>
            <div style={{ fontFamily: TAC_FS, fontSize: 18, fontWeight: 600, color: TAC_T.green, marginBottom: 6 }}>{a.impact.primary}</div>
            <div style={{ fontSize: 11, color: TAC_T.ink, marginBottom: 10 }}>{a.impact.secondary}</div>
            <div style={{ fontSize: 11, color: TAC_T.amber }}>leads · {a.impact.leads}</div>
            <div style={{ marginTop: 12, padding: "8px 10px", background: TAC_T.surface, border: `1px solid ${TAC_T.line}`, fontSize: 10, color: TAC_T.cyan }}>
              <span style={{ letterSpacing: "0.1em" }}>ROLLBACK · </span>{a.rollback}
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <TAC_B kind="green" onClick={() => onAction(a.id, "approve")}>APPROVE · {a.eta}</TAC_B>
            <TAC_B kind="amber" onClick={() => onAction(a.id, "schedule")}>SCHEDULE · later</TAC_B>
            <TAC_B kind="violet" onClick={() => onAction(a.id, "modify")}>MODIFY</TAC_B>
            <TAC_B onClick={() => onAction(a.id, "reject")}>REJECT</TAC_B>
          </div>
        </div>
      )}
    </div>
  );
};

const ActionsInbox = ({ compact }) => {
  const D = window.MA_DATA;
  const [expanded, setExpanded] = React.useState(D.actions.pending[0].id);
  const [resolved, setResolved] = React.useState({});
  const [showExecuted, setShowExecuted] = React.useState(false);
  const hitl = window.useHITL();

  const resolveDirect = (ids, kind) => {
    const arr = Array.isArray(ids) ? ids : [ids];
    setResolved(r => {
      const next = { ...r };
      arr.forEach(i => { next[typeof i === "string" ? i : i.id] = kind; });
      return next;
    });
  };
  const onAction = (id, kind) => {
    const action = D.actions.pending.find(a => a.id === id);
    if (!action) return;
    hitl.open(kind, { action });
  };
  const onBulk = () => {
    const p0 = visible.filter(a => a.priority === "P0");
    if (p0.length) hitl.open("bulk", { actions: p0 });
  };
  const onResolved = (target, kind, payload) => {
    if (kind === "bulk") resolveDirect(payload.ids, "approve");
    else if (target && target.id) resolveDirect(target.id, kind === "modify" ? "modify" : kind);
  };
  const visible = D.actions.pending.filter(a => !resolved[a.id]);
  const pendingByPrio = visible.reduce((acc,a) => ({ ...acc, [a.priority]: (acc[a.priority]||0)+1 }), {});

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {/* HERO HEADER */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto auto auto auto auto", gap: 16, alignItems: "center", padding: "14px 0" }}>
        <div>
          <div style={{ fontSize: 10, color: TAC_T.amber, letterSpacing: "0.18em", marginBottom: 6 }}>// ACTIONS INBOX · agent recommendations</div>
          <div style={{ fontFamily: TAC_FS, fontSize: compact ? 22 : 26, fontWeight: 600, color: TAC_T.ink }}>
            {visible.length} acciones esperan tu decisión · <span style={{ color: TAC_T.green }}>+{(D.actions.pending.reduce((s,a)=>s+(a.impact.primary.match(/\d+/)?+a.impact.primary.match(/\d+,?\d*/)[0].replace(",",""):0),0)/1000).toFixed(1)}k S/ en juego</span>
          </div>
        </div>
        <div style={{ padding: "8px 14px", border: `1px solid ${TAC_T.red}`, color: TAC_T.red, fontSize: 11, fontFamily: TAC_FM }}>P0 · {pendingByPrio.P0||0}</div>
        <div style={{ padding: "8px 14px", border: `1px solid ${TAC_T.amber}`, color: TAC_T.amber, fontSize: 11, fontFamily: TAC_FM }}>P1 · {pendingByPrio.P1||0}</div>
        <div style={{ padding: "8px 14px", border: `1px solid ${TAC_T.cyan}`, color: TAC_T.cyan, fontSize: 11, fontFamily: TAC_FM }}>P2 · {pendingByPrio.P2||0}</div>
        <TAC_B kind="green" onClick={onBulk}>APPROVE ALL P0</TAC_B>
        <TAC_B onClick={() => setShowExecuted(s => !s)}>{showExecuted ? "← BACK" : "EJECUTADAS HOY · "+D.actions.executed.length}</TAC_B>
      </div>

      {/* CONTEXT BAR */}
      <div style={{ display: "flex", gap: 0, fontSize: 10, color: TAC_T.muteDim, border: `1px solid ${TAC_T.line}`, background: TAC_T.surface }}>
        <div style={{ padding: "10px 14px", borderRight: `1px solid ${TAC_T.line}`, flex: 1 }}>
          <span style={{ letterSpacing: "0.14em" }}>AGENTE EJECUTANDO HASTA · </span>
          <span style={{ color: TAC_T.amber, fontFamily: TAC_FM }}>S/ {D.actions.autoApproveBudget.toLocaleString()}</span>
          <span> sin tu OK · acciones &gt; este umbral te llegan aquí</span>
        </div>
        <div style={{ padding: "10px 14px", borderRight: `1px solid ${TAC_T.line}` }}>
          <span style={{ letterSpacing: "0.14em" }}>AHORRO HOY · </span>
          <span style={{ color: TAC_T.green, fontFamily: TAC_FM }}>S/ {D.actions.todaySaved.toLocaleString()}</span>
        </div>
        <div style={{ padding: "10px 14px" }}>
          <span style={{ letterSpacing: "0.14em" }}>SEMANA · </span>
          <span style={{ color: TAC_T.green, fontFamily: TAC_FM }}>S/ {D.actions.weekSaved.toLocaleString()}</span>
        </div>
      </div>

      {/* CARDS or EXECUTED */}
      {!showExecuted ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {visible.map(a => (
            <ActionCard key={a.id} a={a} expanded={expanded === a.id} onToggle={() => setExpanded(e => e === a.id ? null : a.id)} onAction={onAction} />
          ))}
          <window.HITLPortal modal={hitl.modal} onClose={hitl.close} onResolved={onResolved} />
          {visible.length === 0 && (
            <div style={{ padding: "30px 20px", textAlign: "center", border: `1px dashed ${TAC_T.line}`, color: TAC_T.muteDim, fontSize: 12 }}>
              ✓ Todo procesado. El agente está monitoreando · próxima ventana de optimización en 12 min.
            </div>
          )}
          {/* resolved tray */}
          {Object.keys(resolved).length > 0 && (
            <div style={{ marginTop: 8, padding: "10px 14px", background: TAC_T.surface, border: `1px solid ${TAC_T.line}`, fontSize: 11, color: TAC_T.mute }}>
              <span style={{ color: TAC_T.green }}>● {Object.keys(resolved).length} resueltas en esta sesión · </span>
              {Object.entries(resolved).map(([id,k]) => <span key={id} style={{ marginRight: 12, color: k === "approve" ? TAC_T.green : k === "reject" ? TAC_T.red : TAC_T.amber }}>{id} {k}</span>)}
            </div>
          )}
        </div>
      ) : (
        <div style={{ border: `1px solid ${TAC_T.line}`, background: TAC_T.surface }}>
          <div style={{ padding: "10px 14px", borderBottom: `1px solid ${TAC_T.line}`, background: TAC_T.surfaceHi, display: "grid", gridTemplateColumns: "60px 1fr 200px 120px 80px", gap: 14, fontSize: 10, color: TAC_T.mute, letterSpacing: "0.12em" }}>
            <span>HORA</span><span>ACCIÓN AUTO-EJECUTADA</span><span>IMPACTO</span><span>HASH</span><span></span>
          </div>
          {D.actions.executed.map((e,i) => (
            <div key={i} style={{ padding: "10px 14px", borderBottom: i<D.actions.executed.length-1?`1px solid ${TAC_T.line}`:"none", display: "grid", gridTemplateColumns: "60px 1fr 200px 120px 80px", gap: 14, alignItems: "center", fontSize: 11 }}>
              <span style={{ color: TAC_T.muteDim, fontFamily: TAC_FM }}>{e.t}</span>
              <span style={{ color: TAC_T.ink }}>{e.action}</span>
              <span style={{ color: TAC_T.green }}>{e.impact}</span>
              <span style={{ color: TAC_T.muteDim, fontFamily: TAC_FM, fontSize: 10 }}>{e.hash}</span>
              <TAC_B onClick={() => hitl.open("snapshot", { executed: e })}>SNAPSHOT</TAC_B>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

window.ActionsInbox = ActionsInbox;