// health/HealthOverview.jsx — Root of the Health tab.
// Layout:
//   StatusBar (from IOSDevice) → BigTitle "Health" + avatar
//   "Tonight's Bedtime" inset hero (midnight gradient)
//   SLEEP section: 3 metric tiles + trend bars + consistency
//   ACTIVITY section: steps + heart rate
//   COGNITIVE section: 5-domain horizontal bars
//   INSIGHTS: 2 cards
//   TabBar pinned (Health active)

function HealthOverview({ dark = false, banner = null }) {
  const trendData = [
    { day: 'Mon', hours: 6.4 },
    { day: 'Tue', hours: 5.8 },
    { day: 'Wed', hours: 7.2 },
    { day: 'Thu', hours: 6.9 },
    { day: 'Fri', hours: 5.4 },
    { day: 'Sat', hours: 8.1 },
    { day: 'Sun', hours: 6.2 },
  ];

  return (
    <FrameScreen dark={dark}>
      <BigTitle
        title="Summary"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)', whiteSpace: 'nowrap' }}>
          <span style={{ color: 'var(--io-label)' }}>Sunday</span> · Mar 16
        </div>}
        trailing={<>
          <PillBtn><Icon name="search" size={18} stroke={2.4}/></PillBtn>
          <Avatar initial="L"/>
        </>}
      />

      {banner && <div style={{ marginTop: 4 }}>{banner}</div>}

      {/* Bedtime hero */}
      <div className="bedtime-inset" style={{ marginTop: 4 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,.72)' }}>
            <span style={{ display:'inline-flex', alignItems:'center', gap: 8 }}>
              <span style={{
                width: 14, height: 14, borderRadius: '50%',
                background: 'radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,.85) 60%, rgba(255,255,255,.4))',
                boxShadow: '0 0 12px rgba(255,255,255,.35)'
              }}/>
              Tonight's bedtime
            </span>
          </div>
          <span className="pill info" style={{ background: 'rgba(255,255,255,.14)', color: 'rgba(255,255,255,.95)' }}>
            <Icon name="sparkles" size={11} stroke={2.4}/> Smart
          </span>
        </div>

        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 14 }}>
          <div className="m-hero" style={{ color: '#fff' }} data-num>
            10:30 <span style={{ fontSize: 22, fontWeight: 400, letterSpacing: 0, opacity: 0.6, marginLeft: 2 }}>PM</span>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="cp" style={{ color: 'rgba(255,255,255,.6)', textTransform: 'uppercase', letterSpacing: 0.8, fontWeight: 600 }}>Wake</div>
            <div className="m-sm" data-num style={{ color: '#fff', marginTop: 2 }}>
              6:15 <span style={{ fontSize: 13, opacity: 0.6, marginLeft: 2, letterSpacing: 0 }}>AM</span>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,.12)',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
        }}>
          {[
            { l: 'Sleep goal', v: '8h 00m' },
            { l: 'Wind-down', v: '60 min' },
            { l: 'First event', v: '7:15 AM' },
          ].map(s => (
            <div key={s.l}>
              <div className="cp" style={{ color: 'rgba(255,255,255,.55)', textTransform: 'uppercase', letterSpacing: 0.7, fontWeight: 600 }}>{s.l}</div>
              <div className="ca" data-num style={{ color: '#fff', marginTop: 4, fontWeight: 500 }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* SLEEP */}
      <SectionHead icon="moon" color="var(--io-sleep)" label="Sleep" see="Show All"/>
      <div className="m-row three">
        <MetricTile
          dotColor="var(--io-sleep)" label="Last night"
          value="6.2" unit="h" accent="var(--io-label)"
          trendDir="down" trendValue="−1.8h vs avg"
          ctx="Slept short"
        />
        <MetricTile
          dotColor="var(--io-orange)" label="Debt 14d"
          value="4.5" unit="h" accent="var(--io-label)"
          trendDir="up" trendValue="+1.2h"
          ctx="High — recover"
        />
        <div className="tile" style={{ alignItems: 'center', justifyContent: 'center', minHeight: 132, paddingTop: 10 }}>
          <div className="head" style={{ alignSelf: 'flex-start' }}>
            <span className="dot" style={{ background: 'var(--io-quality)' }}/>
            <span className="lb">Quality</span>
          </div>
          <RingChart percent={78} size={86} stroke={9} color="var(--io-quality)" dark={dark}/>
        </div>
      </div>

      {/* Trend card */}
      <div style={{ padding: '12px 16px 0' }}>
        <div className="card padded" style={{ padding: 16 }}>
          <div className="between" style={{ marginBottom: 12 }}>
            <div>
              <div className="hd" style={{ fontSize: 15 }}>7-day sleep trend</div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>Avg <span data-num>6h 34m</span> · Goal <span data-num>8h</span></div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: 'var(--io-label-secondary)', fontSize: 13 }}>
              7 days <Icon name="chevron-right" size={14} stroke={2.4}/>
            </div>
          </div>
          <BarChart data={trendData} goal={8} max={10} height={120}/>
          <div className="between" style={{ marginTop: 16, paddingTop: 12, borderTop: '0.5px solid var(--io-separator)' }}>
            <div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Consistency</div>
              <div className="row" style={{ marginTop: 6 }}>
                <ConsistencyDots filled={7} total={10}/>
                <span className="fn" data-num style={{ color: 'var(--io-label-secondary)' }}>72%</span>
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Avg bedtime</div>
              <div className="ca" data-num style={{ marginTop: 4 }}>11:42 PM</div>
            </div>
          </div>
        </div>
      </div>

      {/* ACTIVITY */}
      <SectionHead icon="activity" color="var(--io-activity)" label="Activity" see="Show All"/>
      <div className="m-row">
        <MetricTile
          dotColor="var(--io-activity)" label="Steps"
          value="8,432" accent="var(--io-label)"
          trendDir="up" trendValue="+1.4k vs avg"
          ctx="Goal 10,000"
        />
        <MetricTile
          dotColor="var(--io-heart)" label="Resting HR"
          value="58" unit="bpm" accent="var(--io-label)"
          trendDir="down" trendValue="−3 bpm"
          ctx="Below 14d avg"
        />
      </div>

      {/* COGNITIVE */}
      <SectionHead icon="brain" color="var(--io-indigo)" label="Cognitive impact" see="Details"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card padded">
          <div className="between" style={{ marginBottom: 12 }}>
            <div className="cp" style={{ color: 'var(--io-label-secondary)' }}>Forecast based on last night's sleep</div>
            <Pill tone="mid">Watch</Pill>
          </div>
          <HBar rows={[
            { label: 'Attention',  pct: 64, value: '−14%', color: 'var(--io-orange)' },
            { label: 'Memory',     pct: 58, value: '−18%', color: 'var(--io-orange)' },
            { label: 'Executive',  pct: 72, value: '−8%',  color: 'var(--io-yellow)' },
            { label: 'Mood',       pct: 80, value: '−4%',  color: 'var(--io-green)' },
            { label: 'Reaction',   pct: 46, value: '−24%', color: 'var(--io-red)' },
          ]}/>
        </div>
      </div>

      {/* INSIGHTS */}
      <SectionHead label="Insights"/>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <InsightCard
          emoji="⚠️" title="High sleep debt"
          body="12.3h accumulated over 14 days. Aim for 9h tonight to begin recovery."
        />
        <InsightCard
          emoji="😴" title="Bedtime drifting later"
          body="Your average bedtime moved 28 minutes later this week. Smart Bedtime suggests 10:30 PM."
        />
        <InsightCard
          emoji="📉" title="Reaction time impaired"
          body="Tomorrow's reaction speed likely 24% slower. Schedule deep work after lunch."
        />
      </div>

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