// ─────────────────────────────────────────────────────────
// ChefVerse · Nested curriculum navigation (V3.1)
//   CurriculumModulesList   — catalog of top-level modules (thumbnail cards)
//   CurriculumModuleDetail  — module hero (thumbnail) + intro + direct
//                             content first, then sub-module cards
//   SubModuleDetail         — a sub-module's own page: lesson list + Start
// Lessons open in the rich LessonViewer (lesson-viewer.jsx).
// Content-type icons everywhere: video=play, written=file-text,
// graphic=image, carousel=images.
// ─────────────────────────────────────────────────────────

const { useState: useStateCv } = React;

const LESSON_TYPE_META = {
  video:    { icon: "play",      label: { en: "Video",    de: "Video",     id: "Video" } },
  written:  { icon: "file-text", label: { en: "Article",  de: "Artikel",   id: "Artikel" } },
  graphic:  { icon: "image",     label: { en: "Graphic",  de: "Grafik",    id: "Grafik" } },
  carousel: { icon: "images",    label: { en: "Carousel", de: "Karussell", id: "Karusel" } },
};

function fmtLessonTime(sec) {
  if (!sec) return null;
  const m = Math.floor(sec / 60), s = sec % 60;
  return m + ":" + String(s).padStart(2, "0");
}

function subModuleIcon(sm) {
  const counts = {};
  (sm.lessons || []).forEach(l => { counts[l.type] = (counts[l.type] || 0) + 1; });
  if (counts.video) return "play";
  const top = Object.keys(counts).sort((a, b) => counts[b] - counts[a])[0];
  return (LESSON_TYPE_META[top] || LESSON_TYPE_META.video).icon;
}

function CvStatusPill({ status, locale }) {
  if (status === "done") return <span className="cv-status-pill done"><Icon name="check" size={11} /> {locale === "de" ? "Abgeschlossen" : locale === "id" ? "Selesai" : "Complete"}</span>;
  if (status === "current") return <span className="cv-status-pill current"><span className="cv-status-dot" /> {locale === "de" ? "Läuft" : locale === "id" ? "Berlangsung" : "In Progress"}</span>;
  if (status === "next") return <span className="cv-status-pill next">{locale === "de" ? "Bereit" : locale === "id" ? "Siap" : "Ready"}</span>;
  if (status === "locked") return <span className="cv-status-pill locked"><Icon name="lock" size={11} /> {locale === "de" ? "Gesperrt" : locale === "id" ? "Terkunci" : "Locked"}</span>;
  return null;
}

function LessonRow({ entry, locale, lp, isLocked, onOpen }) {
  const { lesson } = entry;
  const meta = LESSON_TYPE_META[lesson.type] || LESSON_TYPE_META.video;
  const done = lp.isDone(lesson.id);
  const time = fmtLessonTime(lesson.dur);
  const complete = locale === "de" ? "Abgeschlossen" : locale === "id" ? "Selesai" : "Complete";
  return (
    <button
      className={"cv-lesson" + (done ? " is-done" : "") + (isLocked ? " is-locked" : "")}
      onClick={() => !isLocked && onOpen(entry)}
      disabled={isLocked}>
      <div className="cv-lesson-ic">
        {done ? <Icon name="check" size={14} />
          : isLocked ? <Icon name="lock" size={13} />
          : <Icon name={meta.icon} size={15} />}
      </div>
      <div className="cv-lesson-body">
        <div className="cv-lesson-title">{lesson.title[locale] || lesson.title.en}</div>
        <div className="cv-lesson-meta">
          <span className="cv-lesson-type">{meta.label[locale] || meta.label.en}</span>
          {time && <><span className="cv-lesson-dot">·</span><span>{time}</span></>}
          {lesson.type === "carousel" && <><span className="cv-lesson-dot">·</span><span>{lesson.cards} {locale === "de" ? "Karten" : locale === "id" ? "kartu" : "cards"}</span></>}
        </div>
      </div>
      <div className="cv-lesson-right">
        {done && <span className="cv-lesson-pill"><Icon name="check" size={10} /> {complete}</span>}
        {!done && !isLocked && <Icon name="chevron-right" size={16} className="cv-lesson-chev" />}
      </div>
    </button>
  );
}

