// TopSet — Today screens (variations + states)
// 3 layout variations of the 4-up checklist + state variants

// Shared header
function TodayHeader({ week = 14, weekLabel = 'WEEK 1', weekSub = '5 / 5 / 5 +', done = 0 }) {
  return (
    <header style={{ padding: '8px 24px 20px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}>
        <span className="kicker">Wed · May 14</span>
        <TrainingWeekChip done={done} total={4} week="W1"/>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14 }}>
        <span className="mono" style={{ fontSize: 11, fontWeight: 600, color: 'var(--ts-text-dim)', letterSpacing: '0.16em', writingMode: 'vertical-rl', transform: 'rotate(180deg)', height: 56 }}>TRAINING&nbsp;WEEK</span>
        <span className="mono" style={{ fontSize: 80, fontWeight: 800, letterSpacing: '-0.08em', lineHeight: 0.85 }}>{String(week).padStart(2,'0')}</span>
        <div style={{ marginBottom: 12, flex: 1 }}>
          <div className="mono" style={{ fontSize: 12, color: 'var(--ts-accent)', fontWeight: 600, letterSpacing: '0.12em' }}>{weekLabel}</div>
          <div className="mono" style={{ fontSize: 17, fontWeight: 600, color: 'var(--ts-text)', marginTop: 2 }}>{weekSub}</div>
        </div>
      </div>
    </header>
  );
}

// V1 — Default "card stack"
function TodayDefault() {
  return (
    <div className="ts phone">
      <StatusBar/>
      <TodayHeader done={2}/>
      <div className="rule" style={{ margin: '0 24px', width: 'auto' }}/>
      <div className="ticks" style={{ margin: '8px 24px 14px' }}>
        {Array.from({length: 20}).map((_,i) => <span key={i}/>)}
      </div>

      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1, overflow: 'hidden' }}>
        <LiftCard lift="Squat"          abbr="SQ" weight={245} reps={5} isAmrap status="done"    lastAmrap={9}  lastWeight={245}/>
        <LiftCard lift="Bench Press"    abbr="BP" weight={175} reps={5} isAmrap status="done"    lastAmrap={7}  lastWeight={175}/>
        <LiftCard lift="Deadlift"       abbr="DL" weight={315} reps={5} isAmrap status="next"    e1rm={372}/>
        <LiftCard lift="Overhead Press" abbr="OH" weight={105} reps={5} isAmrap status="queued"/>
      </div>

      <div style={{ padding: '14px 16px 96px', display: 'flex', gap: 10 }}>
        <button className="ts-btn" style={{ flex: 1 }}>Start Deadlift</button>
        <button className="icon-btn" style={{ height: 56, width: 56, borderRadius: 14 }}><Ico.Plus/></button>
      </div>

      <TabBar active="today"/>
      <Home/>
    </div>
  );
}

