// Episode detail — bottom nav now Home/Log/Timeline. Voice moved top-right.
const { Icon, Phone, TabBar, HomeIndicator, TopBar } = window;

function EpisodeDetail() {
  const T = UN.d;
  const activeDim = 'temp';

  const dims = [
    { id: 'temp',     label: 'Temp',     icon: 'thermo', count: 18 },
    { id: 'doses',    label: 'Doses',    icon: 'pill',   count: 4 },
    { id: 'fluids',   label: 'Fluids',   icon: 'drop',   count: 11 },
    { id: 'diapers',  label: 'Urine',    icon: 'diaper', count: 5 },
    { id: 'vomit',    label: 'Vomit',    icon: 'vomit',  count: 3 },
    { id: 'symptoms', label: 'Symptoms', icon: 'alert',  count: 4 },
    { id: 'obs',      label: 'Observe',  icon: 'mic',    count: 6 },
    { id: 'food',     label: 'Food',     icon: 'food',   count: 4 },
    { id: 'sleep',    label: 'Sleep',    icon: 'clock',  count: 2 },
  ];

  return (
    <Phone mode="d" time="2:14">
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <TopBar mode="d" kidName="Maeve" kidTone="#d3a89a" dot="warm" subtitle="DAY 3 · WATCH"/>

        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0 0' }}>
          {/* Hero numbers */}
          <div style={{ padding: '8px 22px 6px' }}>
            <div style={{ fontSize: 11, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>
              Now · 38.4°C ↓
            </div>
            <h1 style={{
              margin: '6px 0 0',
              fontFamily: UN.font.num, fontSize: 56, fontWeight: 500,
              letterSpacing: -2.5, color: T.text, lineHeight: 0.95,
              fontVariantNumeric: 'tabular-nums',
            }}>
              38.4<span style={{ fontSize: 20, color: T.textDim, fontWeight: 400, marginLeft: 4 }}>°C</span>
            </h1>
            <div style={{ marginTop: 8, display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '3px 9px', borderRadius: 99,
                background: 'rgba(232,176,92,0.18)',
                border: `1px solid rgba(232,176,92,0.32)`,
                fontSize: 10.5, color: UN.d.sev.warm, fontWeight: 700,
                letterSpacing: 0.5, textTransform: 'uppercase',
              }}>Warm</div>
              <span style={{ fontSize: 12.5, color: T.textDim }}>
                Next Tylenol in <strong style={{ color: T.text, fontWeight: 700 }}>1h 22m</strong>
              </span>
            </div>
          </div>

          {/* Dimension chips */}
          <div style={{
            marginTop: 14, padding: '0 22px 4px',
            display: 'flex', gap: 6, overflowX: 'auto',
          }}>
            {dims.map(d => {
              const on = d.id === activeDim;
              return (
                <div key={d.id} style={{
                  flexShrink: 0,
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '7px 11px', borderRadius: 10,
                  background: on ? T.sageSoft : T.surface,
                  border: `1.5px solid ${on ? T.sage : T.line2}`,
                  color: on ? T.sage : T.textDim,
                  fontSize: 12, fontWeight: on ? 700 : 500,
                }}>
                  <Icon name={d.icon} size={12} color={on ? T.sage : T.textDim} strokeWidth={1.9}/>
                  {d.label}
                  <span style={{ fontSize: 10.5, opacity: 0.7, fontVariantNumeric: 'tabular-nums' }}>· {d.count}</span>
                </div>
              );
            })}
          </div>

          {/* Big timeline card */}
          <div style={{
            margin: '14px 22px 0',
            background: T.surface, border: `1px solid ${T.line}`,
            borderRadius: 20, padding: '12px 4px 6px',
          }}>
            <div style={{ padding: '0 14px 4px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: 4 }}>
                {['24h','3d','All'].map((s, i) => (
                  <button key={s} style={{
                    padding: '5px 10px', borderRadius: 8,
                    background: i === 1 ? T.surface2 : 'transparent',
                    color: i === 1 ? T.text : T.textMute,
                    fontSize: 11, fontWeight: 600, border: 'none',
                  }}>{s}</button>
                ))}
              </div>
              <span style={{ fontSize: 10.5, color: T.textMute }}>Tap dots → details</span>
            </div>
            <Timeline width={344} height={150} mode="d"/>
          </div>

          {/* Wellbeing track — symptom/observation strip */}
          <div style={{
            margin: '10px 22px 0',
            background: T.surface, border: `1px solid ${T.line}`,
            borderRadius: 16, padding: '12px 14px',
          }}>
            <div style={{
              fontSize: 10.5, color: T.textMute, fontWeight: 700, letterSpacing: 0.7, textTransform: 'uppercase',
              marginBottom: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              Wellbeing · 24h
              <span style={{ color: T.textDim, fontWeight: 500, letterSpacing: 0 }}>Energy 2 · Mood 3 · Appetite 2</span>
            </div>
            {[
              { l: 'Energy',   axis: [2,3,3,3,4,4,3,3,2,2,2,2], colorLow: UN.d.sev.warm },
              { l: 'Mood',     axis: [3,3,3,4,4,3,3,3,3,3,2,3], colorLow: UN.d.trust },
              { l: 'Appetite', axis: [1,2,2,3,2,2,1,1,1,2,1,1], colorLow: UN.d.sev.warm },
            ].map((r,i,a) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 9, padding: '5px 0',
                borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none',
              }}>
                <div style={{ width: 60, fontSize: 10.5, color: T.textDim, fontWeight: 600 }}>{r.l}</div>
                <div style={{ flex: 1, display: 'flex', gap: 2, alignItems: 'center' }}>
                  {r.axis.map((v, j) => (
                    <div key={j} style={{
                      flex: 1, height: 16, borderRadius: 3,
                      background: v <= 2 ? r.colorLow : v >= 4 ? T.sage : T.surface2,
                      opacity: 0.3 + Math.abs(v - 3) / 4,
                    }}/>
                  ))}
                </div>
              </div>
            ))}
          </div>

          {/* Red-flag inline */}
          <div style={{
            margin: '12px 22px 0',
            background: 'linear-gradient(135deg, rgba(232,176,92,0.10), rgba(143,181,162,0.04))',
            border: `1px solid rgba(232,176,92,0.32)`,
            borderRadius: 16, padding: '12px 14px',
            display: 'flex', gap: 11, alignItems: 'center',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 10,
              background: 'rgba(232,176,92,0.2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icon name="drop" size={16} color={UN.d.sev.warm} strokeWidth={1.9}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, color: T.text, fontWeight: 600, letterSpacing: -0.1 }}>
                7h since last wet diaper
              </div>
              <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 1 }}>
                Pediatricians flag at 8h.
              </div>
            </div>
            <Icon name="chev" size={14} color={T.textMute} strokeWidth={2}/>
          </div>

          {/* Recent compact */}
          <div style={{ padding: '18px 22px 0' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <h3 style={{ margin: 0, fontSize: 11, color: T.textMute, letterSpacing: 0.7, fontWeight: 700, textTransform: 'uppercase' }}>
                Recent · 14 today
              </h3>
              <button style={{ fontSize: 11.5, color: T.sage, fontWeight: 700, background: 'transparent', border: 'none' }}>
                Full timeline →
              </button>
            </div>
            {[
              { t: '11:42', who: 'G',  whoTone: '#d3a89a', icon: 'pill',   what: '2.5mL Tylenol', tone: 'trust' },
              { t: '10:15', who: 'Y',  whoTone: '#c2b39a', icon: 'vomit',  what: 'Vomit · small', voice: true, sev: 'warm' },
              { t: '9:30',  who: 'Y',  whoTone: '#c2b39a', icon: 'thermo', what: '38.6° ear', sev: 'warm' },
              { t: '9:18',  who: 'Y',  whoTone: '#c2b39a', icon: 'alert',  what: 'Seems weak · Energy 2', tag: 'OBS' },
            ].map((r,i,arr) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '9px 0',
                borderBottom: i < arr.length - 1 ? `1px solid ${T.line}` : 'none',
              }}>
                <div style={{ width: 32, fontSize: 11, color: T.textMute, fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>{r.t}</div>
                <div style={{
                  width: 20, height: 20, borderRadius: 20, background: r.whoTone,
                  color: '#fff', fontSize: 9, fontWeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{r.who}</div>
                <div style={{
                  width: 26, height: 26, borderRadius: 8,
                  background: r.tone === 'trust' ? UN.d.trustSoft :
                              r.sev ? `${UN.d.sev[r.sev]}22` : T.surface2,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={r.icon} size={13}
                        color={r.tone === 'trust' ? UN.d.trust : r.sev ? UN.d.sev[r.sev] : T.textDim}
                        strokeWidth={1.9}/>
                </div>
                <div style={{
                  flex: 1, fontSize: 13, color: T.text, fontWeight: 500,
                  fontStyle: r.voice ? 'italic' : 'normal', letterSpacing: -0.1,
                  display: 'flex', alignItems: 'center', gap: 6,
                }}>
                  {r.what}
                  {r.voice && <Icon name="mic" size={10} color={T.textMute} strokeWidth={2}/>}
                  {r.tag && (
                    <span style={{
                      fontSize: 9, color: UN.d.trust, fontWeight: 700, letterSpacing: 0.4,
                      padding: '1px 5px', borderRadius: 3, background: UN.d.trustSoft,
                    }}>{r.tag}</span>
                  )}
                </div>
              </div>
            ))}
          </div>
          <div style={{ height: 20 }}/>
        </div>

        <TabBar mode="d" active="home"/>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

window.EpisodeDetail = EpisodeDetail;