// ═══ MODULES LIST ═══
function CurriculumModulesList({ locale, onOpenModule }) {
  const lp = window.useLessonProgress();
  const cur = window.CURRICULUM || [];
  const s = {
    head: locale === "de" ? "Module" : locale === "id" ? "Modul" : "Modules",
    sub: locale === "de" ? "Dein Lernpfad — schließe jedes Modul ab, um das nächste freizuschalten."
      : locale === "id" ? "Jalur belajarmu — selesaikan tiap modul untuk membuka berikutnya."
      : "Your learning path — finish each module to unlock the next.",
    eyebrow: locale === "de" ? "MODUL" : locale === "id" ? "MODUL" : "MODULE",
    lessons: locale === "de" ? "Lektionen" : locale === "id" ? "pelajaran" : "lessons",
    parts: locale === "de" ? "Teile" : locale === "id" ? "bagian" : "parts",
    start: locale === "de" ? "Starten" : locale === "id" ? "Mulai" : "Start",
    resume: locale === "de" ? "Fortsetzen" : locale === "id" ? "Lanjutkan" : "Resume",
    review: locale === "de" ? "Wiederholen" : locale === "id" ? "Tinjau ulang" : "Review",
    lockedCta: locale === "de" ? "Gesperrt" : locale === "id" ? "Terkunci" : "Locked",
  };
  return (
    <div className="page cv-page">
      <div className="cv-list-head">
        <h1>{s.head}</h1>
        <p className="cv-list-sub">{s.sub}</p>
      </div>
      <div className="course-grid cv-modules-grid">
        {cur.map((mod, idx) => {
          const status = lp.moduleStatus(idx);
          const { done, total } = lp.moduleCounts(mod);
          const pct = lp.modulePct(mod);
          const locked = status === "locked";
          const isDone = status === "done";
          const isCurrent = status === "current";
          const subCount = (mod.subModules || []).length;
          const cta = isDone ? s.review : isCurrent ? s.resume : locked ? s.lockedCta : s.start;
          return (
            <button
              key={mod.id}
              className={"course-card mod-as-course" + (locked ? " is-locked" : "") + (isCurrent ? " is-current" : "")}
              onClick={() => !locked && onOpenModule(mod.id)}
              disabled={locked}>
              <div className="course-cover" style={{ background: "var(--squid-ink)" }}>
                {mod.thumb && (
                  <img src={mod.thumb} alt="" loading="lazy"
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: locked ? 0.7 : 1 }} />
                )}
                <div className="course-pillar-tag" style={{ background: "rgba(255,255,255,0.92)", color: "var(--squid-ink)", zIndex: 1 }}>
                  {s.eyebrow} {mod.num}
                </div>
                {!locked && pct > 0 && pct < 1 && (
                  <div className="course-cover-prog" style={{ zIndex: 1 }}>
                    <div className="cp-bar light"><div style={{ width: `${pct * 100}%` }} /></div>
                  </div>
                )}
                {isDone && (
                  <div className="course-tag course-tag-done" style={{ zIndex: 1 }}>
                    <Icon name="check" size={11} /> {locale === "de" ? "Abgeschlossen" : locale === "id" ? "Selesai" : "Complete"}
                  </div>
                )}
                {isCurrent && (
                  <div className="course-tag course-tag-progress" style={{ zIndex: 1 }}>
                    <span className="course-tag-dot" /> {locale === "de" ? "Läuft" : locale === "id" ? "Berlangsung" : "In Progress"}
                  </div>
                )}
                {locked && (
                  <div className="course-tag course-tag-locked" style={{ zIndex: 1 }}>
                    <Icon name="lock" size={11} /> {locale === "de" ? "Gesperrt" : locale === "id" ? "Terkunci" : "Locked"}
                  </div>
                )}
              </div>
              <div className="course-body">
                <div className="course-title">{mod.title[locale] || mod.title.en}</div>
                {mod.intro && <div className="subtle course-desc">{mod.intro[locale] || mod.intro.en}</div>}
                <div className="course-meta">
                  <span className="course-meta-item"><Icon name="layers" size={12} /> {total} {s.lessons}</span>
                  {subCount > 0 && <><span className="course-dot" /><span className="course-meta-item"><Icon name="book-open" size={12} /> {subCount} {s.parts}</span></>}
                  <span className="course-dot" />
                  <span className="course-meta-item">{done} / {total}</span>
                </div>
                <div className="course-footer">
                  <span className={"course-cta " + (isCurrent || isDone ? "on" : "")}>
                    {cta} <Icon name={locked ? "lock" : "arrow-right"} size={12} />
                  </span>
                </div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ═══ MODULE DETAIL ═══
function CurriculumModuleDetail({ moduleId, locale, onBack, onOpenLesson, onOpenSubModule, onOpenModuleById }) {
  const lp = window.useLessonProgress();
  const cur = window.CURRICULUM || [];
  const modIdx = Math.max(0, cur.findIndex(m => m.id === moduleId));
  const mod = cur[modIdx] || cur[0];
  const status = lp.moduleStatus(modIdx);
  const moduleLocked = status === "locked";
  const { done, total } = lp.moduleCounts(mod);
  const pct = lp.modulePct(mod);
  const directDone = lp.directDone(mod);
  const prev = modIdx > 0 ? cur[modIdx - 1] : null;
  const next = modIdx < cur.length - 1 ? cur[modIdx + 1] : null;

  const s = {
    eyebrow: locale === "de" ? "MODUL" : locale === "id" ? "MODUL" : "MODULE",
    introHead: locale === "de" ? "Einführung" : locale === "id" ? "Pendahuluan" : "Introduction",
    startHere: locale === "de" ? "Hier starten" : locale === "id" ? "Mulai di sini" : "Start here",
    parts: locale === "de" ? "Modul-Teile" : locale === "id" ? "Bagian modul" : "Module parts",
    partsSub: locale === "de" ? "Schließe den Modulinhalt oben ab, um die Teile freizuschalten."
      : locale === "id" ? "Selesaikan konten modul di atas untuk membuka bagian-bagian."
      : "Finish the module content above to unlock these parts.",
    lessons: locale === "de" ? "Lektionen" : locale === "id" ? "pelajaran" : "lessons",
    lessonsOnly: locale === "de" ? "Lektionen" : locale === "id" ? "Pelajaran" : "Lessons",
    locked: locale === "de" ? "Schließe das vorherige Modul ab, um freizuschalten" : locale === "id" ? "Selesaikan modul sebelumnya untuk membuka" : "Finish the previous module to unlock",
    backTo: locale === "de" ? "Module" : locale === "id" ? "Modul" : "Modules",
    complete: locale === "de" ? "abgeschlossen" : locale === "id" ? "selesai" : "complete",
    start: locale === "de" ? "Modul starten" : locale === "id" ? "Mulai modul" : "Start module",
    resume: locale === "de" ? "Fortsetzen" : locale === "id" ? "Lanjutkan" : "Resume",
    review: locale === "de" ? "Wiederholen" : locale === "id" ? "Tinjau ulang" : "Review",
  };

  const directEntries = (mod.directLessons || []).map((lesson, li) => ({ lesson, subModule: null, subIdx: -1, lessonIdx: li }));
  const hasSubs = (mod.subModules || []).length > 0;
  // Shape: A = single flat lesson, B = multiple flat lessons, C = has sub-modules
  const shape = hasSubs ? "C" : (mod.directLessons || []).length > 1 ? "B" : "A";
  const learnHere = locale === "de" ? "Was dieses Modul abdeckt" : locale === "id" ? "Yang dibahas di modul ini" : "What this module covers";
  const outcomes = mod.outcomes ? (mod.outcomes[locale] || mod.outcomes.en) : [];
  const firstUnfinished = lp.firstUnfinished(mod);
  const continueLab = locale === "de" ? "Weitermachen" : locale === "id" ? "Lanjutkan" : "Continue";

  // Hero CTA: Shapes A/B resume at first unfinished. Shape C uses the smart hub resolver.
  let ctaLabel, onHeroClick;
  if (shape === "C") {
    const hub = lp.hubContinue(mod);
    ctaLabel = hub.state === "review" ? s.review : hub.state === "start" ? s.start : continueLab;
    onHeroClick = () => hub.target.subId && onOpenSubModule(mod.id, hub.target.subId);
  } else {
    ctaLabel = pct >= 1 ? s.review : pct > 0 ? s.resume : s.start;
    onHeroClick = () => firstUnfinished && onOpenLesson(firstUnfinished, mod);
  }

  return (
    <div className="page cv-page">
      <div className="player-crumbs">
        <button className="link-btn" onClick={onBack}><Icon name="chevron-left" size={12} /> {s.backTo}</button>
      </div>

      <div className="cv-detail-hero">
        {mod.thumb && <img className="cv-detail-hero-img" src={mod.thumb} alt="" loading="lazy" />}
        <div className="cv-detail-hero-dim" />
        <div className="cv-detail-hero-content">
          <div className="cv-detail-hero-top">
            <span className="cv-detail-eyebrow">{s.eyebrow} {mod.num}</span>
            <CvStatusPill status={status} locale={locale} />
          </div>
          <h1 className="cv-detail-title">{mod.title[locale] || mod.title.en}</h1>
          <div className="cv-detail-hero-bottom">
            <div className="cv-detail-stats">
              <span><Icon name="layers" size={14} /> {total} {s.lessons}</span>
              {hasSubs && <span><Icon name="book-open" size={14} /> {mod.subModules.length} {s.parts}</span>}
              {pct > 0 && <span className="cv-detail-pct">{Math.round(pct * 100)}% {s.complete}</span>}
            </div>
            {!moduleLocked && (
              <button className="btn btn-primary cv-hero-cta" onClick={onHeroClick}>
                {ctaLabel} <Icon name="arrow-right" size={14} />
              </button>
            )}
          </div>
        </div>
        {/* Progress bar ON the banner, pinned to the bottom edge */}
        {pct > 0 && pct < 1 && (
          <div className="cv-detail-track cv-detail-track-on"><div className="cv-detail-fill" style={{ width: `${pct * 100}%` }} /></div>
        )}
      </div>

      {moduleLocked ? (
        <div className="cv-locked-banner"><Icon name="lock" size={16} /> {s.locked}</div>
      ) : (
        <>
          {/* Introduction + What this module covers — pre-nested style */}
          {(mod.intro || outcomes.length > 0) && (
            <section className="md-section">
              {mod.intro && (
                <>
                  <h2 className="md-h2">{s.introHead}</h2>
                  <p className="md-intro">{mod.intro[locale] || mod.intro.en}</p>
                </>
              )}
              {outcomes.length > 0 && (
                <>
                  <h2 className="md-h2 md-h2-covers">{learnHere}</h2>
                  <ul className="md-outcomes">
                    {outcomes.map((o, i) => (
                      <li key={i} className="md-outcome">
                        <div className="md-outcome-pin"><Icon name="check" size={13} /></div>
                        <div>{o}</div>
                      </li>
                    ))}
                  </ul>
                </>
              )}
            </section>
          )}

          {/* Shape B — flat module with multiple lessons: show the lesson list */}
          {shape === "B" && (
            <section className="cv-section">
              <h2 className="cv-h2">{s.lessonsOnly}</h2>
              <div className="cv-direct-lessons">
                {directEntries.map((entry) => (
                  <LessonRow key={entry.lesson.id} entry={entry} locale={locale} lp={lp} isLocked={false} onOpen={(e) => onOpenLesson(e, mod)} />
                ))}
              </div>
            </section>
          )}

          {/* Shape C — hub: sub-module cards (the single direct lesson is reached via the hero button) */}
          {shape === "C" && (
            <section className="cv-section">
              <h2 className="cv-h2">{s.parts}</h2>
              <div className="cv-subcards">
                {mod.subModules.map((sm, si) => {
                  const subStatus = lp.subStatus(mod, si);
                  const subLocked = subStatus === "locked";
                  const { done: sDone, total: sTotal } = lp.subModuleCounts(sm);
                  const sPct = sTotal ? sDone / sTotal : 0;
                  return (
                    <button
                      key={sm.id}
                      className={"cv-subcard" + (subLocked ? " is-locked" : "")}
                      onClick={() => !subLocked && onOpenSubModule(mod.id, sm.id)}
                      disabled={subLocked}>
                      <div className="cv-subcard-ic">
                        {subLocked ? <Icon name="lock" size={16} /> : <Icon name={subModuleIcon(sm)} size={18} />}
                      </div>
                      <div className="cv-subcard-body">
                        <div className="cv-subcard-top">
                          <span className="cv-subcard-num">{sm.num}</span>
                          <CvStatusPill status={subStatus} locale={locale} />
                        </div>
                        <div className="cv-subcard-title">{sm.title[locale] || sm.title.en}</div>
                        <div className="cv-subcard-meta">
                          <span><Icon name="layers" size={12} /> {sTotal} {s.lessons}</span>
                          {sPct > 0 && <span className="cv-subcard-prog">{sDone}/{sTotal} {s.complete}</span>}
                        </div>
                        {sPct > 0 && sPct < 1 && (
                          <div className="cv-subcard-track"><div className="cv-subcard-fill" style={{ width: `${sPct * 100}%` }} /></div>
                        )}
                      </div>
                      {!subLocked && <Icon name="chevron-right" size={18} className="cv-subcard-chev" />}
                    </button>
                  );
                })}
              </div>
            </section>
          )}
        </>
      )}

      <div className="cv-modnav">
        {prev ? (
          <button className="cv-modnav-btn" onClick={() => onOpenModuleById(prev.id)}>
            <Icon name="chevron-left" size={14} />
            <span><span className="cv-modnav-lab">{locale === "de" ? "Vorheriges" : locale === "id" ? "Sebelumnya" : "Previous"}</span><span className="cv-modnav-title">{prev.title[locale] || prev.title.en}</span></span>
          </button>
        ) : <span />}
        {next ? (
          <button className="cv-modnav-btn cv-modnav-next" onClick={() => onOpenModuleById(next.id)}>
            <span><span className="cv-modnav-lab">{locale === "de" ? "Nächstes" : locale === "id" ? "Berikutnya" : "Next"}</span><span className="cv-modnav-title">{next.title[locale] || next.title.en}</span></span>
            <Icon name="chevron-right" size={14} />
          </button>
        ) : <span />}
      </div>
    </div>
  );
}

// ═══ SUB-MODULE DETAIL ═══
function SubModuleDetail({ moduleId, subModuleId, locale, onBack, onOpenLesson }) {
  const lp = window.useLessonProgress();
  const cur = window.CURRICULUM || [];
  const mod = cur.find(m => m.id === moduleId) || cur[0];
  const subIdx = (mod.subModules || []).findIndex(s => s.id === subModuleId);
  const sm = mod.subModules[subIdx];
  const { done, total } = lp.subModuleCounts(sm);
  const pct = total ? done / total : 0;

  const s = {
    backTo: (mod.title[locale] || mod.title.en),
    eyebrow: locale === "de" ? "TEIL" : locale === "id" ? "BAGIAN" : "PART",
    lessons: locale === "de" ? "Lektionen" : locale === "id" ? "pelajaran" : "lessons",
    start: locale === "de" ? "Teil starten" : locale === "id" ? "Mulai bagian" : "Start part",
    resume: locale === "de" ? "Weitermachen" : locale === "id" ? "Lanjutkan" : "Resume",
    review: locale === "de" ? "Erneut ansehen" : locale === "id" ? "Tinjau ulang" : "Review",
    complete: locale === "de" ? "abgeschlossen" : locale === "id" ? "selesai" : "complete",
    contents: locale === "de" ? "Lektionen in diesem Teil" : locale === "id" ? "Pelajaran di bagian ini" : "Lessons in this part",
    introHead: locale === "de" ? "Einf\u00FChrung" : locale === "id" ? "Pendahuluan" : "Introduction",
    learnHere: locale === "de" ? "Was dieser Teil abdeckt" : locale === "id" ? "Yang dibahas di bagian ini" : "What this part covers",
  };

  const entries = sm.lessons.map((lesson, li) => ({ lesson, subModule: sm, subIdx, lessonIdx: li }));
  const firstUnfinished = entries.find(e => !lp.isDone(e.lesson.id)) || entries[0];
  const ctaLabel = pct >= 1 ? s.review : pct > 0 ? s.resume : s.start;
  const subOutcomes = sm.outcomes ? (sm.outcomes[locale] || sm.outcomes.en) : [];

  return (
    <div className="page cv-page">
      <div className="player-crumbs">
        <button className="link-btn" onClick={onBack}><Icon name="chevron-left" size={12} /> {s.backTo}</button>
      </div>

      <div className="cv-detail-hero cv-detail-hero-sub">
        {(sm.thumb || mod.thumb) && <img className="cv-detail-hero-img" src={sm.thumb || mod.thumb} alt="" loading="lazy" />}
        <div className="cv-detail-hero-dim" />
        <div className="cv-detail-hero-content">
          <div className="cv-detail-hero-top">
            <span className="cv-detail-eyebrow">{s.eyebrow} {sm.num}</span>
            {pct >= 1 && <CvStatusPill status="done" locale={locale} />}
            {pct > 0 && pct < 1 && <CvStatusPill status="current" locale={locale} />}
          </div>
          <h1 className="cv-detail-title">{sm.title[locale] || sm.title.en}</h1>
          <div className="cv-detail-hero-bottom">
            <div className="cv-detail-stats">
              <span><Icon name="layers" size={14} /> {total} {s.lessons}</span>
              {pct > 0 && <span className="cv-detail-pct">{Math.round(pct * 100)}% {s.complete}</span>}
            </div>
            <button className="btn btn-primary cv-hero-cta" onClick={() => firstUnfinished && onOpenLesson(firstUnfinished, mod)}>
              {ctaLabel} <Icon name="arrow-right" size={14} />
            </button>
          </div>
        </div>
        {/* Progress bar ON the banner, pinned to the bottom edge */}
        {pct > 0 && pct < 1 && (
          <div className="cv-detail-track cv-detail-track-on"><div className="cv-detail-fill" style={{ width: `${pct * 100}%` }} /></div>
        )}
      </div>

      {/* Introduction + What this part covers — pre-nested style */}
      {(sm.intro || subOutcomes.length > 0) && (
        <section className="md-section">
          {sm.intro && (
            <>
              <h2 className="md-h2">{s.introHead}</h2>
              <p className="md-intro">{sm.intro[locale] || sm.intro.en}</p>
            </>
          )}
          {subOutcomes.length > 0 && (
            <>
              <h2 className="md-h2 md-h2-covers">{s.learnHere}</h2>
              <ul className="md-outcomes">
                {subOutcomes.map((o, i) => (
                  <li key={i} className="md-outcome">
                    <div className="md-outcome-pin"><Icon name="check" size={13} /></div>
                    <div>{o}</div>
                  </li>
                ))}
              </ul>
            </>
          )}
        </section>
      )}

      <section className="cv-section">
        <h2 className="cv-h2">{s.contents}</h2>
        <div className="cv-direct-lessons">
          {entries.map((entry) => (
            <LessonRow key={entry.lesson.id} entry={entry} locale={locale} lp={lp} isLocked={false} onOpen={(e) => onOpenLesson(e, mod)} />
          ))}
        </div>
      </section>
    </div>
  );
}

window.CurriculumModulesList = CurriculumModulesList;
window.CurriculumModuleDetail = CurriculumModuleDetail;
window.SubModuleDetail = SubModuleDetail;
window.LESSON_TYPE_META = LESSON_TYPE_META;
window.subModuleIcon = subModuleIcon;