// Log Sleep modal + Photo in timeline + Photo expanded lightbox + Multi-photo strip
const { Icon, Phone, HomeIndicator, ModalShell, Label, TopBar, TabBar, Stepper, Scale5 } = window;

// ═══════════════════════════════════════════════════════════
// LOG SLEEP — duration dial + start/end + quality + wake-ups
// ═══════════════════════════════════════════════════════════
function LogSleep() {
  const T = UN.d;
  return (
    <ModalShell mode="d" title="Sleep" subtitle="Maeve" cta="Log sleep">
      <Label>Duration</Label>
      <div style={{ marginTop: 8, marginBottom: 14 }}>
        <Stepper value="7.5" unit="h" sub={<span style={{ color: T.textMute, fontWeight: 500 }}>30-min steps</span>}/>
      </div>

      <Label>When</Label>
      <div style={{
        marginTop: 8, marginBottom: 14,
        background: T.surface, border: `1px solid ${T.line2}`, borderRadius: 14,
        overflow: 'hidden',
      }}>
        {[
          { l: 'Started', v: 'Yesterday 6:42 pm' },
          { l: 'Ended',   v: 'Just now 2:14 am' },
        ].map((r,i,a) => (
          <div key={i} style={{
            padding: '12px 14px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none',
          }}>
            <span style={{ fontSize: 11.5, color: T.textDim, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase', width: 60 }}>
              {r.l}
            </span>
            <span style={{ flex: 1, fontSize: 13.5, color: T.text, fontWeight: 600, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>
              {r.v}
            </span>
            <Icon name="chev" size={12} color={T.textMute} strokeWidth={2}/>
          </div>
        ))}
      </div>

      <Label>Quality</Label>
      <div style={{ marginTop: 8, marginBottom: 14 }}>
        <Scale5 value={2} color={UN.d.sev.warm}/>
      </div>

      <Label>Wake-ups</Label>
      <div style={{ marginTop: 8 }}>
        <Stepper value="3" size="sm"/>
      </div>
    </ModalShell>
  );
}

// ═══════════════════════════════════════════════════════════
// PHOTOS — timeline thumb + expanded + multi-strip
// One artboard shows all 3 states stacked on a faux timeline.
// ═══════════════════════════════════════════════════════════
function PhotosInTimeline() {
  const T = UN.d;

  // a fake "rash" placeholder for visual demo
  const PhotoPlaceholder = ({ size = 64, borderRadius = 8, label, idx }) => {
    const tones = ['#c1856d', '#a86d56', '#b87a64', '#9b6450'];
    const tone = tones[(idx || 0) % tones.length];
    return (
      <div style={{
        width: size, height: size, borderRadius,
        background: `radial-gradient(circle at 35% 30%, ${tone}, #5a3a2d 90%)`,
        position: 'relative', flexShrink: 0, overflow: 'hidden',
      }}>
        {/* rash spots */}
        {[[20,30,4],[40,18,3],[55,55,6],[28,62,3],[68,40,4],[15,72,3],[45,80,3]].map(([x,y,r], i) => (
          <div key={i} style={{
            position: 'absolute', left: `${x}%`, top: `${y}%`,
            width: r * 2, height: r * 2, borderRadius: r * 2,
            background: '#7d2e1e', opacity: 0.85,
          }}/>
        ))}
        {label && (
          <div style={{
            position: 'absolute', bottom: 4, left: 4,
            fontSize: 9, color: '#fff', fontWeight: 700,
            padding: '1px 5px', borderRadius: 4,
            background: 'rgba(0,0,0,0.4)', letterSpacing: 0.3,
          }}>{label}</div>
        )}
      </div>
    );
  };

  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 · TIMELINE"/>

        <div style={{ flex: 1, overflowY: 'auto', padding: '6px 0' }}>
          <h1 style={{ margin: '12px 22px 4px', fontSize: 24, fontWeight: 700, color: T.text, letterSpacing: -0.5 }}>
            Today
          </h1>

          {/* CASE 1: single photo inline */}
          <div style={{ padding: '8px 22px 0' }}>
            <TimelineEvent
              time="8:14 AM"
              who="Y" whoTone="#c2b39a"
              header={
                <>
                  <Icon name="camera" size={14} color={T.textDim} strokeWidth={1.9}/>
                  <span style={{ fontSize: 13, color: T.text, fontWeight: 600 }}>Throat photo</span>
                </>
              }
              media={(
                <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  <PhotoPlaceholder size={72} borderRadius={10}/>
                  <div style={{ fontSize: 11.5, color: T.textDim, fontStyle: 'italic', lineHeight: 1.4, paddingTop: 4 }}>
                    "Looks the same as yesterday — maybe slightly less red on the right tonsil."
                  </div>
                </div>
              )}
            />

            {/* CASE 2: multi-photo strip */}
            <TimelineEvent
              time="10:32 AM"
              who="S" whoTone="#a5b8c9"
              header={
                <>
                  <Icon name="camera" size={14} color={T.textDim} strokeWidth={1.9}/>
                  <span style={{ fontSize: 13, color: T.text, fontWeight: 600 }}>Rash progression · 4 angles</span>
                </>
              }
              media={(
                <div style={{ display: 'flex', gap: 4, overflowX: 'auto', paddingBottom: 2 }}>
                  {['hand', 'foot', 'mouth', 'back'].map((label, i) => (
                    <PhotoPlaceholder key={i} size={66} idx={i} label={label.toUpperCase()}/>
                  ))}
                </div>
              )}
            />

            {/* CASE 3: photo-with-context */}
            <TimelineEvent
              time="11:42 PM"
              who="G" whoTone="#d3a89a"
              header={
                <>
                  <Icon name="pill" size={14} color={UN.d.trust} strokeWidth={1.9}/>
                  <span style={{ fontSize: 13, color: T.text, fontWeight: 600 }}>2.5mL Tylenol</span>
                  <span style={{
                    fontSize: 9, color: UN.d.trust, fontWeight: 700, letterSpacing: 0.4,
                    padding: '1px 5px', borderRadius: 3, background: UN.d.trustSoft,
                  }}>+ PHOTO</span>
                </>
              }
              media={(
                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <PhotoPlaceholder size={48} borderRadius={8} idx={3}/>
                  <div style={{ fontSize: 11.5, color: T.textMute }}>bottle label confirmation</div>
                </div>
              )}
            />
          </div>

          {/* EXPANDED VIEW — fake overlay at bottom */}
          <div style={{ marginTop: 18, padding: '0 22px' }}>
            <div style={{
              fontSize: 10.5, color: T.textMute, fontWeight: 700, letterSpacing: 0.7, textTransform: 'uppercase',
              marginBottom: 10,
            }}>Tap a photo →</div>

            <div style={{
              background: '#000',
              borderRadius: 18, overflow: 'hidden',
              border: `1px solid ${T.line2}`,
              boxShadow: '0 16px 40px rgba(0,0,0,0.5)',
            }}>
              {/* Top bar */}
              <div style={{
                padding: '12px 14px',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                borderBottom: `1px solid rgba(255,255,255,0.06)`,
              }}>
                <button style={{
                  width: 30, height: 30, borderRadius: 30,
                  background: 'rgba(255,255,255,0.1)', border: 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name="x" size={14} color="#fff" strokeWidth={2}/>
                </button>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 12, color: '#fff', fontWeight: 600 }}>Rash · hand</div>
                  <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.55)', marginTop: 1 }}>Sarah · 10:32 am · 1 of 4</div>
                </div>
                <button style={{
                  width: 30, height: 30, borderRadius: 30,
                  background: 'rgba(255,255,255,0.1)', border: 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name="share" size={14} color="#fff" strokeWidth={2}/>
                </button>
              </div>

              {/* Big photo */}
              <div style={{ position: 'relative', height: 200, background: '#000' }}>
                <div style={{ position: 'absolute', inset: '14px 24px' }}>
                  <PhotoPlaceholder size="100%" borderRadius={12}/>
                </div>
                {/* nav arrows */}
                <button style={{
                  position: 'absolute', left: 8, top: '50%', transform: 'translateY(-50%)',
                  width: 28, height: 28, borderRadius: 28,
                  background: 'rgba(0,0,0,0.5)', border: 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"><path d="M15 6l-6 6 6 6"/></svg>
                </button>
                <button style={{
                  position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)',
                  width: 28, height: 28, borderRadius: 28,
                  background: 'rgba(0,0,0,0.5)', border: 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name="chev" size={14} color="#fff" strokeWidth={2.2}/>
                </button>
              </div>

              {/* thumb strip */}
              <div style={{
                padding: '10px 12px',
                display: 'flex', gap: 6, justifyContent: 'center',
                borderTop: `1px solid rgba(255,255,255,0.06)`,
              }}>
                {[0,1,2,3].map(i => (
                  <div key={i} style={{
                    width: 44, height: 44, borderRadius: 8, overflow: 'hidden',
                    border: i === 0 ? `2px solid ${T.sage}` : `2px solid transparent`,
                    opacity: i === 0 ? 1 : 0.55,
                  }}>
                    <PhotoPlaceholder size={44} borderRadius={6} idx={i}/>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div style={{ height: 24 }}/>
        </div>
        <TabBar mode="d" active="timeline"/>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

function TimelineEvent({ time, who, whoTone, header, media }) {
  const T = UN.d;
  return (
    <div style={{
      padding: '12px 0',
      borderBottom: `1px solid ${T.line}`,
      display: 'flex', gap: 11,
    }}>
      <div style={{
        width: 50, fontFamily: UN.font.num, fontSize: 10.5,
        color: T.textMute, fontWeight: 500, fontVariantNumeric: 'tabular-nums', paddingTop: 2,
      }}>{time}</div>
      <div style={{
        width: 22, height: 22, borderRadius: 22, background: whoTone,
        color: '#fff', fontSize: 9.5, fontWeight: 700,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>{who}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
          {header}
        </div>
        {media}
      </div>
    </div>
  );
}

Object.assign(window, { LogSleep, PhotosInTimeline });