// V2 — Vertical "stack" layout (numbers-forward, tighter)
function TodayStack() {
  const lifts = [
    { ab: 'SQ', name: 'Squat',          w: 245, r: 5, st: 'done',    last: '9+ @ 245' },
    { ab: 'BP', name: 'Bench Press',    w: 175, r: 5, st: 'done',    last: '7+ @ 175' },
    { ab: 'DL', name: 'Deadlift',       w: 315, r: 5, st: 'next',    last: '8+ @ 305' },
    { ab: 'OH', name: 'Overhead Press', w: 105, r: 5, st: 'queued',  last: '6+ @ 100' },
  ];

  return (
    <div className="ts phone">
      <StatusBar/>
      <header style={{ padding: '8px 24px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <div className="kicker">TRAINING WEEK 14</div>
            <h1 style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.03em', marginTop: 6 }}>Week 1 · 5/5/5+</h1>
          </div>
          <TrainingWeekChip done={2} total={4} week="W1"/>
        </div>
      </header>

      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        {lifts.map((l, i) => {
          const next = l.st === 'next';
          const done = l.st === 'done';
          return (
            <div key={l.ab} style={{
              display: 'grid',
              gridTemplateColumns: '44px 1fr auto',
              alignItems: 'center',
              gap: 14,
              padding: '20px 8px',
              borderTop: i === 0 ? 'none' : '1px solid var(--ts-border)',
              background: next ? 'linear-gradient(90deg, var(--ts-surface) 0%, transparent 100%)' : 'transparent',
              borderLeft: next ? '3px solid var(--ts-text)' : '3px solid transparent',
              paddingLeft: next ? 5 : 8,
              opacity: l.st === 'skipped' ? 0.4 : 1,
            }}>
              <div style={{
                fontFamily: 'var(--ts-mono)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.05em',
                color: next ? 'var(--ts-text)' : (done ? 'var(--ts-text-mute)' : 'var(--ts-text-dim)'),
              }}>{l.ab}</div>

              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: done ? 'var(--ts-text-mute)' : 'var(--ts-text)' }}>{l.name}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ts-text-dim)', marginTop: 4 }}>
                  Last <span style={{ color: 'var(--ts-text-mute)' }}>{l.last}</span>
                </div>
              </div>

              <div style={{ textAlign: 'right' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, justifyContent: 'flex-end' }}>
                  <span className="mono" style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.04em',
                    color: done ? 'var(--ts-text-mute)' : 'var(--ts-text)' }}>{l.w}</span>
                  <span className="mono" style={{ fontSize: 14, color: 'var(--ts-accent)' }}>×{l.r}+</span>
                </div>
                <div style={{ marginTop: 4, display: 'flex', justifyContent: 'flex-end' }}>
                  {done && <span className="badge" style={{ background: 'var(--ts-surface-3)', fontSize: 10 }}><Ico.Check/> done</span>}
                  {next && <span className="kicker accent" style={{ fontSize: 10 }}>NEXT ›</span>}
                  {l.st === 'queued' && <span className="kicker" style={{ fontSize: 10 }}>QUEUED</span>}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ padding: '14px 16px 96px' }}>
        <button className="ts-btn">Start Deadlift · 315 × 5+</button>
      </div>

      <TabBar active="today"/>
      <Home/>
    </div>
  );
}

// V3 — Grid 2x2 "tiles" layout
function TodayGrid() {
  const lifts = [
    { ab: 'SQ', name: 'Squat',          w: 245, r: 5, st: 'done',    last: '9' },
    { ab: 'BP', name: 'Bench',          w: 175, r: 5, st: 'done',    last: '7' },
    { ab: 'DL', name: 'Deadlift',       w: 315, r: 5, st: 'next',    last: '8' },
    { ab: 'OH', name: 'Press',          w: 105, r: 5, st: 'queued',  last: '6' },
  ];
  return (
    <div className="ts phone">
      <StatusBar/>
      <header style={{ padding: '8px 24px 16px' }}>
        <div className="kicker" style={{ marginBottom: 4 }}>TRAINING WEEK 14 · WED MAY 14</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <h1 style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.03em' }}>5 / 5 / 5 <span style={{ color: 'var(--ts-accent)' }}>+</span></h1>
          <TrainingWeekChip done={2} total={4} week="W1"/>
        </div>
      </header>

      <div style={{ padding: '0 16px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, flex: 1 }}>
        {lifts.map(l => {
          const done = l.st === 'done';
          const next = l.st === 'next';
          return (
            <div key={l.ab} style={{
              padding: 16, borderRadius: 16,
              background: next ? 'var(--ts-surface)' : 'transparent',
              border: '1px solid ' + (next ? 'var(--ts-border-2)' : 'var(--ts-border)'),
              display: 'flex', flexDirection: 'column',
              justifyContent: 'space-between',
              opacity: done ? 0.7 : 1,
              position: 'relative',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ts-text-dim)', fontWeight: 600 }}>{l.ab}</span>
                {done && <span style={{ width: 18, height: 18, borderRadius: 9, background: 'var(--ts-surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ts-text)' }}><Ico.Check/></span>}
                {next && <span className="kicker accent" style={{ fontSize: 9 }}>NEXT</span>}
              </div>

              <div style={{ margin: '12px 0 16px' }}>
                <div style={{ fontSize: 16, fontWeight: 600 }}>{l.name}</div>
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                  <span className="mono" style={{ fontSize: 38, fontWeight: 700, letterSpacing: '-0.05em', color: done ? 'var(--ts-text-mute)' : 'var(--ts-text)' }}>{l.w}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 4 }}>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--ts-text-mute)' }}>lb × {l.r}<span style={{ color: 'var(--ts-accent)' }}>+</span></span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ts-text-dim)' }}>last {l.last}+</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ padding: '14px 16px 96px' }}>
        <button className="ts-btn">Start Deadlift</button>
      </div>
      <TabBar active="today"/>
      <Home/>
    </div>
  );
}

