/* Surgr App — Workout Session Screen
   Recreates surgr/app/workout/page.js — header timer, exercise card, set rows. */

const {
  AppH1: WAppH1,
  Card: WCard,
  PrimaryButton: WPrimaryButton,
  GhostButton: WGhostButton,
  SectionLabel: WSectionLabel,
  Icons: WIcons,
} = window.SurgrAppKit;

const { useState: wUseState } = React;

function SetRow({ index, weight, reps, completed, onToggle }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '32px 1fr 1fr 36px',
      alignItems: 'center',
      gap: 12,
      padding: '12px 14px',
      background: completed ? 'rgba(0,230,118,0.06)' : 'rgba(255,255,255,0.02)',
      border: `1px solid ${completed ? 'rgba(0,230,118,0.15)' : 'var(--surgr-border)'}`,
      borderRadius: 12,
      transition: 'all var(--surgr-dur-base) var(--surgr-ease-out)',
    }}>
      <span style={{
        fontFamily: 'var(--surgr-font-heading)',
        fontWeight: 700,
        fontSize: 14,
        color: completed ? 'var(--surgr-success)' : 'var(--surgr-text-muted)',
      }}>{index}</span>
      <div>
        <div style={{ fontSize: 10, letterSpacing: 1.5, fontWeight: 800, color: 'var(--surgr-text-dim)', textTransform: 'uppercase', fontFamily: 'var(--surgr-font-body)' }}>Carga</div>
        <div style={{ fontFamily: 'var(--surgr-font-heading)', fontWeight: 700, fontSize: 17, color: 'var(--surgr-text-strong)', fontVariantNumeric: 'tabular-nums' }}>{weight}<span style={{ fontSize: 11, color: 'var(--surgr-text-dim)', fontFamily: 'var(--surgr-font-body)', fontWeight: 500 }}> kg</span></div>
      </div>
      <div>
        <div style={{ fontSize: 10, letterSpacing: 1.5, fontWeight: 800, color: 'var(--surgr-text-dim)', textTransform: 'uppercase', fontFamily: 'var(--surgr-font-body)' }}>Reps</div>
        <div style={{ fontFamily: 'var(--surgr-font-heading)', fontWeight: 700, fontSize: 17, color: 'var(--surgr-text-strong)', fontVariantNumeric: 'tabular-nums' }}>{reps}</div>
      </div>
      <button onClick={onToggle} style={{
        width: 32, height: 32,
        borderRadius: 10,
        background: completed ? 'var(--surgr-success)' : 'transparent',
        border: completed ? 'none' : '1px solid var(--surgr-border)',
        color: completed ? '#000' : 'var(--surgr-text-muted)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer',
      }}>{completed ? <WIcons.Check size={16}/> : null}</button>
    </div>
  );
}

function WorkoutScreen({ onBack }) {
  const [sets, setSets] = wUseState([
    { weight: 60,   reps: 12, done: true },
    { weight: 70,   reps: 10, done: true },
    { weight: 80,   reps: 8,  done: false },
    { weight: 82.5, reps: 8,  done: false },
  ]);
  const toggle = (i) => setSets(s => s.map((x, idx) => idx === i ? { ...x, done: !x.done } : x));
  const completed = sets.filter(s => s.done).length;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      {/* Sticky header */}
      <header style={{
        position: 'sticky', top: 0,
        background: 'rgba(10,10,15,0.85)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        borderBottom: '1px solid var(--surgr-border)',
        padding: '14px 20px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        zIndex: 10,
      }}>
        <button onClick={onBack} style={{
          background: 'none', border: 'none', color: 'var(--surgr-text)',
          display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', padding: 0,
          fontFamily: 'var(--surgr-font-body)',
        }}>
          <WIcons.ArrowLeft size={20}/>
        </button>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 10, letterSpacing: 2, fontWeight: 800, color: 'var(--surgr-text-muted)', textTransform: 'uppercase', fontFamily: 'var(--surgr-font-body)' }}>Em Treino</div>
          <div style={{ fontFamily: 'var(--surgr-font-heading)', fontWeight: 700, fontSize: 18, color: 'var(--surgr-accent)', fontVariantNumeric: 'tabular-nums', textShadow: '0 0 12px rgba(200,255,0,0.3)' }}>34:12</div>
        </div>
        <div style={{ width: 24 }}/>
      </header>

      <div style={{ padding: '20px 20px 110px', display: 'flex', flexDirection: 'column', gap: 18, flex: 1 }}>
        <div>
          <WSectionLabel accent>EXERCÍCIO 3 DE 6</WSectionLabel>
          <WAppH1 style={{ marginTop: 4 }}>SUPINO INCLINADO</WAppH1>
          <div style={{ marginTop: 10, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <span style={{ padding: '4px 10px', background: 'var(--surgr-bg-card)', border: '1px solid var(--surgr-border)', borderRadius: 100, fontSize: 11, color: 'var(--surgr-text-muted)', letterSpacing: 1, fontWeight: 700, fontFamily: 'var(--surgr-font-body)' }}>4 séries</span>
            <span style={{ padding: '4px 10px', background: 'var(--surgr-bg-card)', border: '1px solid var(--surgr-border)', borderRadius: 100, fontSize: 11, color: 'var(--surgr-text-muted)', letterSpacing: 1, fontWeight: 700, fontFamily: 'var(--surgr-font-body)' }}>8–10 reps</span>
            <span style={{ padding: '4px 10px', background: 'var(--surgr-bg-card)', border: '1px solid var(--surgr-border)', borderRadius: 100, fontSize: 11, color: 'var(--surgr-text-muted)', letterSpacing: 1, fontWeight: 700, fontFamily: 'var(--surgr-font-body)' }}>2:00 desc.</span>
          </div>
        </div>

        {/* Coach tip */}
        <WCard accent>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ color: 'var(--surgr-accent)', flexShrink: 0, marginTop: 2 }}><WIcons.Brain size={18}/></div>
            <div style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--surgr-text)', fontFamily: 'var(--surgr-font-body)', fontWeight: 500 }}>
              <strong style={{ color: 'var(--surgr-accent)', fontWeight: 800 }}>+2.5kg</strong> em relação à última. Mantém escapular retraída no descer.
            </div>
          </div>
        </WCard>

        {/* Sets */}
        <section>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <WSectionLabel>SÉRIES</WSectionLabel>
            <span style={{ fontFamily: 'var(--surgr-font-heading)', fontWeight: 700, fontSize: 13, color: 'var(--surgr-accent)', letterSpacing: 1 }}>{completed}/{sets.length}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {sets.map((s, i) => (
              <SetRow key={i} index={i + 1} weight={s.weight} reps={s.reps} completed={s.done} onToggle={() => toggle(i)}/>
            ))}
          </div>
        </section>

        <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
          <WGhostButton style={{ flex: 1 }}>Ajustar IA</WGhostButton>
          <WPrimaryButton style={{ flex: 2 }}>Próximo Exercício</WPrimaryButton>
        </div>
      </div>
    </div>
  );
}

window.SurgrAppKit.WorkoutScreen = WorkoutScreen;