// screens-1.jsx — Client menu, Next Workout overview, section screens (warmup/cool/post), Pre-workout

// ─── Bottom Nav ──────────────────────────────────────────────────────────
function BottomNav({ theme, navStyle = 'icons', active = 'home', onNav }) {
  const items = [
    { id: 'home',     icon: 'home',     label: 'Clients' },
    { id: 'calendar', icon: 'calendar', label: 'Schedule' },
    { id: 'add',      icon: 'plus',     label: 'New' },
    { id: 'pay',      icon: 'receipt',  label: 'Payments' },
  ];

  if (navStyle === 'pill') {
    return (
      <div style={{
        position: 'absolute', bottom: 28, left: 16, right: 16, zIndex: 30,
        display: 'flex', justifyContent: 'space-around', alignItems: 'center',
        background: theme.isDark ? 'rgba(28,28,30,0.85)' : 'rgba(255,255,255,0.92)',
        backdropFilter: 'blur(20px) saturate(180%)',
        WebkitBackdropFilter: 'blur(20px) saturate(180%)',
        border: `1px solid ${theme.border}`,
        borderRadius: 9999, padding: '10px 8px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
      }}>
        {items.map(it => {
          const isActive = active === it.id;
          const isAdd = it.id === 'add';
          return (
            <div key={it.id} onClick={() => onNav(it.id)} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              padding: isAdd ? '6px 14px' : '6px 12px',
              borderRadius: 9999, cursor: 'pointer',
              background: isAdd ? theme.primary : (isActive ? (theme.isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)') : 'transparent'),
              transition: 'background 0.15s',
            }}>
              <Icon name={it.icon} size={isAdd ? 22 : 20}
                color={isAdd ? theme.primaryInk : (isActive ? theme.primary : theme.muted)}
                strokeWidth={isAdd ? 2.4 : 1.8}
              />
            </div>
          );
        })}
      </div>
    );
  }

  // Default tab bar (icons + labels)
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 30,
      paddingBottom: 28, paddingTop: 8,
      background: theme.isDark ? 'rgba(28,28,30,0.85)' : 'rgba(255,255,255,0.92)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      borderTop: `0.5px solid ${theme.border}`,
      display: 'flex', justifyContent: 'space-around',
    }}>
      {items.map(it => {
        const isActive = active === it.id;
        const isAdd = it.id === 'add';
        return (
          <div key={it.id} onClick={() => onNav(it.id)} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            cursor: 'pointer', flex: 1, gap: 3,
          }}>
            {isAdd ? (
              <div style={{
                width: 36, height: 36, borderRadius: 9999,
                background: theme.primary,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginTop: -4,
              }}>
                <Icon name="plus" size={22} color={theme.primaryInk} strokeWidth={2.4}/>
              </div>
            ) : (
              <Icon name={it.icon} size={22} color={isActive ? theme.primary : theme.muted}/>
            )}
            <div style={{
              fontFamily: theme.uiFamily, fontSize: 10, fontWeight: 500,
              color: isActive ? theme.primary : theme.muted,
              letterSpacing: 0.1,
            }}>{it.label}</div>
          </div>
        );
      })}
    </div>
  );
}

// ─── Top Bar with hamburger + client name ───────────────────────────────
function TopBar({ theme, title, onMenu, onBack, right, accent, sectionIcon }) {
  // accent: a section color. drives a tinted bg wash + top strip.
  const wash = accent ? hexToRgba(accent, theme.isDark ? 0.18 : 0.10) : 'transparent';
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 5,
      background: accent
        ? `linear-gradient(180deg, ${wash} 0%, ${wash} 70%, ${theme.bg} 100%)`
        : theme.bg,
    }}>
      {accent && (
        <div style={{ height: 4, background: accent, opacity: 0.9 }}/>
      )}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: accent ? '66px 18px 18px' : '70px 18px 14px',
      }}>
      {onBack ? (
        <div onClick={onBack} style={{ cursor: 'pointer', padding: 4, marginLeft: -4 }}>
          <Icon name="chevronLeft" size={26} color={theme.text}/>
        </div>
      ) : (
        <div onClick={onMenu} style={{ cursor: 'pointer', padding: 4, marginLeft: -4 }}>
          <Icon name="menu" size={24} color={theme.text} strokeWidth={2.2}/>
        </div>
      )}
      {sectionIcon && (
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: accent ? hexToRgba(accent, 0.18) : 'transparent',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <Icon name={sectionIcon} size={16} color={accent || theme.primary} strokeWidth={2}/>
        </div>
      )}
      <div style={{
        flex: 1, fontFamily: theme.displayFamily,
        fontSize: 22, fontWeight: 600,
        color: theme.text, letterSpacing: -0.3,
      }}>{title}</div>
      {right}
      </div>
    </div>
  );
}

