/* 모모, 테리 — Home screen */

function withAutoplay(url) {
  if (!url) return null;
  const sep = url.includes('?') ? '&' : '?';
  return url + sep + 'autoplay=1&muted=1&background=1&loop=1';
}

function VideoPreviewThumb({ videoUrl, pastelBg, badge }) {
  const [hover, setHover] = React.useState(false);
  const timerRef = React.useRef(null);
  const onEnter = () => {
    setHover(true);
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => setHover(false), 5000);
  };
  const onLeave = () => { setHover(false); clearTimeout(timerRef.current); };
  const src = withAutoplay(videoUrl);
  return (
    <div className="thumb" style={{ background: pastelBg }} onMouseEnter={onEnter} onMouseLeave={onLeave} onTouchStart={onEnter}>
      <span className="badge badge-solid">{badge}</span>
      {hover && src ? (
        <iframe
          src={src}
          style={{ position: 'absolute', top: '50%', left: '50%', width: '134%', height: '100%', transform: 'translate(-50%,-50%)', border: 'none' }}
          allow="autoplay" title="미리보기" />
      ) : (
        <React.Fragment>
          <Ph label="콘텐츠 썸네일" style={{ position: 'absolute', inset: 0, background: 'transparent' }} />
          <button className="play"><PlayIcon/></button>
        </React.Fragment>
      )}
    </div>
  );
}

function HomeScreen({ go }) {
  const [recommended, setRecommended] = React.useState(null);

  React.useEffect(() => {
    window.supabaseClient
      .from('contents')
      .select('*')
      .eq('status', 'published')
      .order('created_at', { ascending: false })
      .limit(4)
      .then(({ data, error }) => setRecommended(error ? [] : (data || [])));
  }, []);

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="wrap hero-grid">
          <div>
            <span className="badge">🌱 1–2세 발달 통합 프로그램</span>
            <h1 style={{ marginTop: 16 }}>사랑받으며 자라고,<br/><span className="hl">스스로</span> 자라는 아이</h1>
            <p className="lead">만 1세 모모와 만 2세 테리가 함께하는 토들러 발달 프로그램. 수업부터 가정연계까지 한 곳에서 만나요.</p>
            <div className="hero-cta">
              <button className="btn btn-primary" onClick={() => go('materials')}>수업자료 둘러보기 <Arrow/></button>
              <button className="btn btn-ghost" onClick={() => go('family')}>확장수업 보기</button>
            </div>
            <div className="hero-stats">
              <div><b>320+</b><span>발달 콘텐츠</span></div>
              <div><b>6</b><span>발달 영역</span></div>
              <div><b>1–2세</b><span>연령별 구성</span></div>
            </div>
          </div>
          <div className="hero-art">
            <div className="hero-blob"></div>
            <div className="hero-stage">
              <img className="duo" src="assets/duo.png" alt="모모와 테리" />
            </div>
            <div className="hero-card" style={{ left: '-6%', top: '14%' }}>
              <Char who="모모" size={46} />
              <div><b>모모 · 만 1세</b><small>물방울처럼 순수한 친구</small></div>
            </div>
            <div className="hero-card" style={{ right: '-6%', bottom: '12%' }}>
              <Char who="테리" size={46} />
              <div><b>테리 · 만 2세</b><small>새싹처럼 자라는 친구</small></div>
            </div>
          </div>
        </div>
      </section>

      {/* AGE STRIP */}
      <section style={{ paddingTop: 12 }}>
        <div className="wrap">
          <div className="strip">
            {[
              { ic: '🧡', b: '만 1세 · 모모', s: '애착·안정' },
              { ic: '🌱', b: '만 2세 · 테리', s: '탐색·도전' },
              { ic: '🏠', b: '확장수업', s: '집에서 이어가기' },
              { ic: '🎈', b: '주제통합', s: '6개 발달 영역' },
            ].map((x, i) => (
              <div className="strip-item" key={i}>
                <div className="ic" style={{ background: 'var(--primary-tint)' }}>{x.ic}</div>
                <div><b>{x.b}</b><small>{x.s}</small></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* RECOMMENDED */}
      <section>
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-eyebrow">THIS WEEK</div>
            <h2 className="sec-title">이번 주 추천 수업</h2>
            <p className="sec-sub">모모테리 관리자가 등록한 최신 콘텐츠예요.</p>
          </div>
          {recommended === null ? (
            <p style={{ textAlign: 'center', color: 'var(--muted)' }}>불러오는 중…</p>
          ) : recommended.length === 0 ? (
            <p style={{ textAlign: 'center', color: 'var(--muted)' }}>아직 공개된 콘텐츠가 없어요.</p>
          ) : (
            <div className="rec-grid">
              {recommended.map((r) => {
                const p = PASTELS[(r.pastel || 0) % PASTELS.length];
                return (
                  <article className="card card-hover rec-card" key={r.id} onClick={() => go(r.type === '확장수업' ? 'family' : 'materials')} style={{ cursor: 'pointer' }}>
                    <VideoPreviewThumb videoUrl={r.video_url} pastelBg={p.bg} badge={r.step || r.type} />
                    <div className="rec-body">
                      <div className="meta">{r.topic} · {r.type}</div>
                      <h4>{r.title}</h4>
                    </div>
                  </article>
                );
              })}
            </div>
          )}
        </div>
      </section>

      {/* CATEGORIES */}
      <section className="band">
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-eyebrow">CATEGORY</div>
            <h2 className="sec-title">주제별로 찾아보기</h2>
            <p className="sec-sub">1~2세 발달 6개 영역으로 콘텐츠를 정리했어요.</p>
          </div>
          <div className="cat-grid">
            {CATEGORIES.map((c, i) => {
              const p = PASTELS[i % PASTELS.length];
              return (
                <div className="card card-hover cat-card" key={c.id} onClick={() => go('materials')}>
                  <div className="ic" style={{ background: p.bg, color: p.fg }}>{c.icon}</div>
                  <div><b>{c.name}</b><small>{c.desc}</small></div>
                  <span className="arrow"><Arrow/></span>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* STEPS */}
      <section>
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-eyebrow">HOW IT WORKS</div>
            <h2 className="sec-title">이렇게 이어집니다</h2>
          </div>
          <div className="steps">
            {[
              { n: '1', t: 'STEP1 · 기본수업', p: '주제를 처음 만나는 도입 활동으로 흥미를 열어요.' },
              { n: '2', t: 'STEP2 · 심화수업', p: '활동지와 지도서로 주제를 깊이 있게 다뤄요.' },
              { n: '3', t: '확장수업', p: '영상·오디오·책놀이로 집에서 자연스럽게 이어가요.' },
            ].map((s) => (
              <div className="step" key={s.n}>
                <div className="num">{s.n}</div>
                <h4>{s.t}</h4>
                <p>{s.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA BAND */}
      <section style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="cta-band">
            <div>
              <h2>오늘 수업, 모모테리와 함께 시작해요</h2>
              <p>교사 인증만 하면 모든 수업자료를 무료로 이용할 수 있어요.</p>
            </div>
            <button className="btn btn-ghost" onClick={() => go('materials')}>수업자료 보러가기 <Arrow/></button>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomeScreen });