/* Noctua Ledger — right rail: agent identity, live activity feed, review queue, summary */
(function () {
  const DS = window.CircleBackDesignSystem_66b292;
  const { Avatar, Badge, Stat } = DS;

  function Dot({ color }) {
    return React.createElement('span', { style: { width: 7, height: 7, borderRadius: '50%', background: color, flex: 'none', marginTop: 6 } });
  }

  /* live transcript entry */
  function LogRow({ entry }) {
    const map = {
      ask:   { c: 'var(--ink-400)', label: 'YOU' },
      think: { c: 'var(--ink-400)', label: 'READING' },
      do:    { c: 'var(--green-600)', label: 'EDIT' },
      flag:  { c: 'var(--warning)', label: 'FLAG' },
      done:  { c: 'var(--green-600)', label: 'DONE' },
    };
    const m = map[entry.kind] || map.do;
    return React.createElement('div', { style: { display: 'flex', gap: 9 }, className: 'cb-fade' },
      React.createElement(Dot, { color: m.c }),
      React.createElement('div', { style: { flex: 1 } },
        React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '9.5px', letterSpacing: '.1em',
          color: m.c, fontWeight: 600, marginBottom: 2 } }, m.label),
        React.createElement('div', { style: { fontSize: '12.5px', lineHeight: 1.45,
          color: entry.kind === 'ask' ? 'var(--ink-500)' : 'var(--ink-700)',
          fontStyle: entry.kind === 'ask' ? 'italic' : 'normal' } }, entry.text)));
  }

  /* one diff card in the review queue */
  function QueueCard({ p, onApprove, onSkip }) {
    const accent = p.kind === 'flag' ? 'var(--warning)' : p.kind === 'pending' ? 'var(--info)' : 'var(--green-600)';
    const done = p.state !== 'pending';
    return React.createElement('div', {
      style: { border: `1px solid ${done ? 'var(--ink-200)' : accent}`, borderRadius: 'var(--radius-md)',
        background: 'var(--surface)', padding: '11px 12px', opacity: p.state === 'skipped' ? 0.5 : 1,
        boxShadow: done ? 'none' : 'var(--shadow-sm)', transition: 'all .25s var(--ease-out)' },
    },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 } },
        React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '10px', fontWeight: 600,
          color: 'var(--ink-500)', letterSpacing: '.04em' } }, p.sub),
        p.state === 'approved' && React.createElement('span', { style: { marginLeft: 'auto' } },
          React.createElement(Badge, { tone: 'qualified' }, 'Applied')),
        p.state === 'skipped' && React.createElement('span', { style: { marginLeft: 'auto' } },
          React.createElement(Badge, { tone: 'neutral' }, 'Skipped'))),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-mono)',
        fontSize: '12px', marginBottom: 7 } },
        React.createElement('span', { style: { color: 'var(--ink-400)', textDecoration: 'line-through' } }, p.from),
        React.createElement('span', { style: { color: 'var(--ink-300)' } }, '→'),
        React.createElement('span', { style: { color: accent, fontWeight: 600 } }, p.to)),
      React.createElement('div', { style: { fontSize: '11.5px', color: 'var(--ink-600)', lineHeight: 1.4, marginBottom: done ? 0 : 10 } }, p.note),
      !done && React.createElement('div', { style: { display: 'flex', gap: 7 } },
        React.createElement('button', { onClick: () => onApprove(p.id),
          style: { flex: 1, height: 30, borderRadius: 'var(--radius-sm)', cursor: 'pointer', fontFamily: 'var(--font-body)',
            fontSize: '12px', fontWeight: 600, background: accent, color: '#fff', border: '1px solid transparent' } }, 'Approve'),
        React.createElement('button', { onClick: () => onSkip(p.id),
          style: { width: 64, height: 30, borderRadius: 'var(--radius-sm)', cursor: 'pointer', fontFamily: 'var(--font-body)',
            fontSize: '12px', fontWeight: 600, background: 'transparent', color: 'var(--ink-600)', border: '1px solid var(--ink-200)' } }, 'Skip')));
  }

  function SectionLabel({ children, right }) {
    return React.createElement('div', { style: { display: 'flex', alignItems: 'center', padding: '0 16px', marginBottom: 10 } },
      React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '10.5px', fontWeight: 600,
        letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-400)' } }, children),
      right && React.createElement('span', { style: { marginLeft: 'auto' } }, right));
  }

  function Rail({ lane, phase, log, proposals, onApprove, onSkip, onApproveAll }) {
    const persona = lane.persona;
    const pending = proposals.filter((p) => p.state === 'pending');
    const done = phase === 'done';
    const feedRef = React.useRef(null);
    React.useEffect(() => { if (feedRef.current) feedRef.current.scrollTop = feedRef.current.scrollHeight; }, [log.length]);

    return React.createElement('aside', {
      style: { width: 348, flex: 'none', borderLeft: '1px solid var(--border-soft)', background: 'var(--surface-2)',
        display: 'flex', flexDirection: 'column', minHeight: 0 },
    },
      /* identity */
      React.createElement('div', { style: { padding: '15px 16px', borderBottom: '1px solid var(--border-soft)', display: 'flex', gap: 11, alignItems: 'center' } },
        React.createElement(Avatar, { name: persona.name, size: 42 }),
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
            React.createElement('span', { style: { fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '15px', color: 'var(--ink-900)' } }, persona.name),
            React.createElement('span', { style: { width: 7, height: 7, borderRadius: '50%',
              background: phase === 'scanning' ? 'var(--brand-bright)' : done ? 'var(--ink-300)' : 'var(--green-600)',
              animation: phase === 'scanning' ? 'cb-pulse 1s var(--ease-out) infinite' : 'none' } })),
          React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--ink-500)' } }, persona.role)),
        React.createElement('span', null,
          React.createElement(Badge, { tone: phase === 'scanning' ? 'accent' : done ? 'neutral' : 'qualified' },
            phase === 'scanning' ? 'Working' : done ? 'Idle' : phase === 'review' ? 'Review' : 'Ready'))),

      /* activity feed */
      React.createElement('div', { ref: feedRef, style: { flex: 1, overflowY: 'auto', padding: '14px 0', minHeight: 0 } },
        React.createElement(SectionLabel, null, 'Activity'),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 13, padding: '0 16px' } },
          log.length === 0 && React.createElement('div', { style: { fontSize: '12.5px', color: 'var(--ink-400)', lineHeight: 1.5 } },
            persona.line),
          log.map((e, i) => React.createElement(LogRow, { key: i, entry: e })))),

      /* review queue */
      (proposals.length > 0 && !done) && React.createElement('div', {
        style: { borderTop: '1px solid var(--border-soft)', background: 'var(--surface)', maxHeight: '46%',
          display: 'flex', flexDirection: 'column', minHeight: 0 },
      },
        React.createElement('div', { style: { padding: '13px 0 10px' } },
          React.createElement(SectionLabel, { right: React.createElement(Badge, { tone: pending.length ? 'accent' : 'neutral' }, String(pending.length)) }, 'Pending review')),
        React.createElement('div', { style: { flex: 1, overflowY: 'auto', padding: '0 16px 12px', display: 'flex', flexDirection: 'column', gap: 9 } },
          proposals.map((p) => React.createElement(QueueCard, { key: p.id, p, onApprove, onSkip }))),
        pending.length > 0 && React.createElement('div', { style: { padding: '11px 16px', borderTop: '1px solid var(--border-soft)' } },
          React.createElement('button', { onClick: onApproveAll,
            style: { width: '100%', height: 42, borderRadius: 'var(--radius-sm)', cursor: 'pointer', fontFamily: 'var(--font-body)',
              fontSize: '14px', fontWeight: 600, background: 'var(--green-600)', color: '#fff', border: 'none', boxShadow: 'var(--shadow-sm)' } },
            `Approve all ${pending.length} change${pending.length > 1 ? 's' : ''}`))),

      /* summary */
      done && React.createElement('div', { style: { borderTop: '1px solid var(--border-soft)', background: 'var(--ink-900)', padding: '18px 16px' }, className: 'on-ink' },
        React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '10px', letterSpacing: '.12em',
          textTransform: 'uppercase', color: 'var(--green-300)', marginBottom: 12 } }, 'Run complete'),
        React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 16 } },
          React.createElement('span', { style: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '34px',
            letterSpacing: '-.03em', color: 'var(--paper)' } }, lane.summary.big),
          React.createElement('span', { style: { fontSize: '12.5px', color: 'var(--ink-300)' } }, lane.summary.bigLabel)),
        React.createElement('div', { style: { display: 'flex', gap: 22, marginBottom: 14 } },
          React.createElement(MiniStat, { v: lane.summary.a, l: lane.summary.aLabel }),
          React.createElement(MiniStat, { v: lane.summary.b, l: lane.summary.bLabel })),
        React.createElement('div', { style: { fontSize: '12px', color: 'var(--ink-300)', borderTop: '1px solid rgba(255,255,255,.12)', paddingTop: 12 } },
          React.createElement('span', { style: { color: 'var(--green-300)', fontWeight: 600 } }, lane.summary.time),
          ' of back-office work — done while you ran the business.')));
  }

  function MiniStat({ v, l }) {
    return React.createElement('div', null,
      React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '22px', color: 'var(--paper)', letterSpacing: '-.02em' } }, v),
      React.createElement('div', { style: { fontSize: '11px', color: 'var(--ink-300)', lineHeight: 1.3, maxWidth: 120, marginTop: 2 } }, l));
  }

  window.LedgerRail = { Rail };
})();