/* dashboard.jsx — Van Haren Learning home */

function PageHead({ eyebrow, title, sub, right }) {
  return (
    <div className="between" style={{ marginBottom: 22, alignItems: "flex-end" }}>
      <div>
        {eyebrow && <div className="eyebrow" style={{ marginBottom: 8 }}>{eyebrow}</div>}
        <h1 style={{ fontSize: 30, fontWeight: 700 }}>{title}</h1>
        {sub && <p className="muted" style={{ marginTop: 8, fontSize: 15, maxWidth: 620 }}>{sub}</p>}
      </div>
      {right}
    </div>
  );
}

function CourseCard({ c, onOpen, t, compact }) {
  return (
    <button className="card" onClick={onOpen} style={{ textAlign: "left", padding: 0, overflow: "hidden", display: "flex", flexDirection: "column", cursor: "pointer", position: "relative" }}>
      <div style={{ height: compact ? 96 : 116, position: "relative", background: `linear-gradient(135deg, ${c.color}, color-mix(in oklab, ${c.color}, #0b1c3a 55%))`, overflow: "hidden", flex: "none" }}>
        <div className="hexfield" />
        <div style={{ position: "absolute", inset: 0, padding: 16, display: "flex", justifyContent: "space-between" }}>
          <div className="hex-flat" style={{ width: 46, height: 46, background: "rgba(255,255,255,.16)", clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", display: "grid", placeItems: "center" }}>
            <Icon name={c.icon} size={24} style={{ color: "#fff" }} />
          </div>
          <div style={{ display: "flex", gap: 6, height: "fit-content" }}>
            {c.gamified && <span className="tag" style={{ background: "rgba(255,255,255,.92)", color: c.color }}><Icon name="dice" size={13} />Gamified</span>}
            {c.certified && <span className="tag" style={{ background: "rgba(255,255,255,.92)", color: c.color }}><Icon name="cert" size={13} />Certified</span>}
          </div>
        </div>
      </div>
      <div style={{ padding: "15px 16px 17px", display: "flex", flexDirection: "column", gap: 11, flex: 1 }}>
        <div>
          <div className="dim" style={{ fontSize: 11.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 5 }}>{c.track}</div>
          <h3 style={{ fontSize: 17, fontWeight: 600 }}>{c.title}</h3>
        </div>
        {!compact && <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.5 }}>{c.blurb}</p>}
        <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 8 }}>
          <div className="between" style={{ fontSize: 12.5 }}>
            <span className="dim" style={{ fontWeight: 600 }}>{c.done}/{c.lessons} lessons</span>
            <span style={{ fontWeight: 700, color: c.progress === 100 ? "var(--vh-teal)" : "var(--ink-2)" }}>{c.progress === 100 ? "Complete" : c.progress + "%"}</span>
          </div>
          <div className="bar"><i style={{ width: c.progress + "%", background: c.progress === 100 ? "var(--vh-teal)" : undefined }} /></div>
        </div>
      </div>
    </button>
  );
}

function RecoCard({ openCourse }) {
  const { lang } = useLang();
  const DL = (T[lang] || T.en).dash;
  const { skill, course, reason } = recommendNext();
  return (
    <div className="card" style={{ padding: 22, position: "relative", overflow: "hidden", border: "1.5px solid color-mix(in oklab,var(--accent),transparent 58%)" }}>
      <div style={{ position: "absolute", right: -38, top: -38, width: 128, height: 128, clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "var(--accent-soft)" }} />
      <div style={{ position: "relative" }}>
        <div className="between" style={{ marginBottom: 14 }}>
          <span className="eyebrow" style={{ color: "var(--accent-ink)" }}>{DL.recoTitle}</span>
          <span className="tag accent" style={{ fontSize: 11 }}><Icon name="sparkle" size={13} />{DL.recoTag}</span>
        </div>
        <div style={{ display: "flex", gap: 13, alignItems: "center", marginBottom: 12 }}>
          <div className="hex-flat" style={{ width: 48, height: 53, flex: "none", clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: course.color, display: "grid", placeItems: "center" }}>
            <Icon name={course.icon} size={22} style={{ color: "#fff" }} />
          </div>
          <div>
            <h3 style={{ fontSize: 17, fontWeight: 600 }}>{course.title}</h3>
            <div className="dim" style={{ fontSize: 12.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".06em", marginTop: 3 }}>{course.track}</div>
          </div>
        </div>
        <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.5 }}>{reason}</p>
        <button className="btn btn-acc" style={{ width: "100%", marginTop: 16 }} onClick={() => openCourse(course)}><Icon name="rocket" size={17} />{DL.startCourse}<Icon name="arrowR" size={16} /></button>
      </div>
    </div>
  );
}

