// health/SleepDetail.jsx
// Push-detail from "Sleep" section. Inline title "Sleep", back to Health.
// Hierarchy: hero number (Last night 6h 12m) → stages → quality ring →
// debt card → trend chart → consistency → schedule rows → insights.

function SleepDetail({ dark = false }) {
  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 },
  ];

  const stages = [
    { kind: 'awake', pct: 6,  label: '22m' },
    { kind: 'rem',   pct: 22, label: '1h 22m' },
    { kind: 'core',  pct: 52, label: '3h 13m' },
    { kind: 'deep',  pct: 20, label: '1h 15m' },
  ];

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

      <div style={{ padding: '4px 20px 8px' }}>
        <div className="eyebrow" style={{ color: 'var(--io-sleep)' }}>Last night · Sun 10:54 PM → Mon 5:06 AM</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
          <span className="m-hero" style={{ color: 'var(--io-label)' }} data-num>6</span>
          <span className="m-unit" style={{ fontSize: 28, color: 'var(--io-label-secondary)' }}>h</span>
          <span className="m-hero" style={{ color: 'var(--io-label)' }} data-num>12</span>
          <span className="m-unit" style={{ fontSize: 28, color: 'var(--io-label-secondary)' }}>m</span>
        </div>
        <div className="fn" style={{ color: 'var(--io-label-secondary)', marginTop: 6 }}>
          <TrendChip dir="down" value="−1h 48m vs 14-day avg"/> · 1h 48m below your 8h goal.
        </div>
      </div>

      <div style={{ padding: '14px 16px 0' }}>
        <SegControl items={['W', '2W', 'M', '3M']} active="W" onChange={() => {}}/>
      </div>

      {/* Stages */}
      <div style={{ padding: '16px 16px 0' }}>
        <div className="card padded" style={{ padding: 18 }}>
          <div className="between">
            <div>
              <div className="hd" style={{ fontSize: 15 }}>Stages</div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>Time in each stage tonight</div>
            </div>
            <div className="cp" style={{ color: 'var(--io-label-tertiary)' }}>
              <Icon name="chevron-right" size={14} stroke={2.4}/>
            </div>
          </div>
          <div style={{ marginTop: 14 }}><StageStack stages={stages}/></div>
        </div>
      </div>

      {/* Quality + Debt side-by-side */}
      <div className="m-row" style={{ marginTop: 10 }}>
        <div className="tile" style={{ minHeight: 168, alignItems: 'center', paddingTop: 14 }}>
          <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={108} stroke={11} color="var(--io-quality)" dark={dark}
            label="of ideal" sublabel="7-day avg 73"/>
        </div>
        <div className="tile" style={{ minHeight: 168, justifyContent:'space-between' }}>
          <div className="head">
            <span className="dot" style={{ background: 'var(--io-orange)' }}/>
            <span className="lb">Debt · 14 days</span>
          </div>
          <div>
            <div className="val">
              <span className="m-lg" data-num>4.5</span>
              <span className="m-unit" style={{ fontSize: 16 }}>h</span>
            </div>
            <Pill tone="mid" style={{ marginTop: 8 }}>High · recover</Pill>
          </div>
          <div className="stack" style={{ gap: 2 }}>
            <TrendChip dir="up" value="+1.2h this week"/>
            <div className="ctx">Aim 9h tonight to begin clearing</div>
          </div>
        </div>
      </div>

      {/* Trend chart */}
      <div style={{ padding: '12px 16px 0' }}>
        <div className="card padded" style={{ padding: 18 }}>
          <div className="between" style={{ marginBottom: 14 }}>
            <div>
              <div className="hd" style={{ fontSize: 15 }}>Duration</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>
          <BarChart data={trendData} goal={8} max={10} height={130}/>
          <div className="between" style={{ marginTop: 18, paddingTop: 14, borderTop: '0.5px solid var(--io-separator)' }}>
            <div>
              <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 style={{ textAlign: 'center' }}>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Avg wake</div>
              <div className="ca" data-num style={{ marginTop: 4 }}>7:18 AM</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Consistency</div>
              <div className="row" style={{ marginTop: 4, justifyContent: 'flex-end' }}>
                <ConsistencyDots filled={7} total={10}/>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bedtime schedule glance */}
      <SectionHead label="Schedule"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          <div className="lrow">
            <div className="li-ic" style={{ background: 'var(--io-indigo)' }}><Icon name="bed" size={16} stroke={2.2}/></div>
            <div className="li-ti">Wake schedule</div>
            <div className="li-de">7 days · custom</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-purple)' }}><Icon name="moon" size={16} stroke={2.2}/></div>
            <div className="li-ti">Smart Bedtime</div>
            <div className="li-de">On · 60 min wind-down</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-orange)' }}><Icon name="shuffle" size={16} stroke={2.2}/></div>
            <div className="li-ti">Skip tonight</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
        </div>
      </div>

      {/* Insights */}
      <SectionHead label="Insights"/>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <InsightCard
          emoji="😴" title="Short of goal"
          body="You slept 1h 48m less than your 8h target. One short night raises debt by ~14%."
        />
        <InsightCard
          emoji="📈" title="Deep sleep above average"
          body="1h 15m of deep sleep — 20% of total. Within your normal range despite the short night."
        />
      </div>

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