// SlackBotTeams — team-level weekly digest mock.
// Team-focused counterpart to SlackBot.jsx. Same chrome (channel header,
// app badge, action row, /tt-expert hint); top-3 rows are teams instead of
// individuals, with ▲/▼ delta in place of the agent badge.

function SlackBotTeams() {
  const rows = [
    {
      rank: '01',
      name: 'growth',
      tokens: '77.9M',
      delta: '+9',
      deltaUp: true,
      flame: true,
      lines: [
        'shipped checkout v2 ab harness · 3 variants',
        'cut /pricing LCP 300ms · merged',
        '21% of tokens came from agents this week',
      ],
    },
    {
      rank: '02',
      name: 'platform',
      tokens: '76.4M',
      delta: '-2',
      deltaUp: false,
      lines: [
        'refactored auth middleware · redis sessions',
        'opened sdk v2 codegen pipeline · in review',
        '9-bug P2 rollup · 1 of 9 merged',
      ],
    },
    {
      rank: '03',
      name: 'frontend',
      tokens: '61.3M',
      delta: '-1',
      deltaUp: false,
      lines: [
        'published tokens v3 to npm · merged',
        'fixed 11 axe violations · merged',
        'settings rebuild on tokens v3 · in review',
      ],
    },
  ];

  return (
    <div style={{
      background: 'var(--bg-1)',
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      overflow: 'hidden',
      fontFamily: 'var(--font-body)',
    }}>
      <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-leads</span>
        <span style={{ color: 'var(--fg-4)', fontSize: 11 }}>·</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>18 members</span>
      </div>

      <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 }}>tokenthread</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. your org spent <span className="t-num" style={{ color: 'var(--fg-0)', fontWeight: 600 }}>412.6M</span> tokens. here's what each team shipped.
          </div>

          <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 teams this week</div>

            {rows.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>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 10,
                      padding: '1px 5px', borderRadius: 3,
                      background: row.deltaUp ? 'var(--accent-faint)' : 'var(--bg-3)',
                      color: row.deltaUp ? 'var(--accent)' : 'var(--fg-3)',
                      letterSpacing: '0.04em',
                    }}>{row.deltaUp ? '▲' : '▼'} {row.delta}</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>
            ))}

            <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>

          <div style={{
            marginTop: 10,
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
          }}>
            try <span style={{ color: 'var(--accent)' }}>/tt-expert checkout v2</span> to see who's already shipped this
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SlackBotTeams });