// ─────────────────────────────────────────────────────────
// ChefVerse · Training player (video + transcript + chapters + notes)
// ─────────────────────────────────────────────────────────
const { useState: useStatePl, useEffect: useEffectPl, useRef: useRefPl } = React;

function fmtTime(s) {
  const m = Math.floor(s / 60);
  const ss = String(Math.floor(s % 60)).padStart(2, "0");
  return `${m}:${ss}`;
}

function Player({ locale, courseId, moduleIdx, onBack, onOpenBriefs, onOpenModule, profile }) {
  const v2 = true;
  const t = window.I18N[locale];
  const tp = t.player;
  const course = window.COURSES.find(c => c.id === courseId) || window.COURSES[0];
  const courseModules = (window.COURSE_MODULES_BY_ID && window.COURSE_MODULES_BY_ID[course.id]) || [];
  const progress = window.useCourseProgress();
  const activeIdx = (moduleIdx == null) ? progress.firstUnlockedUnfinished(course.id) : moduleIdx;
  const courseMod = courseModules[activeIdx] || null;
  const ms = window.MOD_STRINGS ? window.MOD_STRINGS[locale] : null;
  const moduleStatus = progress.moduleStatus(course.id, activeIdx);
  const moduleLocked = moduleStatus === "locked";
  // The full demo video data (transcript, chapters) only exists for one module.
  // For any other module we re-use it as the playable content but keep the surrounding
  // chrome (title, breadcrumb, up-next) tied to the user's selected module.
  // CRITICAL: chapter count must match progress.chapterCount(courseId, moduleIdx)
  // so the auto-complete loop and the store stay in sync.
  const storeChapterCount = progress.chapterCount(course.id, activeIdx);
  const baseChapters = window.ACTIVE_MODULE.chapters; // 6 entries
  const baseDuration = window.ACTIVE_MODULE.duration;
  // Map the store's chapter count onto a chapter list of that length.
  // Always span the full duration evenly so 90% auto-complete maths works.
  const playerChapters = (() => {
    if (storeChapterCount === baseChapters.length) {
      return baseChapters;
    }
    // Synthesize an N-chapter timeline using existing labels where we can,
    // and divide the duration evenly across N slots.
    const slot = baseDuration / storeChapterCount;
    return Array.from({ length: storeChapterCount }, (_, i) => {
      // Pull the closest available source label so chapter titles still feel real
      const srcIdx = Math.min(baseChapters.length - 1, Math.floor(i * baseChapters.length / storeChapterCount));
      const src = baseChapters[srcIdx];
      return { t: i * slot, en: src.en, de: src.de, id: src.id };
    });
  })();
  const mod = {
    ...window.ACTIVE_MODULE,
    chapters: playerChapters,
    index: activeIdx,
    total: courseModules.length || window.ACTIVE_MODULE.total,
    title: courseMod ? courseMod.title : window.ACTIVE_MODULE.title,
  };
  const chapterCount = mod.chapters.length;
  const transcriptForLocale = mod.transcript[locale] || mod.transcript.en;
  const upNext = activeIdx + 1 < courseModules.length ? courseModules[activeIdx + 1] : null;
  const upNextStatus = upNext ? progress.moduleStatus(course.id, activeIdx + 1) : null;

  // Resume position: start of the first unfinished chapter
  const resumeChapterIdx = useStatePl(() => {
    for (let i = 0; i < chapterCount; i++) {
      if (!progress.isChapterDone(course.id, activeIdx, i)) return i;
    }
    return Math.max(0, chapterCount - 1);
  })[0];
  const initialTime = mod.chapters[resumeChapterIdx]?.t ?? 0;

  const [playing, setPlaying] = useStatePl(true);
  const [time, setTime] = useStatePl(initialTime);
  const [tab, setTab] = useStatePl("chapters");
  const [captionLocale, setCaptionLocale] = useStatePl(locale);
  const [speed, setSpeed] = useStatePl(1);
  const [notes, setNotes] = useStatePl([
    { t: 56, text: locale === "de" ? "Wichtig: Tellerrand-Höhe für Side-Light." : locale === "id" ? "Penting: tinggi bibir piring untuk side-light." : "Key: phone at rim height, then 10° down." },
    { t: 248, text: locale === "de" ? "3 Gerichte in einem Frame = Serie." : locale === "id" ? "3 piring dalam 1 frame = jadi seri." : "Plate 3 dishes in same frame = series." },
  ]);
  const [noteDraft, setNoteDraft] = useStatePl("");
  const transcriptRef = useRefPl(null);

  // Tick the timeline forward when playing
  useEffectPl(() => {
    if (!playing || moduleLocked) return;
    const id = setInterval(() => {
      setTime(s => Math.min(mod.duration, s + (0.5 * speed)));
    }, 500);
    return () => clearInterval(id);
  }, [playing, speed, moduleLocked]);

  // Auto-scroll transcript
  useEffectPl(() => {
    const el = transcriptRef.current;
    if (!el) return;
    const active = el.querySelector(".tr-line.active");
    if (active) active.scrollIntoView({ block: "center", behavior: "smooth" });
  }, [time, tab]);

  const currentChapterIdx = mod.chapters.reduce((acc, c, i) => time >= c.t ? i : acc, 0);
  const currentLineIdx = transcriptForLocale.reduce((acc, l, i) => time >= l.t ? i : acc, 0);
  const progressPct = (time / mod.duration) * 100;

  const seek = (sec) => { setTime(sec); };
  const addNote = () => {
    if (!noteDraft.trim()) return;
    setNotes(prev => [...prev, { t: Math.floor(time), text: noteDraft.trim() }].sort((a, b) => a.t - b.t));
    setNoteDraft("");
  };
  const removeNote = (idx) => setNotes(prev => prev.filter((_, i) => i !== idx));

  // ─── Auto-completion: a chapter is "watched" when ≥90% of its span has played
  const [toast, setToast] = useStatePl(null); // { kind: "chapter" | "module", text, sub }
  const justCompletedRef = useRefPl({}); // { [chapterIdx]: true } per render
  useEffectPl(() => {
    if (moduleLocked) return;
    for (let i = 0; i < mod.chapters.length; i++) {
      if (progress.isChapterDone(course.id, activeIdx, i)) continue;
      const start = mod.chapters[i].t;
      const end = i + 1 < mod.chapters.length ? mod.chapters[i + 1].t : mod.duration;
      const span = end - start;
      const watched = Math.min(Math.max(time - start, 0), span);
      if (span > 0 && watched / span >= 0.9 && !justCompletedRef.current[i]) {
        justCompletedRef.current[i] = true;
        progress.markChapterDone(course.id, activeIdx, i);
        // Was this the LAST chapter? → module-complete celebration
        const nowDone = progress.moduleChaptersDone(course.id, activeIdx).done + 1;
        if (nowDone >= mod.chapters.length) {
          setPlaying(false);
          setToast({
            kind: "module",
            text: ms?.toastModuleDone || "Module complete",
            sub: ms?.toastModuleSub || "Up next is unlocked.",
          });
          // Auto-advance after a beat
          if (upNext) {
            setTimeout(() => {
              if (onOpenModule) onOpenModule(course.id, activeIdx + 1);
            }, 2400);
          } else {
            setTimeout(() => setToast(null), 3000);
          }
        } else {
          setToast({
            kind: "chapter",
            text: ms?.toastChapterDone || "Chapter complete",
            sub: mod.chapters[i + 1] ? mod.chapters[i + 1][locale] : "",
          });
          setTimeout(() => setToast(null), 2200);
        }
      }
    }
  }, [time, activeIdx]);

  return (
    <div className="page page-player">
      {/* Module-complete toast (subtle) */}
      {toast && (
        <div className={"player-toast " + toast.kind}>
          <div className="player-toast-icon">
            <Icon name={toast.kind === "module" ? "award" : "check"} size={18} />
          </div>
          <div>
            <div className="player-toast-h">{toast.text}</div>
            {toast.sub && <div className="player-toast-sub display-italic">{toast.sub}</div>}
          </div>
        </div>
      )}
      {/* Player breadcrumb */}
      <div className="player-crumbs">
        <button className="link-btn" onClick={onBack}><Icon name="chevron-left" size={12} /> {course.title[locale]}</button>
        <span className="crumb-sep">/</span>
        <span className="display-italic" style={{ color: "var(--smoke)" }}>Module {mod.index + 1} {tp.transcript === "Transkript" ? "von" : tp.transcript === "Transkrip" ? "dari" : "of"} {mod.total}</span>
      </div>

      <div className="player-grid">
        {/* LEFT: video + below */}
        <div className="player-main">
          <div className="video-frame private">
            {(
              <div className="video-private-bar">
                <div className="vpb-l">
                  <Icon name="lock" size={11} />
                  <span>{locale === "de" ? "Privat · UFS-gehostet · DRM-geschützt" : locale === "id" ? "Privat · Hosting UFS · DRM-protected" : "Private · UFS-hosted · DRM-protected"}</span>
                </div>
                <div className="vpb-r">
                  <Icon name="captions" size={11} />
                  <span>3 {locale === "de" ? "Sprachen" : locale === "id" ? "bahasa" : "languages"}</span>
                </div>
              </div>
            )}
            {/* Mock video stage — animated placeholder */}
            <div className="video-stage">
              <div className="video-bg" />
              <div className="video-vignette" />
              {profile && (
                <div className="video-watermark">
                  <span>ChefVerse · {profile.name} · {profile.initials}-2026</span>
                </div>
              )}
              <div className="video-overlay-text">
                <div className="vot-eyebrow display-italic">{mod.chapters[currentChapterIdx][locale]}</div>
                <div className="vot-h">{mod.title[locale]}</div>
                <div className="vot-instructor display-italic">with {course.instructor}</div>
              </div>
              {/* Burned-in caption preview */}
              <div className="video-caption">
                <div className="vc-pill display-italic">
                  <Icon name="captions" size={10} /> {window.I18N[captionLocale].locale}
                </div>
                <div className="vc-line">
                  {(mod.transcript[captionLocale] || mod.transcript.en)[currentLineIdx]?.s || ""}
                </div>
              </div>
              {!playing && (
                <button className="video-play-big" onClick={() => setPlaying(true)}>
                  <Icon name="play" size={36} style={{ marginLeft: 4 }} />
                </button>
              )}
            </div>

            {/* Controls */}
            <div className="video-controls">
              <div className="vc-scrub" onClick={(e) => {
                const rect = e.currentTarget.getBoundingClientRect();
                const pct = (e.clientX - rect.left) / rect.width;
                seek(pct * mod.duration);
              }}>
                {/* Chapter ticks */}
                {mod.chapters.map((c, i) => (
                  <div key={i} className="vc-tick" style={{ left: `${(c.t / mod.duration) * 100}%` }} title={c[locale]} />
                ))}
                <div className="vc-track">
                  <div className="vc-progress" style={{ width: `${progressPct}%` }} />
                </div>
                <div className="vc-thumb" style={{ left: `${progressPct}%` }} />
              </div>
              <div className="vc-row">
                <div className="vc-row-l">
                  <button className="icon-btn ghost" onClick={() => seek(Math.max(0, time - 10))}><Icon name="skip-back" size={16} /></button>
                  <button className="icon-btn solid" onClick={() => setPlaying(p => !p)}>
                    <Icon name={playing ? "pause" : "play"} size={16} />
                  </button>
                  <button className="icon-btn ghost" onClick={() => seek(Math.min(mod.duration, time + 10))}><Icon name="skip-forward" size={16} /></button>
                  <span className="vc-time">{fmtTime(time)} <span style={{ color: "var(--smoke)" }}>/ {fmtTime(mod.duration)}</span></span>
                </div>
                <div className="vc-row-r">
                  <CaptionsMenu locale={captionLocale} onChange={setCaptionLocale} />
                  <SpeedMenu speed={speed} onChange={setSpeed} label={tp.speed} />
                  <button className="icon-btn ghost" title={tp.bookmark}><Icon name="bookmark" size={14} /></button>
                </div>
              </div>
            </div>
          </div>

          {/* Below video: title + actions */}
          <div className="player-meta">
            <div className="player-meta-text">
              <span className="eyebrow">MODULE {mod.index + 1} · {course.title[locale].toUpperCase()}</span>
              <h2 className="player-title">{mod.title[locale]}</h2>
              <p className="display-italic" style={{ color: "var(--smoke)", margin: "8px 0 0" }}>
                {locale === "de"
                  ? "Sechs Minuten Werkzeug für deine Küche — Licht, Winkel, und der Hero-Shot, den du heute Abend einsetzen kannst."
                  : locale === "id"
                  ? "Enam menit alat siap pakai untuk dapurmu — cahaya, sudut, dan hero shot yang bisa kamu pakai malam ini."
                  : "Six minutes of working tools for your kitchen — light, angle, and the hero shot you can use tonight."}
              </p>
              {/* Module progress strip */}
              <div className="player-progress-strip">
                <div className="player-progress-meta">
                  <span className="player-progress-num">
                    <Icon name="check-circle" size={13} />
                    {progress.moduleChaptersDone(course.id, activeIdx).done} / {mod.chapters.length} {ms?.chaptersDone || "chapters complete"}
                  </span>
                  <span className="player-progress-pct">{Math.round(progress.modulePct(course.id, activeIdx) * 100)}%</span>
                </div>
                <div className="player-progress-track">
                  <div className="player-progress-fill" style={{ width: `${progress.modulePct(course.id, activeIdx) * 100}%` }} />
                </div>
              </div>
            </div>
            <div className="player-meta-actions">
              <button className="btn btn-outline"><Icon name="bookmark-plus" size={14} /> Save</button>
            </div>
          </div>

          <div className="player-applybar">
            <Icon name="briefcase" size={16} style={{ color: "var(--ufs-orange)" }} />
            <div>
              <div className="applybar-h">{tp.brief_cta}</div>
              <div className="subtle">Knorr Professional · 30s broth ritual · {window.BRIEFS[0].payout[locale]} payout</div>
            </div>
            <button className="btn btn-primary" onClick={onOpenBriefs}>
              {t.briefs.details} <Icon name="arrow-right" size={12} />
            </button>
          </div>

          {/* Learning Path — full module list (hidden in v2 flat mode) */}
          {!v2 && courseModules.length > 0 && ms && (
            <div className="player-path">
              <h3 className="player-path-h">{locale === "de" ? "Lernpfad" : locale === "id" ? "Jalur belajar" : "Learning path"}</h3>
              <div className="player-path-list">
                {courseModules.map((m, i) => {
                  const status = progress.moduleStatus(course.id, i);
                  const isActive = i === activeIdx;
                  const isDone = status === "completed";
                  const isLocked = status === "locked";
                  const isNext = status === "next";
                  const chCount = progress.chapterCount(course.id, i);
                  const chDone = progress.moduleChaptersDone(course.id, i).done;
                  const pct = chCount > 0 ? (chDone / chCount) * 100 : 0;
                  const minutes = Math.floor(m.dur / 60);
                  return (
                    <button
                      key={m.id}
                      className={"path-item " + (isActive ? "is-active " : "") + (isDone ? "is-done " : "") + (isLocked ? "is-locked " : "") + (isNext ? "is-next " : "")}
                      onClick={() => !isLocked && onOpenModule && onOpenModule(course.id, i)}
                      disabled={isLocked}
                    >
                      <div className="path-num">
                        {isDone ? <Icon name="check" size={14} /> : isLocked ? <Icon name="lock" size={12} /> : String(i + 1).padStart(2, "0")}
                      </div>
                      <div className="path-body">
                        <div className="path-title">{m.title[locale]}</div>
                        <div className="path-meta">
                          <span><Icon name="clock" size={11} /> {minutes} {ms.minutes}</span>
                          <span className="path-meta-dot">·</span>
                          <span>{chDone} / {chCount} {locale === "de" ? "Kapitel" : locale === "id" ? "bab" : "chapters"}</span>
                          {isActive && !isDone && (
                            <span className="path-pill in-progress">{locale === "de" ? "LÄUFT" : locale === "id" ? "BERLANGSUNG" : "IN PROGRESS"}</span>
                          )}
                          {isDone && !isActive && (
                            <span className="path-pill done"><Icon name="check" size={10} /> {locale === "de" ? "FERTIG" : locale === "id" ? "SELESAI" : "DONE"}</span>
                          )}
                          {isNext && !isActive && (
                            <span className="path-pill next"><Icon name="arrow-right" size={10} /> {ms.nextLab.toUpperCase()}</span>
                          )}
                          {isLocked && (
                            <span className="path-pill locked"><Icon name="lock" size={10} /> {ms.lockedLab.toUpperCase()}</span>
                          )}
                        </div>
                        <div className="path-track">
                          <div className={"path-fill " + (isDone ? "done " : "") + (isActive ? "active " : "")} style={{ width: `${pct}%` }} />
                        </div>
                      </div>
                      {!isLocked && <Icon name="chevron-right" size={14} style={{ color: "var(--smoke)", flexShrink: 0 }} />}
                    </button>
                  );
                })}
              </div>
            </div>
          )}
        </div>

        {/* RIGHT: panel with tabs */}
        <div className="player-side">
          <div className="player-side-card">
          <div className="side-tabs">
            {[
              { id: "chapters", label: tp.chapters, icon: "list-video" },
              { id: "notes", label: tp.notes, icon: "edit-3" },
              { id: "transcript", label: tp.transcript, icon: "file-text" },
            ].map(b => (
              <button key={b.id} className={"side-tab " + (tab === b.id ? "on" : "")} onClick={() => setTab(b.id)}>
                <Icon name={b.icon} size={13} />
                <span>{b.label}</span>
              </button>
            ))}
          </div>

          <div className="side-content">
            {tab === "transcript" && (
              <div className="tr-scroll" ref={transcriptRef}>
                <div className="tr-list">
                  {transcriptForLocale.map((line, i) => (
                    <button key={i} className={"tr-line " + (i === currentLineIdx ? "active" : "")} onClick={() => seek(line.t)}>
                      <span className="tr-time">{fmtTime(line.t)}</span>
                      <span className="tr-text">{line.s}</span>
                    </button>
                  ))}
                </div>
              </div>
            )}

            {tab === "chapters" && (
              <div className="ch-list">
                {mod.chapters.map((c, i) => {
                  const isDone = progress.isChapterDone(course.id, activeIdx, i);
                  const isCurrent = currentChapterIdx === i && !isDone;
                  return (
                    <button key={i} className={"ch-item " + (isCurrent ? "on" : "") + (isDone ? " done" : "")} onClick={() => seek(c.t)}>
                      <div className="ch-num">
                        {isDone ? <Icon name="check" size={12} /> : isCurrent ? <Icon name="play" size={10} style={{ marginLeft: 2 }} /> : i + 1}
                      </div>
                      <div className="ch-body">
                        <div className="ch-title">{c[locale]}</div>
                        <div className="subtle">{fmtTime(c.t)}</div>
                      </div>
                    </button>
                  );
                })}
              </div>
            )}

            {tab === "notes" && (
              <div className="notes-panel">
                <div className="note-input">
                  <Icon name="edit-3" size={13} style={{ color: "var(--smoke)", flexShrink: 0 }} />
                  <textarea
                    value={noteDraft}
                    onChange={e => setNoteDraft(e.target.value)}
                    placeholder={`${tp.add_note} (${fmtTime(time)})`}
                    rows={2}
                  />
                  <button className="btn btn-primary btn-sm" onClick={addNote} disabled={!noteDraft.trim()}>
                    <Icon name="plus" size={12} /> Save
                  </button>
                </div>

                <div className="note-saved-h">
                  <span className="eyebrow">{tp.saved_notes.toUpperCase()}</span>
                  <span className="subtle">{notes.length}</span>
                </div>
                <div className="notes-list">
                  {notes.map((n, i) => (
                    <div key={i} className="note">
                      <button className="note-time" onClick={() => seek(n.t)}>{fmtTime(n.t)}</button>
                      <div className="note-text">{n.text}</div>
                      <button className="note-x" onClick={() => removeNote(i)}><Icon name="x" size={12} /></button>
                    </div>
                  ))}
                </div>
              </div>
            )}

          </div>
        </div>

        {/* RESOURCES — under the tabbed box, in the right column */}
        <div className="player-resources">
          <div className="player-resources-head">
            <span className="eyebrow">{tp.resources?.toUpperCase() || "RESOURCES"}</span>
          </div>
          <div className="res-list">
            <ResRow icon="file-text" name="Module 4 — recap.pdf" sub="3 pages · 480 KB" />
            <ResRow icon="file-text" name="Lighting cheat-sheet.pdf" sub="1 page · 220 KB" />
            <ResRow icon="upload" name="Practice brief — top-down sauce" sub="30s · vertical · CC required" cta="Open" />
            <ResRow icon="external-link" name="UFS Future Menus 2026 (extract)" sub="Borderless brunch chapter" cta="Open" />
          </div>
        </div>
        </div>

      </div>
    </div>
  );
}

