// Stacked scroll-state artboards: render the same screen 2–3 times
// in vertical succession, each rolled to a different scroll position.
const { Phone, TabBar, HomeIndicator, TopBar, Icon } = window;

// Wrapper that scrolls the first overflowing descendant to `top` after mount.
function ScrollAt({ top = 0, children }) {
  const ref = React.useRef(null);
  React.useLayoutEffect(() => {
    if (!ref.current) return;
    // Find the first scrollable element actually overflowing.
    const candidates = ref.current.querySelectorAll('*');
    for (const el of candidates) {
      const cs = getComputedStyle(el);
      const overflows =
        (cs.overflowY === 'auto' || cs.overflowY === 'scroll') &&
        el.scrollHeight > el.clientHeight + 2;
      if (overflows) {
        el.scrollTop = top;
        return;
      }
    }
  }, [top]);
  return <div ref={ref} style={{ display: 'contents' }}>{children}</div>;
}

function ScrollLabel({ children }) {
  const T = UN.d;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '14px 0',
    }}>
      <span style={{
        fontFamily: UN.font.body, fontSize: 10.5, color: T.sage,
        letterSpacing: 1.2, fontWeight: 700, textTransform: 'uppercase',
        padding: '4px 10px', borderRadius: 99,
        background: UN.d.sageSoft, border: `1px solid ${UN.d.sageEdge}`,
      }}>{children}</span>
      <div style={{ flex: 1, height: 1, background: UN.d.line }}/>
    </div>
  );
}

// Generic stack — pass an array of [label, scrollTop] tuples and a render fn.
function ScrollStack({ render, slots }) {
  return (
    <div style={{
      width: 420, padding: '14px 14px',
      background: '#1c1a18',
      display: 'flex', flexDirection: 'column', gap: 0,
    }}>
      {slots.map(([label, top], i) => (
        <React.Fragment key={i}>
          <ScrollLabel>{label}</ScrollLabel>
          <ScrollAt top={top}>{render()}</ScrollAt>
        </React.Fragment>
      ))}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// Pre-baked tall artboards for the four major screens
// ═══════════════════════════════════════════════════════════

function HomeStack() {
  return (
    <ScrollStack
      render={() => <window.HomeOverview/>}
      slots={[
        ['Top — kid cards & live activity', 0],
        ['Scrolled — caregiver feed', 360],
        ['Bottom — past episodes', 760],
      ]}
    />
  );
}

function EpisodeStack() {
  return (
    <ScrollStack
      render={() => <window.EpisodeDetail/>}
      slots={[
        ['Top — current temp + chips + timeline', 0],
        ['Mid — wellbeing track + red-flag', 420],
        ['Bottom — recent log entries', 820],
      ]}
    />
  );
}

function TimelineStack() {
  return (
    <ScrollStack
      render={() => <window.TimelineFull/>}
      slots={[
        ['Top — filter chips & 24h minimap', 0],
        ['Mid — Tonight section · 11pm–2am', 440],
        ['Bottom — Evening section · earlier today', 880],
      ]}
    />
  );
}

function JourneyStack() {
  return (
    <ScrollStack
      render={() => <window.JourneyDetail/>}
      slots={[
        ['Top — plan ready + suggested meds', 0],
        ['Mid — day chip strip & today\u2019s plan', 420],
        ['Bottom — adjustments + sticky CTA', 800],
      ]}
    />
  );
}

Object.assign(window, { ScrollAt, ScrollStack, ScrollLabel, HomeStack, EpisodeStack, TimelineStack, JourneyStack });