// State: all done — restrained celebration
function TodayAllDone() {
  return (
    <div className="ts phone">
      <StatusBar/>
      <TodayHeader done={4}/>
      <div className="rule" style={{ margin: '0 24px', width: 'auto' }}/>

      <div style={{ padding: '24px 16px 0', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{
          padding: '20px 18px',
          background: 'var(--ts-surface)',
          border: '1px solid var(--ts-border-2)',
          borderRadius: 16,
          marginBottom: 14,
        }}>
          <div className="kicker accent" style={{ marginBottom: 8 }}>WEEK COMPLETE</div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.2 }}>All four logged.<br/>Advance to training week 15?</div>
          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
            <button className="ts-btn">Advance week</button>
            <button className="ts-btn secondary" style={{ flex: 0, padding: '0 18px' }}>Hold</button>
          </div>
        </div>

        <div className="kicker" style={{ margin: '8px 4px 10px' }}>This week's AMRAPs</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: 'var(--ts-border)' }}>
          {[
            ['SQ', 'Squat',          245, 9],
            ['BP', 'Bench Press',    175, 7],
            ['DL', 'Deadlift',       315, 8],
            ['OH', 'Overhead Press', 105, 6],
          ].map(([ab, name, w, r]) => (
            <div key={ab} style={{
              display: 'grid', gridTemplateColumns: '36px 1fr auto auto',
              alignItems: 'center', gap: 14, padding: '14px 16px',
              background: 'var(--ts-bg)',
            }}>
              <span className="mono" style={{ fontSize: 13, fontWeight: 600, color: 'var(--ts-text-mute)' }}>{ab}</span>
              <span style={{ fontSize: 14, fontWeight: 500 }}>{name}</span>
              <span className="mono" style={{ fontSize: 14, color: 'var(--ts-text-mute)' }}>{w} ×</span>
              <span className="mono" style={{ fontSize: 18, fontWeight: 700, color: 'var(--ts-text)' }}>{r}+</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '16px 16px 96px' }}>
        <button className="ts-btn secondary">View week summary →</button>
      </div>
      <TabBar active="today"/>
      <Home/>
    </div>
  );
}

