// health/ActivityDetail.jsx
// Steps hero + ring + heart rate band + workouts.

function ActivityDetail({ dark = false }) {
  const stepsByDay = [
    { day: 'Mon', hours: 7.4 }, { day: 'Tue', hours: 8.9 },
    { day: 'Wed', hours: 6.2 }, { day: 'Thu', hours: 10.1 },
    { day: 'Fri', hours: 5.4 }, { day: 'Sat', hours: 12.6 },
    { day: 'Sun', hours: 8.4 },
  ];

  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Health" title="Activity"/>

      <div style={{ padding: '4px 20px 0' }}>
        <div className="eyebrow" style={{ color: 'var(--io-activity)' }}>Today · Sun, Mar 16</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
          <span className="m-hero" data-num>8,432</span>
        </div>
        <div className="fn" style={{ color: 'var(--io-label-secondary)', marginTop: 6 }}>
          <TrendChip dir="up" value="+1.4k vs 14-day avg"/> · 1,568 to goal of 10,000
        </div>
      </div>

      {/* Steps progress ring */}
      <div className="m-row" style={{ marginTop: 16 }}>
        <div className="tile" style={{ minHeight: 168, alignItems: 'center', justifyContent: 'center', paddingTop: 14 }}>
          <div className="head" style={{ alignSelf: 'flex-start' }}>
            <span className="dot" style={{ background: 'var(--io-activity)' }}/>
            <span className="lb">Goal</span>
          </div>
          <RingChart percent={84} size={110} stroke={11} color="var(--io-activity)" dark={dark}
            label="of 10,000"/>
        </div>
        <div className="tile" style={{ minHeight: 168, justifyContent: 'space-between' }}>
          <div className="head">
            <span className="dot" style={{ background: 'var(--io-heart)' }}/>
            <span className="lb">Resting HR</span>
          </div>
          <div>
            <div className="val">
              <span className="m-lg" data-num>58</span>
              <span className="m-unit" style={{ fontSize: 16 }}>bpm</span>
            </div>
          </div>
          <div className="stack" style={{ gap: 2 }}>
            <TrendChip dir="down" value="−3 bpm vs avg"/>
            <div className="ctx">Range today 52–94</div>
          </div>
        </div>
      </div>

      {/* HR sparkline card */}
      <div style={{ padding: '12px 16px 0' }}>
        <div className="card padded" style={{ padding: 18 }}>
          <div className="between" style={{ marginBottom: 8 }}>
            <div className="hd" style={{ fontSize: 15 }}>Heart rate · today</div>
            <div className="cp" style={{ color: 'var(--io-label-tertiary)' }}>00:00 → now</div>
          </div>
          {/* simple area sparkline */}
          <svg viewBox="0 0 320 90" width="100%" height="100" preserveAspectRatio="none">
            <defs>
              <linearGradient id="hrf" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="var(--io-heart)" stopOpacity={0.28}/>
                <stop offset="100%" stopColor="var(--io-heart)" stopOpacity={0}/>
              </linearGradient>
            </defs>
            <path
              d="M0,60 C20,58 30,54 50,56 C70,58 85,42 105,46 C125,50 140,30 165,24 C185,20 200,46 220,50 C240,54 255,38 275,40 C290,42 305,55 320,55 L320,90 L0,90 Z"
              fill="url(#hrf)"/>
            <path
              d="M0,60 C20,58 30,54 50,56 C70,58 85,42 105,46 C125,50 140,30 165,24 C185,20 200,46 220,50 C240,54 255,38 275,40 C290,42 305,55 320,55"
              fill="none" stroke="var(--io-heart)" strokeWidth={1.6} strokeLinecap="round"/>
          </svg>
          <div className="between" style={{ marginTop: 6 }}>
            <div className="stack" style={{ gap: 2 }}>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform:'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Low</div>
              <div className="ca" data-num>52 <span style={{ fontSize: 12, color: 'var(--io-label-secondary)' }}>bpm</span></div>
            </div>
            <div className="stack" style={{ gap: 2, alignItems: 'center' }}>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform:'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Avg</div>
              <div className="ca" data-num>71 <span style={{ fontSize: 12, color: 'var(--io-label-secondary)' }}>bpm</span></div>
            </div>
            <div className="stack" style={{ gap: 2, alignItems: 'flex-end' }}>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform:'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Peak</div>
              <div className="ca" data-num>94 <span style={{ fontSize: 12, color: 'var(--io-label-secondary)' }}>bpm</span></div>
            </div>
          </div>
        </div>
      </div>

      {/* Steps 7-day */}
      <div style={{ padding: '12px 16px 0' }}>
        <div className="card padded" style={{ padding: 18 }}>
          <div className="between" style={{ marginBottom: 12 }}>
            <div>
              <div className="hd" style={{ fontSize: 15 }}>Steps · 7 days</div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>Avg <span data-num>8,429</span> / day</div>
            </div>
          </div>
          <BarChart data={stepsByDay} goal={10} max={14} height={120} accent="var(--io-activity)"/>
        </div>
      </div>

      <SectionHead label="Workouts"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          <div className="lrow">
            <div className="li-ic" style={{ background: 'var(--io-activity)' }}><Icon name="footsteps" size={16} stroke={2.2}/></div>
            <div className="li-ti">Morning walk · 38 min</div>
            <div className="li-de">3.2 km</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
          <div className="lrow">
            <div className="li-ic" style={{ background: 'var(--io-heart)' }}><Icon name="flame" size={16} stroke={2.2}/></div>
            <div className="li-ti">Indoor cycling · 24 min</div>
            <div className="li-de">312 kcal</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="health"/>
    </FrameScreen>
  );
}
window.ActivityDetail = ActivityDetail;