// Timeline page — clean compact list with full-page stage detail

function TimelinePage({ stages = [], phases = [], onOpenProduct = () => {}, onOpenList = () => {}, onOpenActivity = () => {}, lists = [] }) {
  const [openedId, setOpenedId] = useState(null);
  const [activePhase, setActivePhase] = useState('pregnancy');
  const stageRefs = useRef({});

  const phaseMap = Object.fromEntries(phases.map(p => [p.id, p]));
  const phaseStages = useMemo(() => {
    const m = {};
    phases.forEach(p => { m[p.id] = stages.filter(s => s.phase === p.id); });
    return m;
  }, [stages, phases]);

  const productsForStage = (stage) => {
    if (stage.ageMonthsMin === -1) return [];
    const all = window.PRODUCTS || [];
    return all.filter(p =>
      !p.forParent && p.stage !== 'pre-baby' && p.ageMin !== undefined &&
      p.ageMax >= stage.ageMonthsMin && p.ageMin <= stage.ageMonthsMax
    ).slice(0, 8);
  };

  const activitiesForStage = (stage) => {
    if (stage.ageMonthsMin === -1) return [];
    const acts = window.ACTIVITIES || [];
    return acts.filter(a => a.ageMax >= stage.ageMonthsMin && a.ageMin <= stage.ageMonthsMax).slice(0, 6);
  };

  const listsForStage = (stage) => {
    if (!lists || !lists.length) return [];
    const ageBandMap = {
      'pregnancy': 'pre',
      'infant':    '0-1',
      'toddler':   '1-3',
      'preschool': '3-5',
      'school':    '5-8',
      'tween':     '8-12',
    };
    const band = ageBandMap[stage.phase];
    return lists.filter(l => l.ageBand === band).slice(0, 4);
  };

  const skillsMap = (window.ACTIVITY_SKILLS || []).reduce((m, s) => { m[s.id] = s.label; return m; }, {});

  // Track which phase is in viewport
  useEffect(() => {
    if (openedId) return;
    const onScroll = () => {
      let current = phases[0]?.id || 'pregnancy';
      for (const p of phases) {
        const first = phaseStages[p.id][0];
        if (!first) continue;
        const el = stageRefs.current[first.id];
        if (el) {
          const rect = el.getBoundingClientRect();
          if (rect.top < 200) current = p.id;
        }
      }
      setActivePhase(current);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [phases, phaseStages, openedId]);

  const scrollToPhase = (phaseId) => {
    const first = phaseStages[phaseId][0];
    if (!first) return;
    const el = stageRefs.current[first.id];
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 140;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  // ── Detail page for one stage ──
  if (openedId) {
    const stage = stages.find(s => s.id === openedId);
    if (!stage) return null;
    const phase = phaseMap[stage.phase];
    const products = productsForStage(stage);
    const activities = activitiesForStage(stage);
    const stageLists = listsForStage(stage);

    return (
      <div className="page tldetail" style={{ '--phase-color': phase?.color || 'var(--accent)' }}>
        <button className="back-btn" onClick={() => setOpenedId(null)}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
          <span>Full timeline</span>
        </button>

        {/* Hero */}
        <header className="tldetail-hero">
          <div className="tldetail-hero-text">
            <div className="tldetail-phase">{phase?.label}</div>
            <h1 className="tldetail-h1">{stage.title}</h1>
            <div className="tldetail-age">{stage.label}</div>
            <p className="tldetail-sub">{stage.subtitle}</p>
            <p className="tldetail-blurb">{stage.blurb}</p>
          </div>
          {stage.hero && (
            <div className="tldetail-hero-img">
              <img src={stage.hero} alt="" />
            </div>
          )}
        </header>

        {/* What's happening */}
        {stage.development && stage.development.length > 0 && (
          <section className="tldetail-section">
            <div className="tldetail-section-head">
              <div className="page-eyebrow">What's happening</div>
              <h2 className="tldetail-section-h">Inside their development</h2>
            </div>
            <div className="tldetail-dev-grid">
              {stage.development.map((d, i) => (
                <div key={i} className="tldetail-dev">
                  <div className="tldetail-dev-num">{String(i + 1).padStart(2, '0')}</div>
                  <div className="tldetail-dev-signal">{d.signal}</div>
                  <p className="tldetail-dev-detail">{d.detail}</p>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Activities */}
        {activities.length > 0 && (
          <section className="tldetail-section">
            <div className="tldetail-section-head">
              <div className="page-eyebrow">Things to do together</div>
              <h2 className="tldetail-section-h">Activities for this stage</h2>
            </div>
            <div className="tldetail-acts">
              {activities.map(a => (
                <button key={a.id} className="tldetail-act" onClick={() => onOpenActivity(a.id)}>
                  <div className="tldetail-act-img"><img src={a.img} alt="" loading="lazy" /></div>
                  <div className="tldetail-act-body">
                    <div className="tldetail-act-meta">{a.duration} min · {(a.skills || []).slice(0, 2).map(s => skillsMap[s] || s).join(', ')}</div>
                    <h4 className="tldetail-act-name">{a.name}</h4>
                    <p className="tldetail-act-blurb">{a.blurb}</p>
                  </div>
                </button>
              ))}
            </div>
          </section>
        )}

        {/* Picks (curated mini-products) */}
        {stage.toys && stage.toys.length > 0 && (
          <section className="tldetail-section tldetail-picks-section">
            <div className="tldetail-section-head">
              <div className="page-eyebrow">What's good now · and why</div>
              <h2 className="tldetail-section-h">Curated picks</h2>
            </div>
            <div className="tldetail-picks">
              {stage.toys.map((t, i) => (
                <div key={i} className="tldetail-pick">
                  <div className="tldetail-pick-num">{String(i + 1).padStart(2, '0')}</div>
                  <h4 className="tldetail-pick-name">{t.name}</h4>
                  <p className="tldetail-pick-why">{t.why}</p>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Real products */}
        {products.length > 0 && (
          <section className="tldetail-section">
            <div className="tldetail-section-head">
              <div className="page-eyebrow">Shop the stage</div>
              <h2 className="tldetail-section-h">Gear we'd hand to a friend</h2>
            </div>
            <div className="tldetail-products">
              {products.map(p => (
                <button key={p.id} className="tldetail-product" onClick={() => onOpenProduct(p)}>
                  <div className="tldetail-product-img">{p.img ? <img src={p.img} alt="" loading="lazy" /> : null}</div>
                  <div className="tldetail-product-body">
                    <div className="tldetail-product-brand">{p.brand}</div>
                    <h4 className="tldetail-product-name">{p.name}</h4>
                    <div className="tldetail-product-price">${p.price}</div>
                  </div>
                </button>
              ))}
            </div>
          </section>
        )}

        {/* Related lists */}
        {stageLists.length > 0 && (
          <section className="tldetail-section">
            <div className="tldetail-section-head">
              <div className="page-eyebrow">Curated by others</div>
              <h2 className="tldetail-section-h">Related lists</h2>
            </div>
            <div className="tldetail-lists">
              {stageLists.map(l => (
                <button key={l.id} className="tldetail-list" onClick={() => onOpenList(l)}>
                  <h4 className="tldetail-list-name">{l.name}</h4>
                  <p className="tldetail-list-desc">{l.desc}</p>
                  <div className="tldetail-list-meta">By {l.owner} · {(l.productIds || []).length} items</div>
                </button>
              ))}
            </div>
          </section>
        )}

        {/* Milestones + gear (compact) */}
        {(stage.milestones?.length > 0 || stage.forBaby?.length > 0 || stage.forParent?.length > 0) && (
          <section className="tldetail-section tldetail-medical">
            <div className="tldetail-section-head">
              <div className="page-eyebrow">Reference</div>
              <h2 className="tldetail-section-h">Milestones & essentials</h2>
            </div>
            <div className="tldetail-ref-grid">
              {stage.milestones?.length > 0 && (
                <div className="tldetail-ref">
                  <div className="tldetail-ref-label">Medical & milestones</div>
                  <ul>{stage.milestones.map((m, i) => <li key={i}><span className="when">{m.when}</span><span>{m.what}</span></li>)}</ul>
                </div>
              )}
              {stage.forBaby?.length > 0 && (
                <div className="tldetail-ref">
                  <div className="tldetail-ref-label">For the baby</div>
                  <ul>{stage.forBaby.map((g, i) => <li key={i}><span className="when">{g.name}</span><span>{g.why}</span></li>)}</ul>
                </div>
              )}
              {stage.forParent?.length > 0 && (
                <div className="tldetail-ref">
                  <div className="tldetail-ref-label">For you</div>
                  <ul>{stage.forParent.map((g, i) => <li key={i}><span className="when">{g.name}</span><span>{g.why}</span></li>)}</ul>
                </div>
              )}
            </div>
          </section>
        )}

        {/* Next stage navigator */}
        <nav className="tldetail-nav">
          {(() => {
            const idx = stages.findIndex(s => s.id === openedId);
            const prev = idx > 0 ? stages[idx - 1] : null;
            const next = idx < stages.length - 1 ? stages[idx + 1] : null;
            return (
              <>
                {prev ? (
                  <button className="tldetail-nav-btn" onClick={() => { setOpenedId(prev.id); window.scrollTo({ top: 0, behavior: 'instant' }); }}>
                    <span className="tldetail-nav-eyebrow">← Previous</span>
                    <span className="tldetail-nav-label">{prev.label}</span>
                    <span className="tldetail-nav-title">{prev.title}</span>
                  </button>
                ) : <div />}
                {next ? (
                  <button className="tldetail-nav-btn is-right" onClick={() => { setOpenedId(next.id); window.scrollTo({ top: 0, behavior: 'instant' }); }}>
                    <span className="tldetail-nav-eyebrow">Next →</span>
                    <span className="tldetail-nav-label">{next.label}</span>
                    <span className="tldetail-nav-title">{next.title}</span>
                  </button>
                ) : <div />}
              </>
            );
          })()}
        </nav>
      </div>
    );
  }

  // ── Index: compact list view ──
  return (
    <div className="page tlpage">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Timeline</div>
          <h1 className="page-title">Every child<br/><em>is their own clock.</em></h1>
          <p className="page-sub">A guide to roughly when, never exactly when. Tap any stage to see what's happening, what to try, and what to stock.</p>
        </div>
      </div>

      <div className="timeline-disclaimer">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
        <span><strong>This is a rough map, not a checklist.</strong> Children develop at wildly different rates. If something feels off, talk to your pediatrician, not a website.</span>
      </div>

      {/* Sticky phase nav */}
      <div className="tl-stickynav">
        <div className="tl-stickynav-inner">
          {phases.map(p => (
            <button key={p.id} className={`tl-snav-item${activePhase === p.id ? ' is-current' : ''}`} onClick={() => scrollToPhase(p.id)} style={{ '--phase-color': p.color }}>
              <span className="tl-snav-dot" />
              <div className="tl-snav-text">
                <span className="tl-snav-label">{p.label}</span>
                <span className="tl-snav-range">{p.short}</span>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Compact list */}
      <div className="tl-list">
        {phases.map((phase, pIdx) => (
          <div key={phase.id} className="tl-phase-block">
            <div className="tl-phase-bar" style={{ '--phase-color': phase.color }}>
              <div className="tl-phase-bar-num">{String(pIdx + 1).padStart(2, '0')}</div>
              <div className="tl-phase-bar-text">
                <div className="tl-phase-bar-eyebrow">Phase {pIdx + 1}</div>
                <h2 className="tl-phase-bar-h">{phase.label}</h2>
              </div>
              <div className="tl-phase-bar-range">{phase.short}</div>
            </div>

            {phaseStages[phase.id].map((stage) => {
              const headlineDev = (stage.development || [])[0];
              return (
                <button
                  key={stage.id}
                  ref={el => { stageRefs.current[stage.id] = el; }}
                  className="tl-row"
                  onClick={() => { setOpenedId(stage.id); window.scrollTo({ top: 0, behavior: 'instant' }); }}
                  style={{ '--phase-color': phase.color }}
                >
                  <div className="tl-row-age">
                    <span className="tl-row-age-label">{stage.label}</span>
                  </div>
                  <div className="tl-row-thumb">
                    {stage.hero ? <img src={stage.hero} alt="" loading="lazy" /> : null}
                  </div>
                  <div className="tl-row-body">
                    <h3 className="tl-row-title">{stage.title}</h3>
                    <p className="tl-row-sub">{stage.subtitle}</p>
                    {headlineDev && (
                      <div className="tl-row-signal">
                        <span className="tl-row-signal-label">{headlineDev.signal}:</span>
                        <span className="tl-row-signal-text">{headlineDev.detail}</span>
                      </div>
                    )}
                  </div>
                  <div className="tl-row-arrow">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                </button>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

window.TimelinePage = TimelinePage;