// health/MetricDetail.jsx
// Per-metric detail with W / 2W / M / 3M segmented control and scrubber.
// Spec explicitly calls this out. Demo metric: Sleep duration over a month.

function MetricDetail({ dark = false }) {
  // Last 28 days, hours slept. Touch is on day 18.
  const days = [
    6.4, 5.8, 7.2, 6.9, 5.4, 8.1, 6.2,
    7.5, 6.1, 7.8, 5.9, 6.5, 8.3, 6.7,
    7.1, 6.4, 5.6, 7.9, 6.3, 6.8, 7.4,
    8.0, 6.2, 5.8, 7.3, 6.5, 6.9, 6.2,
  ];
  const focusIdx = 17;
  const maxH = 10;
  const labels = ['Feb 19', '26', 'Mar 5', '12', '16'];

  const W = 320, H = 170;
  const dx = W / days.length;
  const bars = days.map((v, i) => ({
    x: i * dx + dx * 0.18,
    y: H - (v / maxH) * H,
    w: dx * 0.64,
    h: (v / maxH) * H,
    v,
  }));

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

      <div style={{ padding: '4px 20px 0' }}>
        <div className="eyebrow" style={{ color: 'var(--io-sleep)' }}>Mar 4 · Wednesday</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
          <span className="m-hero" data-num>7</span>
          <span className="m-unit" style={{ fontSize: 28, color: 'var(--io-label-secondary)' }}>h</span>
          <span className="m-hero" data-num>54</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 }}>
          Quality <span style={{ color: 'var(--io-label)' }} data-num>82</span> · Bedtime <span style={{ color: 'var(--io-label)' }} data-num>11:12 PM</span>
        </div>
      </div>

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

      <div style={{ padding: '12px 16px 0' }}>
        <div className="card padded" style={{ padding: 18 }}>
          <div className="between" style={{ marginBottom: 6 }}>
            <div className="hd" style={{ fontSize: 15 }}>Past 28 nights</div>
            <div className="cp" style={{ color: 'var(--io-label-secondary)' }}>Avg <span data-num>6h 48m</span></div>
          </div>
          <div style={{ position: 'relative' }}>
            <svg viewBox={`0 0 ${W} ${H + 26}`} width="100%" height="200" preserveAspectRatio="none">
              {/* gridlines */}
              {[0, 0.25, 0.5, 0.75, 1].map(p => (
                <line key={p} x1={0} y1={H * p} x2={W} y2={H * p}
                  stroke={dark ? 'rgba(235,235,245,0.12)' : 'rgba(60,60,67,0.08)'}
                  strokeWidth={0.5}/>
              ))}
              {/* goal line */}
              <line x1={0} y1={H - (8/maxH)*H} x2={W} y2={H - (8/maxH)*H}
                stroke={dark ? 'rgba(255,255,255,0.32)' : 'rgba(60,60,67,0.32)'}
                strokeWidth={0.8} strokeDasharray="3 3"/>
              <text x={W - 8} y={H - (8/maxH)*H - 4} fontSize={10}
                fill={dark ? 'rgba(235,235,245,0.5)' : 'rgba(60,60,67,0.5)'} textAnchor="end">8h</text>
              {/* bars */}
              {bars.map((b, i) => (
                <rect key={i} x={b.x} y={b.y} width={b.w} height={b.h}
                  rx={1.4}
                  fill={i === focusIdx ? 'var(--io-purple)' : (b.v < 6 ? 'var(--io-orange)' : 'var(--io-purple)')}
                  opacity={i === focusIdx ? 1 : 0.55}/>
              ))}
              {/* scrubber */}
              <line x1={bars[focusIdx].x + bars[focusIdx].w / 2} x2={bars[focusIdx].x + bars[focusIdx].w / 2}
                y1={0} y2={H}
                stroke={dark ? 'rgba(255,255,255,0.5)' : 'rgba(60,60,67,0.45)'} strokeWidth={1}/>
              {/* x-axis labels */}
              {[0, 7, 14, 21, 27].map((i, k) => (
                <text key={i} x={bars[i].x + bars[i].w / 2} y={H + 18} fontSize={10}
                  fill={dark ? 'rgba(235,235,245,0.5)' : 'rgba(60,60,67,0.5)'} textAnchor="middle">{labels[k]}</text>
              ))}
            </svg>
            {/* Scrubber readout */}
            <div className="scrub-label" style={{
              left: `${((bars[focusIdx].x + bars[focusIdx].w / 2) / W) * 100}%`,
              top: -2,
            }}>
              <div className="cp" style={{ color: 'var(--io-label-secondary)' }}>Mar 4</div>
              <div className="ca" data-num style={{ fontWeight: 500 }}>7h 54m</div>
            </div>
          </div>
        </div>
      </div>

      <SectionHead label="Statistics"/>
      <div className="m-row">
        <MetricTile dotColor="var(--io-purple)" label="Average" value="6h 48m" trendDir="flat" trendValue="≈ 14-day avg" ctx="Past 28 nights"/>
        <MetricTile dotColor="var(--io-green)"  label="Best" value="8h 18m" trendDir="up" trendValue="Mar 9" ctx="Saturday"/>
      </div>
      <div className="m-row" style={{ marginTop: 10 }}>
        <MetricTile dotColor="var(--io-red)"    label="Shortest" value="5h 24m" trendDir="down" trendValue="Mar 14" ctx="Friday — late event"/>
        <MetricTile dotColor="var(--io-orange)" label="Nights under 7h" value="13" unit="/28" trendDir="up" trendValue="+2 vs prior month" ctx="46% of month"/>
      </div>

      <SectionHead label="About sleep duration"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card padded" style={{ padding: 16 }}>
          <div className="bd" style={{ lineHeight: 1.45 }}>
            Time asleep between bedtime and wake, excluding awake periods longer than 4 minutes.
            Pulled from Apple Health by the HealthSync sidecar app — Ordentus does not write to Health.
          </div>
          <div className="row" style={{ marginTop: 12, gap: 6, color: 'var(--io-blue)' }}>
            <span className="bd" style={{ fontWeight: 500 }}>Learn more</span>
            <Icon name="chevron-right" size={14} stroke={2.4}/>
          </div>
        </div>
      </div>

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