// State: empty / first-run
function TodayEmpty() {
  return (
    <div className="ts phone">
      <StatusBar/>
      <TodayHeader done={0}/>
      <div className="rule" style={{ margin: '0 24px', width: 'auto' }}/>

      <div style={{ padding: '40px 32px 0', flex: 1, textAlign: 'center' }}>
        <div style={{ margin: '0 auto', width: 96, height: 96, borderRadius: 24, background: 'var(--ts-surface)', border: '1px solid var(--ts-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
          <span style={{ width: 56, height: 56, color: 'var(--ts-text-mute)' }}><Ico.Bar/></span>
        </div>
        <h2 style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 8 }}>Cycle 01 begins.</h2>
        <p style={{ color: 'var(--ts-text-mute)', fontSize: 14, lineHeight: 1.4, margin: '0 auto', maxWidth: 280 }}>
          Four lifts. Three weeks (plus deload if you take it). Start with whichever bar you walk up to.
        </p>

        <div style={{ marginTop: 32, display: 'grid', gap: 6, padding: '12px 14px', background: 'var(--ts-surface)', borderRadius: 12, textAlign: 'left' }}>
          {[
            ['SQ', 'Squat', 245],
            ['BP', 'Bench Press', 175],
            ['DL', 'Deadlift', 315],
            ['OH', 'Overhead Press', 105],
          ].map(([ab, n, w]) => (
            <div key={ab} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 4px' }}>
              <span style={{ fontSize: 13 }}>{n}</span>
              <span className="mono" style={{ fontSize: 13, color: 'var(--ts-text-mute)' }}>{w} × 5+</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '24px 16px 96px' }}>
        <button className="ts-btn">Start first lift</button>
      </div>
      <TabBar active="today"/>
      <Home/>
    </div>
  );
}

// State: reorder mode
function TodayReorder() {
  const order = [
    { ab: 'DL', name: 'Deadlift',       w: 315 },
    { ab: 'SQ', name: 'Squat',          w: 245 },
    { ab: 'BP', name: 'Bench Press',    w: 175 },
    { ab: 'OH', name: 'Overhead Press', w: 105 },
  ];
  return (
    <div className="ts phone">
      <StatusBar/>
      <header style={{ padding: '8px 24px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="kicker accent">REORDERING</span>
        <button className="ts-btn sm" style={{ background: 'var(--ts-text)', color: 'var(--ts-bg)' }}>Done</button>
      </header>

      <div style={{ padding: '8px 16px 0' }}>
        <p style={{ fontSize: 13, color: 'var(--ts-text-mute)', marginBottom: 18 }}>Drag to set the order you'll see your lifts in each training week.</p>
        {order.map((l, i) => (
          <div key={l.ab} style={{
            display: 'grid', gridTemplateColumns: '36px 44px 1fr auto 24px',
            alignItems: 'center', gap: 12,
            padding: '16px 14px',
            background: 'var(--ts-surface)',
            border: '1px solid var(--ts-border)',
            borderRadius: 12,
            marginBottom: 8,
            boxShadow: i === 0 ? '0 8px 20px rgba(0,0,0,0.4)' : 'none',
            transform: i === 0 ? 'scale(1.02)' : 'none',
          }}>
            <span className="mono" style={{ fontSize: 13, color: 'var(--ts-text-dim)', fontWeight: 600 }}>{String(i+1).padStart(2,'0')}</span>
            <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--ts-surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--ts-mono)', fontWeight: 700, fontSize: 13 }}>{l.ab}</div>
            <span style={{ fontSize: 15, fontWeight: 500 }}>{l.name}</span>
            <span className="mono" style={{ fontSize: 13, color: 'var(--ts-text-mute)' }}>{l.w}</span>
            <span style={{ color: i === 0 ? 'var(--ts-text)' : 'var(--ts-text-dim)' }}><Ico.Grip/></span>
          </div>
        ))}
      </div>
      <TabBar active="today"/>
      <Home/>
    </div>
  );
}

// State: skipped-lift callout
function TodayCallout() {
  return (
    <div className="ts phone">
      <StatusBar/>
      <TodayHeader done={0}/>
      <div className="rule" style={{ margin: '0 24px', width: 'auto' }}/>

      <div style={{ padding: '14px 16px 0' }}>
        <div style={{
          padding: '12px 14px',
          background: 'rgba(245, 158, 11, 0.08)',
          border: '1px solid rgba(245, 158, 11, 0.3)',
          borderRadius: 10,
          display: 'flex',
          alignItems: 'flex-start',
          gap: 12,
        }}>
          <span style={{ color: 'var(--ts-warning)' }}><Ico.Flag/></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Deadlift skipped last week.</div>
            <div style={{ fontSize: 12, color: 'var(--ts-text-mute)' }}>That lift is still on Cycle 04 while the others are on Cycle 05. Resume it any time.</div>
          </div>
          <span style={{ color: 'var(--ts-text-dim)' }}><Ico.Close/></span>
        </div>
      </div>

      <div style={{ padding: '14px 16px 0', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        <LiftCard lift="Squat"          abbr="SQ" weight={245} reps={5} isAmrap status="next" e1rm={296}/>
        <LiftCard lift="Bench Press"    abbr="BP" weight={175} reps={5} isAmrap status="queued"/>
        <LiftCard lift="Deadlift"       abbr="DL" weight={295} reps={5} isAmrap status="skipped"/>
        <LiftCard lift="Overhead Press" abbr="OH" weight={105} reps={5} isAmrap status="queued"/>
      </div>

      <div style={{ padding: '14px 16px 96px' }}>
        <button className="ts-btn">Start Squat</button>
      </div>
      <TabBar active="today"/>
      <Home/>
    </div>
  );
}

Object.assign(window, {
  TodayDefault, TodayStack, TodayGrid,
  TodayAllDone, TodayEmpty, TodayReorder, TodayCallout,
});