function hexToRgba(hex, a) {
  if (!hex || !hex.startsWith('#')) return `rgba(0,0,0,${a})`;
  const h = hex.slice(1);
  const r = parseInt(h.slice(0,2), 16), g = parseInt(h.slice(2,4), 16), b = parseInt(h.slice(4,6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

// ─── Client Menu (Home) ──────────────────────────────────────────────────
function ClientMenuScreen({ theme, cardStyle, onNav, onMenu }) {
  const sections = [
    { id: 'next-workout',    label: "Today's Workout", color: theme.sectionColors.next,    icon: 'play',    sub: CLIENT.nextWorkout },
    { id: 'workout-history', label: 'Workout History', color: theme.sectionColors.history, icon: 'history', sub: '24 sessions logged' },
    { id: 'health-history',  label: 'Health History',  color: theme.sectionColors.health,  icon: 'heart',   sub: '3 conditions tracked' },
    { id: 'goals',           label: 'Goals & Programs', color: theme.sectionColors.goals,  icon: 'target',  sub: '4 active goals' },
    { id: 'assessments',     label: 'Assessments',     color: theme.sectionColors.assess,  icon: 'chart',   sub: 'Last: Apr 1' },
  ];
  return (
    <>
      <TopBar theme={theme} title={`Client · ${CLIENT.name}`} onMenu={onMenu}
        right={<div style={{
          width: 36, height: 36, borderRadius: 9999, background: theme.primary,
          color: theme.primaryInk, fontFamily: theme.uiFamily, fontWeight: 600,
          fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>{CLIENT.initials}</div>}
      />

      {/* Quick stats banner */}
      <div style={{ padding: '0 18px 8px' }}>
        <Card theme={theme} cardStyle={cardStyle} padding={14} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          background: theme.isDark ? theme.surface : 'rgba(232,131,11,0.08)',
          border: `1px solid ${theme.border}`,
        }}>
          <div style={{ width: 4, height: 36, borderRadius: 4, background: theme.primary }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: theme.uiFamily, fontSize: 11, fontWeight: 600, color: theme.muted, textTransform: 'uppercase', letterSpacing: 0.5 }}>Next session</div>
            <div style={{ fontFamily: theme.uiFamily, fontSize: 14, fontWeight: 600, color: theme.text, marginTop: 2 }}>{CLIENT.nextWorkout}</div>
          </div>
          <div style={{
            fontFamily: theme.uiFamily, fontSize: 11, fontWeight: 600,
            color: theme.success, padding: '4px 8px',
            background: theme.isDark ? 'rgba(52,211,153,0.12)' : 'rgba(46,125,50,0.08)',
            borderRadius: 6,
          }}>{CLIENT.paymentStatus}</div>
        </Card>
      </div>

      <div style={{ padding: '8px 18px 100px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {sections.map(s => (
          <Card key={s.id} theme={theme} cardStyle={cardStyle}
            onClick={() => onNav(s.id)}
            padding={0}
            style={{
              background: s.color, border: 'none', overflow: 'hidden',
              boxShadow: theme.cardShadow,
            }}
          >
            <div style={{
              padding: '18px 18px',
              display: 'flex', alignItems: 'center', gap: 14,
              color: getContrast(s.color),
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12,
                background: 'rgba(255,255,255,0.18)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={s.icon} size={20} color={getContrast(s.color)} strokeWidth={2}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ fontFamily: theme.displayFamily, fontSize: 22, fontWeight: 600, lineHeight: 1.1 }}>{s.label}</div>
                  <StatusBadge status={statusFor(s.id)} style={{ background: 'rgba(0,0,0,0.32)' }}/>
                </div>
                <div style={{ fontFamily: theme.uiFamily, fontSize: 12, opacity: 0.85, marginTop: 4 }}>{s.sub}</div>
              </div>
              <Icon name="chevron" size={20} color={getContrast(s.color)} strokeWidth={2}/>
            </div>
          </Card>
        ))}
      </div>
    </>
  );
}

// helper — pick black or white text based on bg
function getContrast(hex) {
  if (!hex || !hex.startsWith('#')) return '#fff';
  const h = hex.slice(1);
  const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  return (r*299 + g*587 + b*114) / 1000 > 145 ? '#1A1410' : '#FFFFFF';
}

// ─── Next Workout Overview ───────────────────────────────────────────────
function NextWorkoutScreen({ theme, cardStyle, onNav, onBack, completedSections }) {
  return (
    <>
      <TopBar theme={theme} title="Today's Workout" onBack={onBack}/>
      <div style={{ padding: '0 18px 8px' }}>
        <div style={{ fontFamily: theme.uiFamily, fontSize: 13, color: theme.muted }}>
          Lower Body + Core · 55 min · Tue, Apr 30
        </div>
      </div>

      <div style={{ padding: '14px 18px 100px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {FLOW_SECTIONS.map((s, i) => {
          const done = completedSections.has(s.id);
          return (
            <Card key={s.id} theme={theme} cardStyle={cardStyle}
              onClick={() => onNav(`section-${s.id}`)}
              padding={0}
              style={{ overflow: 'hidden', opacity: done ? 0.65 : 1 }}
            >
              <div style={{ display: 'flex', alignItems: 'stretch' }}>
                <div style={{
                  width: 56, background: theme.primary,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: theme.primaryInk, fontFamily: theme.displayFamily,
                  fontSize: 22, fontWeight: 600,
                }}>{i + 1}</div>
                <div style={{ flex: 1, padding: '14px 16px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <DepthDots depth={s.depth} theme={theme} active={!done}/>
                    <div style={{ fontFamily: theme.uiFamily, fontSize: 11, color: theme.muted, fontWeight: 500, letterSpacing: 0.4, textTransform: 'uppercase' }}>
                      {['', 'Section', 'Subsection', 'Detail'][s.depth]}
                    </div>
                    {s.flagged && <div style={{ width: 7, height: 7, borderRadius: 9999, background: theme.danger, marginLeft: 'auto' }}/>}
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <div style={{ fontFamily: theme.displayFamily, fontSize: 19, fontWeight: 600, color: theme.text }}>
                      {s.name}
                    </div>
                    <StatusBadge status={statusFor({pre:'pre-workout',warmup:'section-warmup',main:'main-sets',cool:'section-cool',post:'section-post'}[s.id])}/>
                  </div>
                  <div style={{ fontFamily: theme.uiFamily, fontSize: 12, color: theme.muted, marginTop: 2 }}>
                    {s.blurb} · {s.est} · {s.count} {s.id === 'pre' ? 'inputs' : 'items'}
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', padding: '0 14px' }}>
                  {done ? (
                    <div style={{
                      width: 28, height: 28, borderRadius: 9999, background: theme.success,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <Icon name="check" size={16} color="#fff" strokeWidth={3}/>
                    </div>
                  ) : <Icon name="chevron" size={20} color={theme.muted}/>}
                </div>
              </div>
            </Card>
          );
        })}

        <div style={{ marginTop: 8, fontFamily: theme.uiFamily, fontSize: 12, color: theme.muted, textAlign: 'left', padding: '0 24px' }}>
          Recommendations only — tap any section to edit reps, sets, swap exercises, or add notes.
        </div>
      </div>
    </>
  );
}

// ─── Generic exercise list section (Warmup, Cool Down, Post) ────────────
function SectionListScreen({ theme, cardStyle, sectionId, onBack, onNav, onComplete }) {
  const meta = FLOW_SECTIONS.find(s => s.id === sectionId);
  const items = sectionId === 'warmup' ? WARMUP : sectionId === 'cool' ? COOLDOWN : POST;

  return (
    <>
      <TopBar theme={theme} title={meta.name} onBack={onBack}/>
      <div style={{ padding: '0 18px 8px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <DepthDots depth={meta.depth} theme={theme} active/>
        <div style={{ fontFamily: theme.uiFamily, fontSize: 12, color: theme.muted }}>
          {meta.est} · {meta.count} items
        </div>
        <button onClick={() => onComplete(sectionId)} style={{
          marginLeft: 'auto', padding: '6px 12px', borderRadius: 9999,
          background: theme.primary, color: theme.primaryInk,
          fontFamily: theme.uiFamily, fontSize: 12, fontWeight: 600,
          border: 'none', cursor: 'pointer',
        }}>Mark complete</button>
      </div>

      <div style={{ padding: '14px 18px 100px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((ex, i) => (
          <Card key={ex.id} theme={theme} cardStyle={cardStyle} padding={14}
            onClick={() => onNav(`exercise-${ex.id}`, { section: sectionId, ex })}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10,
                background: theme.isDark ? 'rgba(255,255,255,0.06)' : 'rgba(232,131,11,0.10)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: theme.primary, fontFamily: theme.displayFamily, fontSize: 16, fontWeight: 700,
              }}>{i + 1}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: theme.uiFamily, fontSize: 15, fontWeight: 600, color: theme.text }}>
                  {ex.name}
                </div>
                <div style={{ fontFamily: theme.uiFamily, fontSize: 12, color: theme.muted, marginTop: 2 }}>
                  {ex.detail} · {ex.targetSets} {ex.targetSets === 1 ? 'set' : 'sets'}
                </div>
              </div>
              <Icon name="play" size={16} color={theme.primary}/>
            </div>
          </Card>
        ))}
      </div>
    </>
  );
}

// ─── Pre-Workout (notes, mood, energy, flag) ────────────────────────────
function PreWorkoutScreen({ theme, cardStyle, onBack, onComplete, state, setState }) {
  const meta = FLOW_SECTIONS.find(s => s.id === 'pre');
  const moodFaces = [
    { v: 1, label: 'Awful' },
    { v: 2, label: 'Low' },
    { v: 3, label: 'OK' },
    { v: 4, label: 'Good' },
    { v: 5, label: 'Great' },
  ];

  return (
    <>
      <TopBar theme={theme} title="Pre-Workout" onBack={onBack}/>
      <div style={{ padding: '0 18px 8px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <DepthDots depth={meta.depth} theme={theme} active/>
        <div style={{ fontFamily: theme.uiFamily, fontSize: 12, color: theme.muted }}>Quick check-in before warmup</div>
      </div>

      <div style={{ padding: '14px 18px 100px', display: 'flex', flexDirection: 'column', gap: 14 }}>

        {/* Flag toggle */}
        <Card theme={theme} cardStyle={cardStyle} padding={14}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 36, height: 36, borderRadius: 9999,
              background: state.flagged ? theme.danger : (theme.isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)'),
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="flag" size={18} color={state.flagged ? '#fff' : theme.muted} strokeWidth={2}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: theme.uiFamily, fontSize: 14, fontWeight: 600, color: theme.text }}>
                Flag for trainer review
              </div>
              <div style={{ fontFamily: theme.uiFamily, fontSize: 12, color: theme.muted, marginTop: 2 }}>
                Marks this session for follow-up
              </div>
            </div>
            <Toggle theme={theme} value={state.flagged} onChange={v => setState({ ...state, flagged: v })}/>
          </div>
        </Card>

        {/* Mood */}
        <Card theme={theme} cardStyle={cardStyle} padding={14}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <Icon name="mood" size={18} color={theme.primary}/>
            <div style={{ fontFamily: theme.uiFamily, fontSize: 14, fontWeight: 600, color: theme.text }}>Mood</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {moodFaces.map(m => {
              const active = state.mood === m.v;
              return (
                <div key={m.v} onClick={() => setState({ ...state, mood: m.v })} style={{
                  flex: 1, padding: '10px 4px', borderRadius: 10,
                  background: active ? theme.primary : (theme.isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)'),
                  color: active ? theme.primaryInk : theme.text,
                  fontFamily: theme.uiFamily, fontSize: 11, fontWeight: 500,
                  textAlign: 'left', cursor: 'pointer',
                  transition: 'all 0.15s',
                }}>
                  <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 2 }}>{m.v}</div>
                  <div>{m.label}</div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* Energy */}
        <Card theme={theme} cardStyle={cardStyle} padding={14}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <Icon name="energy" size={18} color={theme.primary}/>
            <div style={{ fontFamily: theme.uiFamily, fontSize: 14, fontWeight: 600, color: theme.text }}>Energy</div>
            <div style={{ marginLeft: 'auto', fontFamily: theme.monoFamily, fontSize: 13, color: theme.muted }}>{state.energy} / 10</div>
          </div>
          <input type="range" min="1" max="10" value={state.energy}
            onChange={e => setState({ ...state, energy: Number(e.target.value) })}
            style={{ width: '100%', accentColor: theme.primary }}
          />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, fontFamily: theme.uiFamily, fontSize: 10, color: theme.muted }}>
            <span>Drained</span><span>Wired</span>
          </div>
        </Card>

        {/* Notes */}
        <Card theme={theme} cardStyle={cardStyle} padding={14}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <Icon name="notes" size={18} color={theme.primary}/>
            <div style={{ fontFamily: theme.uiFamily, fontSize: 14, fontWeight: 600, color: theme.text }}>Notes</div>
          </div>
          <textarea
            value={state.notes}
            onChange={e => setState({ ...state, notes: e.target.value })}
            placeholder="Sleep, soreness, anything that might affect today's session…"
            style={{
              width: '100%', minHeight: 70,
              background: theme.isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)',
              border: `1px solid ${theme.border}`, borderRadius: 10,
              padding: 10, fontFamily: theme.uiFamily, fontSize: 13, color: theme.text,
              resize: 'vertical', boxSizing: 'border-box', outline: 'none',
            }}
          />
        </Card>

        {/* Past notes */}
        <Card theme={theme} cardStyle={cardStyle} padding={0}>
          <div style={{ padding: '12px 14px 8px', display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="history" size={16} color={theme.muted}/>
            <div style={{ fontFamily: theme.uiFamily, fontSize: 12, fontWeight: 600, color: theme.muted, textTransform: 'uppercase', letterSpacing: 0.5 }}>
              Past note history
            </div>
          </div>
          {PAST_NOTES.slice(0, 3).map((n, i) => (
            <div key={i} style={{
              padding: '10px 14px', display: 'flex', gap: 10, alignItems: 'flex-start',
              borderTop: `0.5px solid ${theme.border}`,
            }}>
              <div style={{ fontFamily: theme.monoFamily, fontSize: 11, color: theme.muted, flexShrink: 0, paddingTop: 1 }}>
                {n.date}
              </div>
              <div style={{ flex: 1, fontFamily: theme.uiFamily, fontSize: 12, color: theme.text, lineHeight: 1.45 }}>
                {n.note}
              </div>
              {n.flag && <div style={{ width: 6, height: 6, borderRadius: 9999, background: theme.danger, marginTop: 6, flexShrink: 0 }}/>}
            </div>
          ))}
        </Card>

        <button onClick={() => onComplete('pre')} style={{
          marginTop: 4, padding: '14px',
          borderRadius: theme.radius, background: theme.primary, color: theme.primaryInk,
          fontFamily: theme.uiFamily, fontSize: 15, fontWeight: 600,
          border: 'none', cursor: 'pointer',
        }}>Save & continue to warmup</button>
      </div>
    </>
  );
}

function Toggle({ theme, value, onChange }) {
  return (
    <div onClick={() => onChange(!value)} style={{
      width: 44, height: 26, borderRadius: 9999,
      background: value ? theme.primary : (theme.isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.18)'),
      position: 'relative', cursor: 'pointer', transition: 'background 0.2s',
      flexShrink: 0,
    }}>
      <div style={{
        position: 'absolute', top: 2, left: value ? 20 : 2,
        width: 22, height: 22, borderRadius: 9999, background: '#fff',
        transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
      }}/>
    </div>
  );
}

// ─── Main Sets list ──────────────────────────────────────────────────────
function MainSetsScreen({ theme, cardStyle, onBack, onNav, exercises }) {
  const meta = FLOW_SECTIONS.find(s => s.id === 'main');
  return (
    <>
      <TopBar theme={theme} title="Main Sets" onBack={onBack}/>
      <div style={{ padding: '0 18px 8px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <DepthDots depth={meta.depth} theme={theme} active/>
        <div style={{ fontFamily: theme.uiFamily, fontSize: 12, color: theme.muted }}>
          {meta.est} · {exercises.length} exercises
        </div>
        <button style={{
          marginLeft: 'auto', padding: '6px 10px', borderRadius: 9999,
          background: 'transparent', color: theme.primary,
          fontFamily: theme.uiFamily, fontSize: 12, fontWeight: 600,
          border: `1px solid ${theme.primary}`, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 4,
        }}>
          <Icon name="edit" size={12} color={theme.primary}/> Edit workout
        </button>
      </div>

      <div style={{ padding: '14px 18px 100px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {exercises.map((ex, i) => {
          const completed = ex.sets.filter(s => s.done).length;
          const pct = completed / ex.sets.length;
          return (
            <Card key={ex.id} theme={theme} cardStyle={cardStyle} padding={0}
              onClick={() => onNav(`exercise-${ex.id}`, { section: 'main', ex })}
            >
              <div style={{ display: 'flex', alignItems: 'stretch' }}>
                <div style={{
                  width: 64, background: theme.isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                  borderRight: `1px solid ${theme.border}`, gap: 4,
                }}>
                  <Icon name="play" size={20} color={theme.primary}/>
                  <div style={{ fontFamily: theme.monoFamily, fontSize: 10, color: theme.muted }}>0:42</div>
                </div>
                <div style={{ flex: 1, padding: '12px 14px' }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <div style={{ fontFamily: theme.uiFamily, fontSize: 11, color: theme.muted, fontWeight: 500 }}>
                          {String(i + 1).padStart(2, '0')}
                        </div>
                        {ex.flagged && <div style={{ width: 7, height: 7, borderRadius: 9999, background: theme.danger }}/>}
                      </div>
                      <div style={{ fontFamily: theme.uiFamily, fontSize: 14, fontWeight: 600, color: theme.text, marginTop: 2, lineHeight: 1.25 }}>
                        {ex.name}
                      </div>
                      <div style={{ fontFamily: theme.uiFamily, fontSize: 11, color: theme.muted, marginTop: 2 }}>
                        {ex.targetSets} sets · {ex.tempo} · rest {ex.rest}
                      </div>
                    </div>
                  </div>
                  {/* progress bar */}
                  <div style={{
                    marginTop: 10, height: 4, borderRadius: 4,
                    background: theme.isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)',
                    overflow: 'hidden',
                  }}>
                    <div style={{
                      width: `${pct * 100}%`, height: '100%',
                      background: pct === 1 ? theme.success : theme.primary,
                      transition: 'width 0.3s',
                    }}/>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
                    <div style={{ fontFamily: theme.monoFamily, fontSize: 10, color: theme.muted }}>
                      {completed}/{ex.sets.length} sets
                    </div>
                    <div style={{ display: 'flex', gap: 3 }}>
                      {ex.mg.slice(0, 2).map(m => (
                        <span key={m} style={{
                          fontFamily: theme.uiFamily, fontSize: 9, fontWeight: 500,
                          color: theme.muted, padding: '1px 6px', borderRadius: 9999,
                          border: `1px solid ${theme.border}`,
                        }}>{m}</span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          );
        })}
      </div>
    </>
  );
}

Object.assign(window, {
  BottomNav, TopBar, ClientMenuScreen, NextWorkoutScreen,
  SectionListScreen, PreWorkoutScreen, MainSetsScreen, Toggle, getContrast, hexToRgba,
});