function StatTile({ icon, label, value, accent }) {
  return (
    <div className="card" style={{ padding: "16px 18px", display: "flex", alignItems: "center", gap: 14 }}>
      <div className="hex-flat" style={{ width: 44, height: 44, flex: "none", clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: accent ? "var(--accent-soft)" : "var(--vh-blue-50)", display: "grid", placeItems: "center" }}>
        <Icon name={icon} size={22} style={{ color: accent ? "var(--accent)" : "var(--vh-blue-500)" }} />
      </div>
      <div>
        <div className="kpi" style={{ fontSize: 24 }}>{value}</div>
        <div className="dim" style={{ fontSize: 12.5, fontWeight: 600 }}>{label}</div>
      </div>
    </div>
  );
}

function FeaturedCourseCard({ c, t, onOpen, onViewSlides }) {
  const { lang } = useLang();
  const DL = (T[lang] || T.en).dash;
  return (
    <div className="card" style={{ textAlign: "left", padding: 0, overflow: "hidden", display: "flex", cursor: "pointer", width: "100%", marginBottom: 28, minHeight: 170 }} onClick={onOpen}>
      <div style={{ width: 220, position: "relative", background: `linear-gradient(160deg, ${c.color}, color-mix(in oklab, ${c.color}, #0b1c3a 58%))`, flex: "none", overflow: "hidden" }}>
        <div className="hexfield" />
        <div style={{ position: "absolute", inset: 0, padding: "20px 22px", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
          <div className="hex-flat" style={{ width: 50, height: 50, clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "rgba(255,255,255,.18)", display: "grid", placeItems: "center", marginBottom: 12 }}>
            <Icon name={c.icon} size={26} style={{ color: "#fff" }} />
          </div>
          <div className="eyebrow" style={{ color: "rgba(255,255,255,.75)", marginBottom: 4 }}>{c.track}</div>
          <h3 style={{ fontSize: 17, fontWeight: 700, color: "#fff", lineHeight: 1.2, margin: 0 }}>{c.title}</h3>
        </div>
      </div>
      <div style={{ flex: 1, padding: "22px 26px", display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
        <div style={{ flex: 1, minWidth: 200 }}>
          <span className="tag accent" style={{ fontSize: 11.5, marginBottom: 12, display: "inline-flex" }}><Icon name="rocket" size={12} />{DL.enrolled}</span>
          <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.55, marginBottom: 14, marginTop: 6 }}>{c.blurb}</p>
          <div className="between" style={{ fontSize: 13, marginBottom: 7 }}>
            <span className="dim" style={{ fontWeight: 600 }}>{DL.lessonsOf(c.done, c.lessons)}</span>
            <span style={{ fontWeight: 700 }}>{c.progress}%</span>
          </div>
          <div className="bar" style={{ height: 8 }}><i style={{ width: c.progress + "%" }} /></div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, flex: "none" }}>
          <Ring value={c.progress} size={74} color={c.color}>
            <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 19, textAlign: "center" }}>{c.progress}%</div>
          </Ring>
        </div>
        {/* upcoming training block */}
        <div style={{ borderLeft: "1px solid var(--line)", paddingLeft: 24, display: "flex", flexDirection: "column", gap: 10, minWidth: 220, flex: "none" }} onClick={e => e.stopPropagation()}>
          <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <div style={{ width: 7, height: 7, borderRadius: "50%", background: "#4ade80", boxShadow: "0 0 5px #4ade80" }} />
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--ink-3)" }}>{DL.upcomingTraining}</span>
          </div>
          <div>
            <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 15, color: "var(--ink)", marginBottom: 2 }}>IPMA-D · Jun 2026</div>
            <div style={{ fontSize: 12, color: "var(--ink-2)" }}>📍 Physical · Amsterdam</div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
            {["Mon 9 Jun", "Tue 10 Jun", "Wed 11 Jun", "Thu 12 Jun"].map((d, i) => (
              <div key={i} style={{ display: "flex", gap: 6, fontSize: 12, color: "var(--ink-2)" }}>
                <span style={{ fontWeight: 700, color: "var(--vh-orange)", flex: "none" }}>Day {i + 1}</span>
                <span>{d} · 09:00–17:00</span>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 7, marginTop: 4 }}>
            <button className="btn btn-pri" style={{ flex: 1, fontSize: 12.5, padding: "8px 12px" }} onClick={e => { e.stopPropagation(); onOpen(); }}>
              <Icon name="graduation" size={14} />{DL.enrolledBtn}
            </button>
            <button className="btn btn-acc" style={{ flex: 1, fontSize: 12.5, padding: "8px 12px" }} onClick={e => { e.stopPropagation(); onViewSlides && onViewSlides(); }}>
              <Icon name="play" size={14} />{DL.joinLive}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Dashboard({ t, navigate, openCourse, onViewSlides }) {
  const { lang } = useLang();
  const DL = (T[lang] || T.en).dash;
  const hour = new Date().getHours();
  const greeting = hour < 12 ? DL.morning : hour < 18 ? DL.afternoon : DL.evening;
  const pct = Math.round((LEARNER.xp / LEARNER.xpToNext) * 100);
  const activeCourse = COURSES.find(c => c.progress > 0 && c.progress < 100);
  const completedCourses = COURSES.filter(c => c.progress === 100);
  return (
    <div className="vh-in">
      <PageHead
        eyebrow={greeting}
        title={DL.welcome(LEARNER.name.split(" ")[0])}
        sub={DL.sub}
        right={
          <div className="card" style={{ padding: "14px 18px", display: "flex", alignItems: "center", gap: 16 }}>
            <Ring value={pct} size={64} color="var(--accent)">
              <div style={{ textAlign: "center", lineHeight: 1 }}>
                <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 20 }}>{LEARNER.level}</div>
                <div className="dim" style={{ fontSize: 9, fontWeight: 700, letterSpacing: ".1em" }}>LVL</div>
              </div>
            </Ring>
            <div>
              <div style={{ fontWeight: 700, fontFamily: "var(--display)", fontSize: 16 }}>{LEARNER.levelName}</div>
              <div className="dim" style={{ fontSize: 12.5, marginTop: 2 }}>{LEARNER.xp.toLocaleString()} / {LEARNER.xpToNext.toLocaleString()} XP</div>
              <div className="bar" style={{ marginTop: 7, width: 150 }}><i className="" style={{ width: pct + "%", background: "linear-gradient(90deg,var(--vh-peach),var(--accent))" }} /></div>
            </div>
          </div>
        }
      />

      {/* stat row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginBottom: 24 }}>
        <StatTile icon="bolt" label={DL.stats.xp} value={LEARNER.xp.toLocaleString()} accent />
        <StatTile icon="flame" label={DL.stats.streak} value={LEARNER.streak} />
        <StatTile icon="trophy" label={DL.stats.rank} value={"#" + LEARNER.rank} />
        <StatTile icon="medal" label={DL.stats.badges} value={BADGES.filter(b => b.got).length} />
      </div>

      {/* active course */}
      <div className="between" style={{ marginBottom: 14 }}>
        <h2 style={{ fontSize: 20, fontWeight: 700 }}>{DL.continueLearning}</h2>
        <button className="btn btn-outline" onClick={() => navigate("courses")}>{DL.allCourses}<Icon name="arrowR" size={16} /></button>
      </div>
      {activeCourse && <FeaturedCourseCard c={activeCourse} t={t} onOpen={() => openCourse(activeCourse)} onViewSlides={onViewSlides} />}

      {/* completed certifications */}
      {completedCourses.length > 0 && (<>
        <div className="between" style={{ marginBottom: 14 }}>
          <h2 style={{ fontSize: 20, fontWeight: 700 }}>{DL.completedCerts}</h2>
          <span className="tag accent"><Icon name="medal" size={13} />{DL.certified(completedCourses.length)}</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, marginBottom: 28 }}>
          {completedCourses.map(c => <CourseCard key={c.id} c={c} t={t} compact onOpen={() => openCourse(c)} />)}
        </div>
      </>)}

      {/* lower split */}
      <div style={{ display: "grid", gridTemplateColumns: "1.35fr 1fr", gap: 18 }}>
        {/* skills radar */}
        <div className="card" style={{ padding: 22 }}>
          <div className="between" style={{ marginBottom: 8 }}>
            <div>
              <h3 style={{ fontSize: 18, fontWeight: 700 }}>{DL.yourSkills}</h3>
              <p className="dim" style={{ fontSize: 13, marginTop: 3 }}>{DL.spiderSub}</p>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("passport")}><Icon name="passport" size={16} />{DL.openPassport}</button>
          </div>
          <RadarChart data={SKILLS} size={320} fill="var(--vh-blue-500)" />
        </div>

        {/* right column: recommendation + leaderboard */}
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <RecoCard openCourse={openCourse} />
          {/* leaderboard preview */}
          <div className="card" style={{ padding: 22 }}>
          <div className="between" style={{ marginBottom: 14 }}>
            <h3 style={{ fontSize: 18, fontWeight: 700 }}>{DL.leaderboard}</h3>
            <span className="tag accent"><Icon name="flame" size={13} />{DL.thisWeek}</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {LEADERBOARD.slice(0, 5).map(p => (
              <div key={p.rank} style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 10px", borderRadius: 12, background: p.you ? "var(--accent-soft)" : "transparent", border: p.you ? "1px solid color-mix(in oklab,var(--accent),transparent 60%)" : "1px solid transparent" }}>
                <span style={{ width: 22, textAlign: "center", fontFamily: "var(--display)", fontWeight: 800, fontSize: 15, color: p.rank <= 3 ? "var(--accent)" : "var(--ink-3)" }}>{p.rank}</span>
                <div className="avatar" style={{ width: 34, height: 34, borderRadius: 10, fontSize: 13, background: p.you ? "linear-gradient(135deg,var(--accent),var(--vh-orange))" : undefined }}>{p.initials}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.name}{p.you && <span className="dim" style={{ fontWeight: 600 }}> · you</span>}</div>
                </div>
                <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 13.5 }}>{p.xp.toLocaleString()}</span>
              </div>
            ))}
          </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard, PageHead, CourseCard, StatTile, RecoCard });