// progress.jsx — Progress tab + Weekly Recap + Body Evolution
const { useState: useStateP } = React;

function Progress({ data, go }) {
  const [view, setView] = useStateP('main');
  if (view === 'weekly') return <WeeklyRecap back={() => setView('main')}/>;
  if (view === 'evolution') return <BodyEvolution back={() => setView('main')}/>;
  return <ProgressMain data={data} setView={setView} go={go}/>;
}

function Ring({ value, label, color, size = 64 }) {
  const r = size / 2 - 5, c = 2 * Math.PI * r;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={T.surface2} strokeWidth="5"/>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth="5" strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - value)}/>
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 800, color: T.ink }}>{label}</div>
    </div>
  );
}

function ProgressMain({ data, setView, go }) {
  return (
    <Screen bg={T.surface} nav="progress">
      <TopBar title="Progress"/>

      {/* today */}
      <Card pad={20} style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12, fontWeight: 800, color: T.ink3, letterSpacing: 0.6, marginBottom: 12 }}>TODAY</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 48, height: 48, borderRadius: 14, background: T.good, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="check" size={26} color="#fff" sw={2.6}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16.5, fontWeight: 800, color: T.ink }}>어깨 리셋 30초</div>
            <div style={{ fontSize: 13.5, color: T.ink2 }}>Quest 완료</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: T.coral }}>+10 XP</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 3, justifyContent: 'flex-end', fontSize: 13, fontWeight: 800, color: T.amberDark }}><Icon name="flame" size={15} color={T.amber}/>{data.streak}일</div>
          </div>
        </div>
      </Card>

      {/* health level */}
      <Card pad={20} style={{ marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <div style={{ width: 46, height: 46, borderRadius: 14, background: `linear-gradient(135deg, ${T.coral}, ${T.violet})`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 800, fontSize: 18 }}>{data.level}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 800, color: T.ink3, letterSpacing: 0.6 }}>HEALTH LEVEL</div>
            <div style={{ fontSize: 18, fontWeight: 800, color: T.ink, letterSpacing: -0.3 }}>Daily Mover</div>
          </div>
          <div style={{ fontSize: 13, color: T.ink2, fontWeight: 700 }}>다음까지 80 XP</div>
        </div>
        <XPBar value={data.xp} max={200}/>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7, marginTop: 14 }}>
          {['5일 연속 Quest', 'Recovery Quest 2회', 'Squat Setup Skill Unlock'].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, color: T.ink2, fontWeight: 600 }}>
              <span style={{ width: 5, height: 5, borderRadius: 999, background: T.coral }}/>{t}
            </div>
          ))}
        </div>
      </Card>

      {/* this week */}
      <Card pad={20} style={{ marginBottom: 14 }} onClick={() => setView('weekly')}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <span style={{ fontSize: 12, fontWeight: 800, color: T.ink3, letterSpacing: 0.6 }}>THIS WEEK</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 3, fontSize: 13, fontWeight: 700, color: T.coral }}>Recap 보기<Icon name="chevron" size={14} color={T.coral} sw={2.4}/></span>
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
          {['월','화','수','목','금','토','일'].map((d, i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center' }}>
              <div style={{ width: '100%', aspectRatio: '1', borderRadius: 12, background: i < 4 ? T.good : T.surface2, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 5 }}>
                {i < 4 && <Icon name="check" size={16} color="#fff" sw={2.8}/>}
              </div>
              <div style={{ fontSize: 11, fontWeight: 700, color: T.ink3 }}>{d}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 18 }}>
          {[['4 / 7일', '완료'], ['1회', 'Recovery'], ['1개', 'Skill']].map((s, i) => (
            <div key={i}><div style={{ fontSize: 17, fontWeight: 800, color: T.ink }}>{s[0]}</div><div style={{ fontSize: 12.5, color: T.ink3, fontWeight: 600 }}>{s[1]}</div></div>
          ))}
        </div>
      </Card>

      {/* body check entry */}
      <Card pad={18} onClick={() => go('bodycheck')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
        <div style={{ width: 52, height: 52, borderRadius: 15, background: T.calmSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name="scan" size={26} color={T.calm} sw={1.9}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11.5, fontWeight: 800, color: T.calm, letterSpacing: 0.6 }}>바디 체크</div>
          <div style={{ fontSize: 16.5, fontWeight: 800, color: T.ink, letterSpacing: -0.3, marginTop: 2 }}>주간 자세 변화 보기</div>
        </div>
        <Icon name="chevron" size={20} color={T.ink3} sw={2.2}/>
      </Card>

      {/* body evolution teaser */}
      <Card pad={20} onClick={() => setView('evolution')} style={{ background: `linear-gradient(150deg, ${T.coralTint}, ${T.bg})`, marginBottom: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <span style={{ fontSize: 12, fontWeight: 800, color: T.coral, letterSpacing: 0.6 }}>BODY EVOLUTION</span>
          <Icon name="chevron" size={16} color={T.coral} sw={2.4}/>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-around' }}>
          {[['꾸준함', 0.7, T.coral], ['유연성', 0.5, T.amber], ['회복', 0.6, T.calm]].map((m, i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <Ring value={m[1]} label={`+${[4,2,1][i]}`} color={m[2]}/>
              <div style={{ fontSize: 12, fontWeight: 700, color: T.ink2, marginTop: 6 }}>{m[0]}</div>
            </div>
          ))}
        </div>
      </Card>
      <div style={{ height: 12 }}/>
    </Screen>
  );
}

function WeeklyRecap({ back }) {
  return (
    <Screen bg={T.surface}>
      <TopBar title="Weekly Recap" onBack={back}/>
      <Card pad={24} style={{ marginBottom: 14, textAlign: 'center', background: `linear-gradient(160deg, ${T.coral}, ${T.coralDark})` }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'rgba(255,255,255,0.85)', marginBottom: 6 }}>이번 주 Fitbody</div>
        <div style={{ fontSize: 52, fontWeight: 800, color: '#fff', letterSpacing: -1, lineHeight: 1 }}>5<span style={{ fontSize: 26, opacity: 0.8 }}> / 7일</span></div>
        <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', marginTop: 6, fontWeight: 600 }}>완료한 Quest</div>
      </Card>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
        {[['총 XP', '140', 'XP', T.coral, 'bolt'], ['가장 많이', 'Stretch', 'Quest', T.amberDark, 'leaf'], ['Recovery', '2', '일', T.calm, 'wind'], ['Skill', '1', '개 unlock', T.good, 'sparkle']].map((s, i) => (
          <Card key={i} pad={18}>
            <Icon name={s[4]} size={22} color={s[3]}/>
            <div style={{ fontSize: 26, fontWeight: 800, color: T.ink, letterSpacing: -0.5, marginTop: 10 }}>{s[1]}<span style={{ fontSize: 14, color: T.ink3, fontWeight: 700 }}> {s[2]}</span></div>
            <div style={{ fontSize: 13, color: T.ink3, fontWeight: 600, marginTop: 1 }}>{s[0]}</div>
          </Card>
        ))}
      </div>
      <Card pad={18} style={{ marginBottom: 14 }}>
        <AvaSays size={38}>이번 주는 피곤한 날에도 회복 Quest로 루틴을 지켰어요. 다음 주는 조금 더 쉽게 이어가볼게요.</AvaSays>
      </Card>
      <FloatCTA><Btn onClick={back}>확인했어요</Btn></FloatCTA>
      <div style={{ height: 80 }}/>
    </Screen>
  );
}

function BodyEvolution({ back }) {
  const axes = [['꾸준함', 0.7], ['유연성', 0.5], ['회복', 0.6], ['동작 스킬', 0.3]];
  const [mounted, setMounted] = useStateP(false);
  React.useEffect(() => { const t = setTimeout(() => setMounted(true), 80); return () => clearTimeout(t); }, []);
  return (
    <Screen bg={T.surface}>
      <TopBar title="" onBack={back}/>
      <div style={{ padding: '4px 0 24px' }}>
        <div style={{ fontSize: 12, fontWeight: 800, color: T.coral, letterSpacing: 1.2, marginBottom: 8 }}>5월 · 신체 변화</div>
        <h1 style={{ fontSize: 26, fontWeight: 800, color: T.ink, letterSpacing: -0.5, lineHeight: 1.3, margin: 0 }}>지난 30일 동안<br/>몸 사용 패턴이 바뀌었어요</h1>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 24 }}>
        {axes.map((a, i) => (
          <div key={i}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontSize: 15, fontWeight: 700, color: T.ink }}>{a[0]}</span>
              <span style={{ fontSize: 15, fontWeight: 800, color: T.coral }}>{Math.round(a[1] * 100)}%</span>
            </div>
            <div style={{ height: 12, borderRadius: 999, background: T.surface2, overflow: 'hidden' }}>
              <div style={{ width: `${(mounted ? a[1] : 0) * 100}%`, height: '100%', borderRadius: 999, background: T.coral, transition: `width 1.1s ${i * 0.12}s cubic-bezier(.2,.8,.2,1)` }}/>
            </div>
          </div>
        ))}
      </div>
      <Card pad={16} style={{ marginBottom: 16, display: 'flex', alignItems: 'flex-start', gap: 11 }}>
        <AvaOrb size={34} speaking/>
        <div style={{ fontSize: 14.5, lineHeight: 1.5, color: T.ink, fontWeight: 500 }}>“이번 달의 가장 큰 변화는 ‘완벽한 운동’이 아니라 ‘끊기지 않는 건강 행동’이에요.”</div>
      </Card>
      <Btn variant="primary" onClick={back}>이번 달 마무리</Btn>
      <div style={{ height: 16 }}/>
    </Screen>
  );
}

Object.assign(window, { Progress });