// SlackBot — preview of weekly impact snapshot

function SlackBot() {
  return (
    <div style={{
      background: 'var(--bg-1)',
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      overflow: 'hidden',
      fontFamily: 'var(--font-body)',
    }}>
      {/* Slack channel header */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '12px 16px',
        borderBottom: '1px solid var(--border)',
        background: 'var(--bg-0)',
      }}>
        <span style={{ color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 14 }}>#</span>
        <span style={{ fontSize: 13, color: 'var(--fg-1)', fontWeight: 600 }}>eng-platform</span>
        <span style={{ color: 'var(--fg-4)', fontSize: 11 }}>·</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>42 members</span>
      </div>

      {/* Bot message */}
      <div style={{ padding: '18px 16px', display: 'flex', gap: 10 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 'var(--radius-sm)',
          background: 'var(--accent)', color: 'var(--accent-fg)',
          display: 'grid', placeItems: 'center',
          flex: 'none',
        }}>
          <svg width="20" height="20" viewBox="0 0 32 32" fill="none">
            <circle cx="16" cy="16" r="13" stroke="currentColor" strokeWidth="2.25" fill="none"/>
            <rect x="8"  y="18" width="3" height="6"  rx="0.5" fill="currentColor"/>
            <rect x="13" y="14" width="3" height="10" rx="0.5" fill="currentColor"/>
            <rect x="18" y="11" width="3" height="13" rx="0.5" fill="currentColor"/>
          </svg>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
            <span style={{ fontSize: 14, color: 'var(--fg-0)', fontWeight: 700 }}>tokenmaxxer</span>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 10,
              padding: '1px 6px', borderRadius: 3,
              background: 'var(--bg-3)', color: 'var(--fg-3)',
            }}>APP</span>
            <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>monday 9:00 am</span>
          </div>

          <div style={{ fontSize: 14, color: 'var(--fg-1)', marginBottom: 14 }}>
            weekly impact snapshot. you spent <span className="t-num" style={{ color: 'var(--fg-0)', fontWeight: 600 }}>42.7M</span> tokens. here's what came of it.
          </div>

          {/* Block kit-style summary card */}
          <div style={{
            border: '1px solid var(--border)',
            borderRadius: 'var(--radius-sm)',
            background: 'var(--bg-0)',
            padding: 14,
          }}>
            <div className="t-overline" style={{ marginBottom: 10 }}>top 3 this week</div>

            {[
              { rank: '01', name: 'm.chen', tokens: '12.4M', flame: true, lines: ['migrated billing svc to postgres', 'wrote 14 e2e tests for checkout', 'drafted Q3 reliability rfc'] },
              { rank: '02', name: 'devin.agent', tokens: '9.8M', agent: true, lines: ['patched 23 sentry exceptions', 'opened 6 PRs on feat/checkout-v2'] },
              { rank: '03', name: 'a.park', tokens: '8.9M', lines: ['refactored auth middleware', 'patched 9 P2 bugs'] },
            ].map((row, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '32px 1fr auto',
                gap: 12, alignItems: 'start',
                padding: '10px 0',
                borderTop: i > 0 ? '1px dashed var(--fg-4)' : 'none',
              }}>
                <span className="t-num" style={{
                  fontSize: 13, color: i === 0 ? 'var(--accent)' : 'var(--fg-3)', fontWeight: 600,
                }}>{row.rank}</span>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-0)', fontWeight: 500 }}>{row.name}</span>
                    {row.agent && <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 9,
                      padding: '1px 5px', borderRadius: 3,
                      background: 'var(--accent-faint)', color: 'var(--accent)',
                      letterSpacing: '0.05em',
                    }}>AGENT</span>}
                    {row.flame && <span style={{ color: 'var(--warn)', fontSize: 12 }}>▲</span>}
                  </div>
                  {row.lines.map((l, j) => (
                    <div key={j} style={{
                      fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.5,
                      paddingLeft: 10, position: 'relative',
                    }}>
                      <span style={{ position: 'absolute', left: 0, color: 'var(--fg-4)' }}>·</span>
                      {l}
                    </div>
                  ))}
                </div>
                <span className="t-num" style={{ fontSize: 12, color: 'var(--fg-1)', fontWeight: 500, paddingTop: 1 }}>{row.tokens}</span>
              </div>
            ))}

            {/* Action row */}
            <div style={{
              display: 'flex', gap: 8, paddingTop: 12,
              borderTop: '1px dashed var(--fg-4)', marginTop: 4,
            }}>
              <button style={{
                background: 'transparent', border: '1px solid var(--border-strong)',
                color: 'var(--fg-1)', fontSize: 12,
                padding: '6px 12px', borderRadius: 'var(--radius-sm)',
                fontFamily: 'var(--font-body)', cursor: 'pointer',
              }}>view artifacts</button>
              <button style={{
                background: 'transparent', border: '1px solid var(--border-strong)',
                color: 'var(--fg-1)', fontSize: 12,
                padding: '6px 12px', borderRadius: 'var(--radius-sm)',
                fontFamily: 'var(--font-body)', cursor: 'pointer',
              }}>open leaderboard ↗</button>
            </div>
          </div>

          {/* Slash command hint */}
          <div style={{
            marginTop: 10,
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
          }}>
            try <span style={{ color: 'var(--accent)' }}>/tm-expert postgres migrations</span> to find who else has shipped this
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SlackBot });