function CaptionsMenu({ locale, onChange }) {
  const [open, setOpen] = useStatePl(false);
  const ref = useRefPl(null);
  useEffectPl(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  return (
    <div className="cc-menu" ref={ref}>
      <button className="vc-btn" onClick={() => setOpen(!open)}>
        <Icon name="captions" size={14} />
        <span>CC · {window.I18N[locale].flag}</span>
        <Icon name="chevron-up" size={11} />
      </button>
      {open && (
        <div className="cc-pop">
          {["en", "de", "id"].map(k => (
            <button key={k} className={"cc-opt " + (locale === k ? "on" : "")} onClick={() => { onChange(k); setOpen(false); }}>
              <span className="flag">{window.I18N[k].flag}</span>
              <span>{window.I18N[k].locale}</span>
              {locale === k && <Icon name="check" size={12} style={{ color: "var(--ufs-orange)", marginLeft: "auto" }} />}
            </button>
          ))}
          <button className="cc-opt" onClick={() => { onChange(null); setOpen(false); }}>
            <span style={{ width: 18 }} />
            <span>Off</span>
          </button>
        </div>
      )}
    </div>
  );
}

function SpeedMenu({ speed, onChange, label }) {
  const [open, setOpen] = useStatePl(false);
  const ref = useRefPl(null);
  useEffectPl(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  return (
    <div className="cc-menu" ref={ref}>
      <button className="vc-btn" onClick={() => setOpen(!open)}>
        <span>{speed}×</span>
        <Icon name="chevron-up" size={11} />
      </button>
      {open && (
        <div className="cc-pop sm">
          {[0.75, 1, 1.25, 1.5, 2].map(s => (
            <button key={s} className={"cc-opt " + (speed === s ? "on" : "")} onClick={() => { onChange(s); setOpen(false); }}>
              <span>{s}×</span>
              {speed === s && <Icon name="check" size={12} style={{ color: "var(--ufs-orange)", marginLeft: "auto" }} />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function ResRow({ icon, name, sub, cta = "Download" }) {
  return (
    <div className="res-row">
      <div className="res-icon"><Icon name={icon} size={14} /></div>
      <div className="res-body">
        <div className="res-name">{name}</div>
        <div className="subtle">{sub}</div>
      </div>
      <button className="btn btn-ghost btn-sm">{cta}</button>
    </div>
  );
}

window.Player = Player;