// ─────────────────────────────────────────────────────────
// ChefVerse · Dashboard
// ─────────────────────────────────────────────────────────
const { useMemo: useMemoDash } = React;

function Dashboard({ locale, profile, onRoute, onOpenCourse, onOpenBrief, onOpenModule, onReplayTour }) {
  const v2 = true;
  const t = window.I18N[locale];
  const td = t.dash;
  const progress = window.useCourseProgress();
  const enrolled = window.COURSES.filter(c => c.enrolled);
  // Show the first course that isn't 100% in the live progress store
  const nextCourse = enrolled.find(c => progress.courseProgress(c.id) < 1) || enrolled[0];
  // V2: surface the flat module list of the (single) Fundamentals course
  const v2Course = v2 ? (window.COURSES.find(c => c.id === "fundamentals") || enrolled[0] || window.COURSES[0]) : null;
  const v2Modules = v2 && v2Course ? ((window.COURSE_MODULES_BY_ID && window.COURSE_MODULES_BY_ID[v2Course.id]) || []) : [];
  const liveBriefs = window.BRIEFS.filter(b => b.market.includes(locale)).slice(0, 3);
  const greeting = useMemoDash(() => {
    const h = new Date().getHours();
    if (h < 12) return locale === "de" ? "Guten Morgen" : locale === "id" ? "Selamat pagi" : "Good morning";
    if (h < 18) return locale === "de" ? "Guten Tag" : locale === "id" ? "Selamat siang" : "Good afternoon";
    return locale === "de" ? "Guten Abend" : locale === "id" ? "Selamat malam" : "Good evening";
  }, [locale]);

  return (
    <div className="page page-dash">
      {/* Hero band */}
      <div className="dash-hero layout-balanced">
        <div className="dash-hero-left">
          <span className="eyebrow">{td.hi.toUpperCase()} · {profile.initials}</span>
          <h1 className="dash-greet">{greeting}, {profile.name.split(" ")[0]}.</h1>
          <p className="dash-sub display-italic">{td.brand_voice}</p>
          <div className="dash-actions">
            <button className="btn btn-primary" onClick={() => onOpenCourse(nextCourse?.id)}>
              <Icon name="play" size={14} /> {td.continue}
            </button>
            <button className="btn btn-outline" onClick={() => onRoute("briefs")}>
              <Icon name="briefcase" size={14} /> {td.open_briefs}
            </button>
            {onReplayTour && (
              <button className="btn btn-ghost" onClick={onReplayTour}>
                <Icon name="play" size={14} /> {locale === "de" ? "Guide ansehen" : locale === "id" ? "Lihat panduan" : "Watch the guide"}
              </button>
            )}
          </div>
        </div>
        <div className="dash-hero-right">
          <div className="dash-streak">
            <div className="streak-icon"><Icon name="flame" size={22} /></div>
            <div>
              <div className="streak-num">{profile.streak}</div>
              <div className="streak-lab display-italic">{td.streak.toLowerCase()}</div>
            </div>
          </div>
        </div>
      </div>

      {/* Stat row */}
      <div className="stats">
        <Stat label={td.modules_done} val={profile.modules_done} delta="+2 this week" up />
        <Stat label={td.briefs_won} val={profile.briefs_won} delta={profile.briefs_won > 0 ? "+1 this month" : "Pick your first"} up={profile.briefs_won > 0} />
        <Stat label={td.avg_score} val={profile.avg_score > 0 ? profile.avg_score.toFixed(1) : "—"} delta={profile.avg_score > 0 ? "/ 5.0" : "no submissions yet"} muted={profile.avg_score === 0} />
        <Stat label={td.streak} val={profile.streak} delta="day streak" up />
      </div>

      {/* Continue learning + live briefs row */}
      <div className="dash-row">
        <div className="dash-col-main">
          <div className="section-h">
            <h2>{v2 ? (locale === "de" ? "Als Nächstes auf deinem Pfad" : locale === "id" ? "Berikutnya di jalurmu" : "Next up in your path") : td.next_up}</h2>
            <button className="link-btn" onClick={() => onRoute("courses")}>{td.view_all} <Icon name="arrow-right" size={12} /></button>
          </div>

          {v2 ? (() => {
            // V2 · "Next up in your path" — same shape as V1 continue-card
            // but the unit of work is a MODULE, not a course.
            const total = v2Modules.length;
            // Featured module: current → first not-done → first
            let featuredIdx = v2Course.enrolled
              ? v2Modules.findIndex((_, i) => progress.moduleStatus(v2Course.id, i) === "current")
              : 0;
            if (featuredIdx < 0) {
              featuredIdx = v2Modules.findIndex((_, i) => progress.moduleStatus(v2Course.id, i) !== "done");
            }
            if (featuredIdx < 0) featuredIdx = 0;
            const fm = v2Modules[featuredIdx];
            const fPct = v2Course.enrolled ? progress.modulePct(v2Course.id, featuredIdx) : 0;
            const fCover = (window.MODULE_COVERS && window.MODULE_COVERS[featuredIdx]) || v2Course.cover;
            // Next two modules after the featured one
            const upNext = [];
            for (let i = featuredIdx + 1; i < v2Modules.length && upNext.length < 2; i++) upNext.push(i);
            return (
              <>
                {fm && (
                  <button className="continue-card" onClick={() => onOpenModule && onOpenModule(v2Course.id, featuredIdx)}>
                    <div className="continue-cover" style={{ background: fCover }}>
                      <CoverImage src={window.PHOTOS && window.PHOTOS.moduleCoverFor(v2Course.id, featuredIdx)} dim={0.35} />
                      <div className="continue-play"><Icon name="play" size={20} style={{ marginLeft: 2 }} /></div>
                      <div className="continue-cc">
                        <Icon name="captions" size={11} />
                        <span>CC · {t.locale.split(" ")[0]}</span>
                      </div>
                    </div>
                    <div className="continue-body">
                      <div className="continue-meta">
                        <span className="eyebrow">{locale === "de" ? "Modul" : locale === "id" ? "Modul" : "Module"} {featuredIdx + 1} {locale === "de" ? "von" : locale === "id" ? "dari" : "of"} {total}</span>
                      </div>
                      <div className="continue-title">{fm.title[locale]}</div>
                      <div className="continue-course">{v2Course.title[locale]} · {v2Course.instructor}</div>
                      <div className="continue-progress">
                        <div className="cp-bar"><div style={{ width: `${fPct * 100}%` }} /></div>
                        <span className="subtle">{Math.round(fPct * 100)}%</span>
                      </div>
                    </div>
                    <div className="continue-go">
                      <Icon name="arrow-right" size={18} />
                    </div>
                  </button>
                )}
                {upNext.length > 0 && (
                  <div className="dash-mini-grid">
                    {upNext.map(i => {
                      const um = v2Modules[i];
                      const uPct = v2Course.enrolled ? progress.modulePct(v2Course.id, i) : 0;
                      const { total: uTotal } = v2Course.enrolled
                        ? progress.moduleChaptersDone(v2Course.id, i)
                        : { total: progress.chapterCount(v2Course.id, i) };
                      const uMin = Math.floor((um.dur || 360) / 60);
                      const modImg = window.PHOTOS && window.PHOTOS.moduleCoverFor(v2Course.id, i);
                      return (
                        <button key={i} className="mini-course" onClick={() => onOpenModule && onOpenModule(v2Course.id, i)}>
                          <img className="mini-cover" src={modImg} alt="" />
                          <div className="mini-body">
                            <div className="mini-title">{um.title[locale]}</div>
                            <div className="subtle">{uTotal} {locale === "de" ? "Kapitel" : locale === "id" ? "bab" : "chapters"} · {uMin} {locale === "de" ? "Min" : locale === "id" ? "menit" : "min"}</div>
                            <div className="mini-bar"><div style={{ width: `${uPct * 100}%` }} /></div>
                          </div>
                        </button>
                      );
                    })}
                  </div>
                )}
              </>
            );
          })() : (
            <>
              {/* Continue card */}
              {nextCourse && (
                <button className="continue-card" onClick={() => onOpenCourse(nextCourse.id)}>
              <div className="continue-cover" style={{ background: nextCourse.cover }}>
                <CoverImage src={window.PHOTOS && window.PHOTOS.courseCoverFor(nextCourse.id)} dim={0.35} />
                <div className="continue-play"><Icon name="play" size={20} style={{ marginLeft: 2 }} /></div>
                <div className="continue-cc">
                  <Icon name="captions" size={11} />
                  <span>CC · {t.locale.split(" ")[0]}</span>
                </div>
              </div>
              <div className="continue-body">
                <div className="continue-meta">
                  <span className="eyebrow">Module {window.ACTIVE_MODULE.index + 1} of {window.ACTIVE_MODULE.total}</span>
                </div>
                <div className="continue-title">{window.ACTIVE_MODULE.title[locale]}</div>
                <div className="continue-course">{nextCourse.title[locale]} · {nextCourse.instructor}</div>
                <div className="continue-progress">
                  <div className="cp-bar"><div style={{ width: `${progress.courseProgress(nextCourse.id) * 100}%` }} /></div>
                  <span className="subtle">{Math.round(progress.courseProgress(nextCourse.id) * 100)}%</span>
                </div>
              </div>
              <div className="continue-go">
                <Icon name="arrow-right" size={18} />
              </div>
            </button>
          )}

          {/* Other enrolled */}
          <div className="dash-mini-grid">
            {enrolled.filter(c => c.id !== nextCourse?.id).map(c => (
              <button key={c.id} className="mini-course" onClick={() => onOpenCourse(c.id)}>
                <div className="mini-cover" style={{ background: c.cover }} />
                <div className="mini-body">
                  <div className="mini-title">{c.title[locale]}</div>
                  <div className="subtle">{c.modules} {t.course.modules} · {c.hours} {t.course.hours}</div>
                  <div className="mini-bar"><div style={{ width: `${progress.courseProgress(c.id) * 100}%` }} /></div>
                </div>
              </button>
            ))}
          </div>
            </>
          )}
        </div>

        <div className="dash-col-side">
          <div className="section-h">
            <h2>{td.live_briefs}</h2>
            <button className="link-btn" onClick={() => onRoute("briefs")}>{td.view_all} <Icon name="arrow-right" size={12} /></button>
          </div>
          <div className="brief-mini-list">
            {liveBriefs.map(b => {
              const pillar = window.PILLARS[b.pillar];
              return (
                <button key={b.id} className="brief-mini" onClick={() => onOpenBrief(b.id)}>
                  <div className="brief-mini-stripe" style={{ background: pillar.color }} />
                  <div className="brief-mini-body">
                    <div className="brief-mini-brand">{b.brand}</div>
                    <div className="brief-mini-title">{b.title[locale]}</div>
                    <div className="brief-mini-meta">
                      <span className="brief-pill" style={{ background: pillar.soft, color: pillar.color }}>
                        {pillar.name[locale]}
                      </span>
                      <span className="subtle">·</span>
                      <span className="subtle"><Icon name="clock" size={11} /> {b.deadline_days}d</span>
                      <span className="brief-payout">{b.payout[locale]}</span>
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

function Stat({ label, val, delta, up, muted }) {
  return (
    <div className="stat">
      <div className="stat-lab">{label}</div>
      <div className="stat-val">{val}</div>
      <div className={"stat-delta " + (muted ? "muted" : up ? "up" : "down")}>
        {!muted && <Icon name={up ? "trending-up" : "trending-down"} size={11} />}
        <span>{delta}</span>
      </div>
    </div>
  );
}

function CommunityItem({ name, loc, message, time }) {
  const initials = name.split(" ").map(n => n[0]).join("");
  return (
    <div className="comm-item">
      <Avatar name={name} initials={initials} cls="av-sm" />
      <div className="comm-body">
        <div className="comm-line">
          <span className="comm-name">{name}</span>
          <span className="subtle">· {loc}</span>
        </div>
        <div className="subtle">{message}</div>
      </div>
      <div className="subtle comm-time">{time}</div>
    </div>
  );
}

window.Dashboard = Dashboard;