/* 모모, 테리 — Materials (수업지원자료) screen */

const DL_GRADIENTS = [
  'linear-gradient(140deg, var(--primary), var(--primary-strong))',
  'linear-gradient(140deg, var(--primary-strong), color-mix(in srgb, var(--accent) 55%, var(--primary-strong)))',
  'linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--primary) 50%, var(--accent)))',
  'linear-gradient(140deg, color-mix(in srgb, var(--primary) 75%, var(--accent)), var(--primary-strong))',
];

function MaterialsScreen({ go }) {
  const STEPS = Array.from({ length: 12 }, (_, i) => (i + 1) + '호');
  const [step, setStep] = React.useState('1호');
  const stepListRef = React.useRef(null);
  const scrollStepIntoView = (s) => {
    const list = stepListRef.current;
    if (!list) return;
    const btn = list.querySelector('[data-step="' + s + '"]');
    if (!btn) return;
    const listRect = list.getBoundingClientRect();
    const btnRect = btn.getBoundingClientRect();
    if (btnRect.left < listRect.left) {
      list.scrollLeft -= (listRect.left - btnRect.left) + 20;
    } else if (btnRect.right > listRect.right) {
      list.scrollLeft += (btnRect.right - listRect.right) + 20;
    }
  };

  const [track, setTrack] = React.useState(null); // null = show character picker
  const [content, setContent] = React.useState(undefined); // undefined = loading, null = none found
  const [weeklyPlan, setWeeklyPlan] = React.useState([]);
  const [downloads, setDownloads] = React.useState([]);
  const [selectedKinds, setSelectedKinds] = React.useState([]);
  const toggleKind = (k) => setSelectedKinds((prev) => (
    prev.includes(k) ? prev.filter((v) => v !== k) : [...prev, k]
  ));

  const bulkDownload = (files) => {
    files.forEach((f, i) => {
      setTimeout(() => {
        const a = document.createElement('a');
        a.href = f.file_url;
        a.download = f.file_label || '';
        a.target = '_blank';
        a.rel = 'noopener noreferrer';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }, i * 300);
    });
  };

  React.useEffect(() => {
    if (!track) return undefined;
    let cancelled = false;
    setContent(undefined);
    setWeeklyPlan([]);
    setDownloads([]);
    fetchContentByStepAndTrack(step, track).then(async (c) => {
      if (cancelled) return;
      setContent(c);
      if (c) {
        const [plan, dl] = await Promise.all([fetchWeeklyPlan(c.id), fetchContentDownloads(c.id)]);
        if (cancelled) return;
        setWeeklyPlan(plan);
        setDownloads(dl);
        setSelectedKinds(DOWNLOAD_KINDS.filter((k) => dl.some((d) => d.kind === k && d.file_url)));
      }
    });
    return () => { cancelled = true; };
  }, [step, track]);

  const goToWeek = (idx) => {
    const el = document.getElementById('week-' + idx);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const [activeWeek, setActiveWeek] = React.useState(0);
  React.useEffect(() => {
    if (!weeklyPlan.length) return undefined;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) setActiveWeek(Number(entry.target.dataset.weekIdx));
      });
    }, { rootMargin: '-35% 0px -55% 0px', threshold: 0 });
    weeklyPlan.forEach((_, wi) => {
      const el = document.getElementById('week-' + wi);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, [weeklyPlan]);

  if (!track) {
    return (
      <main>
        <div className="page-banner">
          <div className="wrap">
            <div className="crumb">홈 · 수업지원자료</div>
            <h1>모모랑 테리랑, 주제별 수업지원자료</h1>
            <p>먼저 함께할 친구를 골라주세요.</p>
          </div>
        </div>
        <div className="wrap">
          <div className="cat-grid" style={{ gridTemplateColumns: '1fr 1fr', maxWidth: 820, margin: '0 auto' }}>
            {['모모', '테리'].map((who) => {
              const c = CHARS[who];
              return (
                <button key={who} type="button" className="card card-hover track-pick" onClick={() => setTrack(who)}>
                  <Char who={who} size={120} style={{ margin: '0 auto 18px', borderWidth: 3 }} />
                  <h3 style={{ fontSize: 24 }}>{who} <span style={{ color: c.color, fontSize: 16 }}>{c.en}</span></h3>
                  <div className="badge" style={{ margin: '10px 0 4px', background: 'color-mix(in srgb, ' + c.color + ' 16%, #fff)', color: c.color }}>{c.age} · {c.tag}</div>
                  <p style={{ color: 'var(--muted)', marginTop: 10 }}>{c.desc}</p>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'center', marginTop: 14 }}>
                    {c.keywords.map((k) => (<span key={k} style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--muted)', background: 'var(--primary-tint-2)', padding: '4px 10px', borderRadius: 999 }}>{k}</span>))}
                  </div>
                </button>
              );
            })}
          </div>
        </div>
        <div style={{ height: 56 }}></div>
      </main>
    );
  }

  return (
    <main>
      {weeklyPlan.length > 0 && (
        <div className="week-rail">
          {weeklyPlan.map((w, wi) => (
            <button key={w.week} className={activeWeek === wi ? 'active' : ''} onClick={() => goToWeek(wi)}>{w.week}</button>
          ))}
        </div>
      )}

      <div className="page-banner">
        <div className="wrap">
          <div className="crumb">홈 · 수업지원자료</div>
          <h1>모모랑 테리랑, 주제별 수업지원자료</h1>
          <p>연령과 주제를 골라 바로 수업에 활용하세요.</p>
        </div>
      </div>

      <div className="wrap">
        <div className="track-switch">
          <Char who={track} size={30} />
          <span><b>{track}</b> 자료를 보고 있어요</span>
          <button type="button" onClick={() => setTrack(null)}>다른 친구 보기</button>
        </div>

        {/* STEP list */}
        <div className="step-list-wrap">
          <button className="step-arrow left" onClick={() => {
            const idx = STEPS.indexOf(step);
            const next = STEPS[Math.max(0, idx - 1)];
            setStep(next);
            scrollStepIntoView(next);
          }} aria-label="이전">
            <Arrow style={{ transform: 'rotate(180deg)' }} />
          </button>
          <div className="step-list" ref={stepListRef}>
            {STEPS.map((s) => (
              <button key={s} data-step={s} className={'step-item' + (step === s ? ' active' : '')} onClick={() => { setStep(s); scrollStepIntoView(s); }}>{s}</button>
            ))}
          </div>
          <button className="step-arrow right" onClick={() => {
            const idx = STEPS.indexOf(step);
            const next = STEPS[Math.min(STEPS.length - 1, idx + 1)];
            setStep(next);
            scrollStepIntoView(next);
          }} aria-label="다음">
            <Arrow />
          </button>
        </div>

        {/* detail card */}
        <div className="detail-card">
          {content === undefined ? (
            <p style={{ textAlign: 'center', color: 'var(--muted)', padding: '40px 0' }}>불러오는 중…</p>
          ) : content === null ? (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <p style={{ color: 'var(--muted)', fontWeight: 700, fontSize: 16 }}>{track} {step}에 등록된 수업지원자료가 아직 없어요.</p>
              <p style={{ color: 'var(--muted)', fontSize: 13.5, marginTop: 8 }}>관리자 페이지에서 콘텐츠를 등록하고 공개해 보세요.</p>
            </div>
          ) : (
            <React.Fragment>
              <div className="detail-head">
                <span className="badge" style={{ marginBottom: 12 }}>{step} 주제별 수업자료</span>
                <h2>{content.topic}</h2>
              </div>

              {/* learning goals */}
              {content.goals && content.goals.length > 0 && (
                <div className="goal-box">
                  <span className="goal-title">🎯 학습 목표</span>
                  <ul>
                    {content.goals.map((g, i) => (<li key={i}>{g}</li>))}
                  </ul>
                </div>
              )}

              {/* downloads */}
              {(() => {
                const rows = DOWNLOAD_KINDS.map((k) => ({ kind: k, ...(downloads.find((d) => d.kind === k) || {}) }));
                const checkedFiles = rows.filter((f) => selectedKinds.includes(f.kind) && f.file_url);
                return (
                  <div className="goal-box" style={{ marginTop: 20 }}>
                    <div className="dl-head">
                      <span className="goal-title" style={{ marginBottom: 0 }}>📥 다운로드 자료</span>
                      <span className="dl-multi-badge">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><rect x="7" y="7" width="13" height="13" rx="3"/><path d="M4 15V6a2 2 0 0 1 2-2h9"/></svg>
                        중복 선택 가능
                      </span>
                    </div>

                    <div className="dl-rows">
                      {rows.map((f, i) => {
                        const has = !!f.file_url;
                        const checked = selectedKinds.includes(f.kind);
                        return (
                          <button key={f.kind} type="button"
                                  className={'dl-row activity-card' + (checked ? ' checked' : '') + (has ? '' : ' empty')}
                                  style={{ background: DL_GRADIENTS[i % DL_GRADIENTS.length] }}
                                  onClick={() => toggleKind(f.kind)}>
                            <div className="ac-top">
                              <span className="ac-badge">{has ? '등록됨' : '미등록'}</span>
                              <span className="dl-row-avatar">{DOWNLOAD_KIND_ICONS[f.kind]}</span>
                            </div>
                            <h4>{f.kind}</h4>
                            <div className="ac-foot">
                              <small>{has ? (f.file_label || f.kind + ' 파일') : '파일이 없어요'}</small>
                              <span className="dl-row-check">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                              </span>
                            </div>
                          </button>
                        );
                      })}
                    </div>

                    <button type="button" className={'dl-cta' + (checkedFiles.length ? '' : ' disabled')}
                            onClick={() => checkedFiles.length && bulkDownload(checkedFiles)}>
                      <DownloadIcon/> 선택한 자료 다운로드{checkedFiles.length ? ' (' + checkedFiles.length + ')' : ''}
                    </button>
                  </div>
                );
              })()}

              {/* week-by-week activity + chapters */}
              {weeklyPlan.map((w, wi) => (
                <div id={'week-' + wi} key={w.week} data-week-idx={wi} style={{ scrollMarginTop: 90 }}>
                  <div className="activity-head" style={wi > 0 ? { marginTop: 46 } : undefined}>
                    <span className="wk">{w.week}</span>
                    <h3>교사 활동지도</h3>
                  </div>
                  <div className="activity-grid">
                    {w.activities.map((a, i) => {
                      const bg = i === 0
                        ? 'linear-gradient(140deg, var(--primary), var(--primary-strong))'
                        : 'linear-gradient(140deg, var(--primary-strong), color-mix(in srgb, var(--accent) 55%, var(--primary-strong)))';
                      return (
                        <div className="activity-card" key={i} style={{ background: bg }}>
                          <div className="ac-top">
                            <span className="ac-badge">{a.badge}</span>
                            <Char who={i === 0 ? '모모' : '테리'} size={40} bg="rgba(255,255,255,.85)" style={{ border: '2px solid rgba(255,255,255,.6)' }} />
                          </div>
                          <h4>{a.title}</h4>
                          <div className="ac-foot">
                            <small>{a.sub}</small>
                            <button className="play"><PlayIcon/></button>
                          </div>
                        </div>
                      );
                    })}
                  </div>

                  <div className="activity-head">
                    <span className="wk" style={{ background: 'var(--primary)' }}>차시</span>
                    <h3>수업 흐름</h3>
                  </div>
                  <div className="chapter-list">
                    {w.chapters.map((c, i) => (
                      <div className="chapter-row" key={i}>
                        <div className="ch-num">{c.no}</div>
                        <div>
                          <b>{c.title}</b>
                          <small style={{ display: 'block' }}>{c.sub}</small>
                        </div>
                        <span className="ch-time">{c.time}</span>
                        <button className="play" style={{ width: 38, height: 38 }}><PlayIcon/></button>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </React.Fragment>
          )}
        </div>

        {/* link to family */}
        <div className="cta-band" style={{ margin: '30px 0 8px' }}>
          <div>
            <h2>이 주제, 집에서도 이어가요</h2>
            <p>{content ? '「' + content.topic + '」 주제의 확장수업 영상과 오디오를 확인해 보세요.' : '확장수업 영상과 오디오를 확인해 보세요.'}</p>
          </div>
          <button className="btn btn-ghost" onClick={() => go('family')}>확장수업 보기 <Arrow/></button>
        </div>
      </div>

      <div style={{ height: 56 }}></div>
    </main>
  );
}

Object.assign(window, { MaterialsScreen });