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

function Dashboard({ locale, profile, onRoute, onOpenCourse, onOpenBrief, onOpenModule, onOpenCvModule, onOpenCvStep, onReplayTour }) {
  const v2 = true;
  const t = window.I18N[locale];
  const td = t.dash;
  const progress = window.useCourseProgress();
  // Nested curriculum (V3) — drives the dashboard Modules section
  const cvModules = window.CURRICULUM || [];
  const lp = window.useLessonProgress();
  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(() => {
    return locale === "de" ? "Bereit, dein Können zu teilen" : locale === "id" ? "Siap membagikan keahlianmu" : "Ready to share your craft";
  }, [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={locale === "de" ? "+2 diese Woche — stark." : locale === "id" ? "+2 minggu ini — mantap." : "+2 this week — nice."} up />
        <Stat label={td.briefs_won} val={profile.briefs_won} delta={profile.briefs_won > 0 ? (locale === "de" ? "Schwung kommt auf." : locale === "id" ? "Momentum terbangun." : "Momentum building.") : (locale === "de" ? "Leg den ersten los" : locale === "id" ? "Ambil yang pertama" : "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" ? "Dein nächster Schritt" : locale === "id" ? "Langkah berikutnyamu" : "Your next move") : 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" — smart next-action across the curriculum.
            // Each card is a MODULE (flat) or SUB-MODULE (hub part), always with a thumbnail.
            const { featured, upNext } = lp.dashboardNext(2);
            if (!featured) return null;
            const lessonsLab = locale === "de" ? "Lektionen" : locale === "id" ? "pelajaran" : "lessons";
            const fTitle = featured.title[locale] || featured.title.en;
            const fLabel = featured.kind === "sub"
              ? (locale === "de" ? "Teil" : locale === "id" ? "Bagian" : "Part") + " " + featured.num
              : (locale === "de" ? "Schulung" : locale === "id" ? "Pelatihan" : "Training") + " " + featured.num;
            const fVerb = featured.pct >= 1
              ? (locale === "de" ? "Wiederholen" : locale === "id" ? "Tinjau ulang" : "Review")
              : featured.pct > 0
                ? (locale === "de" ? "Weitermachen" : locale === "id" ? "Lanjutkan" : "Continue")
                : (locale === "de" ? "Starten" : locale === "id" ? "Mulai" : "Start");
            return (
              <>
                <button className="continue-card" onClick={() => onOpenCvStep && onOpenCvStep(featured)}>
                  <div className="continue-cover" style={{ background: "var(--squid-ink)" }}>
                    {featured.thumb && <CoverImage src={featured.thumb} 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">{fVerb} · {fLabel}</span>
                    </div>
                    <div className="continue-title">{fTitle}</div>
                    <div className="continue-course">{featured.lessons} {lessonsLab}</div>
                    <div className="continue-progress">
                      <div className="cp-bar"><div style={{ width: `${featured.pct * 100}%` }} /></div>
                      <span className="subtle">{Math.round(featured.pct * 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(step => {
                      const uTitle = step.title[locale] || step.title.en;
                      const uLabel = step.kind === "sub"
                        ? (locale === "de" ? "Teil" : locale === "id" ? "Bagian" : "Part") + " " + step.num
                        : (locale === "de" ? "Schulung" : locale === "id" ? "Pelatihan" : "Training") + " " + step.num;
                      const locked = step.status === "locked";
                      return (
                        <button key={step.key} className="mini-course" onClick={() => !locked && onOpenCvStep && onOpenCvStep(step)}>
                          {step.thumb && <img className="mini-cover" src={step.thumb} alt="" style={{ opacity: locked ? 0.7 : 1 }} />}
                          <div className="mini-body">
                            <div className="mini-title">{uTitle}</div>
                            <div className="subtle">{uLabel} · {step.lessons} {lessonsLab}</div>
                            <div className="mini-bar"><div style={{ width: `${step.pct * 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;