// Dashboard — 我的學習（個人儀表板 + 中斷預警）

const DashboardPage = ({ setPage, onPlayCourse }) => {
  const [tab, setTab] = React.useState("overview");

  return (
    <Page screen="06 我的學習" title="我的學習儀表板" summary="這裡顯示您正在進行的課程進度、總學習時數與最近的成就。">
      <div style={{
        padding: "28px 32px", marginBottom: 28,
        background: "linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%)",
        color: "#fff", borderRadius: 16,
        display: "flex", alignItems: "center", gap: 24,
      }}>
        <div style={{
          width: 80, height: 80, borderRadius: "50%",
          background: "linear-gradient(135deg, #f0b06a, #e8743c)",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontWeight: 900, fontSize: 36, color: "#fff",
        }}>林</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: "var(--fs-sm)", opacity: 0.8 }}>午安，歡迎回來</div>
          <div style={{ fontSize: "var(--fs-2xl)", fontWeight: 800, marginTop: 2 }}>林同學</div>
          <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
            <Tag color="accent" style={{ background: "rgba(255,255,255,0.2)", color: "#fff" }}>
              <Icon name="eye" size={12} color="#fff" /> 視障友善模式
            </Tag>
            <Tag style={{ background: "rgba(255,255,255,0.2)", color: "#fff" }}>
              連續學習 7 天 🔥
            </Tag>
          </div>
        </div>
        <div style={{ display: "flex", gap: 32, textAlign: "center" }}>
          <MiniStat num="3" lbl="進行中" sub="課程" />
          <MiniStat num="2" lbl="已完課" sub="課程" />
          <MiniStat num="84%" lbl="平均分數" />
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: "flex", gap: 4, marginBottom: 24, borderBottom: "1.5px solid var(--border)" }}>
        {[
          { k: "overview", l: "總覽" },
          { k: "learning", l: "進行中課程" },
          { k: "achievements", l: "學習成就" },
          { k: "career", l: "職涯資源" },
        ].map(t => (
          <button key={t.k} onClick={() => setTab(t.k)} style={{
            padding: "12px 18px", background: "transparent",
            border: "none",
            borderBottom: tab === t.k ? "3px solid var(--brand)" : "3px solid transparent",
            color: tab === t.k ? "var(--brand)" : "var(--ink-soft)",
            fontWeight: tab === t.k ? 700 : 500, fontSize: "var(--fs-base)",
            fontFamily: "inherit", cursor: "pointer",
            marginBottom: -1.5,
          }}>{t.l}</button>
        ))}
      </div>

      {tab === "overview" && <OverviewTab setPage={setPage} onPlayCourse={onPlayCourse} />}
      {tab === "learning" && <LearningTab onPlayCourse={onPlayCourse} />}
      {tab === "achievements" && <AchievementsTab />}
      {tab === "career" && <CareerTab />}
    </Page>
  );
};

const MiniStat = ({ num, lbl, sub }) => (
  <div>
    <div style={{ fontSize: "var(--fs-2xl)", fontWeight: 900, letterSpacing: "-0.02em" }}>{num}</div>
    <div style={{ fontSize: "var(--fs-xs)", opacity: 0.75 }}>{lbl}{sub && <br/>}{sub}</div>
  </div>
);

const OverviewTab = ({ setPage, onPlayCourse }) => (
  <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 24 }}>
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      {/* Dropout warning — critical! */}
      <Card style={{ padding: 22, border: "2px solid var(--warn)", background: "linear-gradient(100deg, var(--warn-100) 0%, #fff 70%)" }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 10, flexShrink: 0,
            background: "var(--warn)", color: "#fff",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <Icon name="alert" size={22} color="#fff" />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: "var(--fs-xs)", fontWeight: 700, color: "var(--warn)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
              中斷預警 · 14 日未登入提醒
            </div>
            <div style={{ fontSize: "var(--fs-lg)", fontWeight: 700, marginTop: 4 }}>
              「Excel 實務運用」已 14 天未學習，要繼續嗎？
            </div>
            <p style={{ margin: "8px 0 12px", color: "var(--ink-2)", fontSize: "var(--fs-sm)", lineHeight: 1.7 }}>
              你上次學到 78%。AI 可以幫你在 3 分鐘內重點複習，或為你調整到更輕鬆的節奏。
            </p>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <Button size="sm" variant="accent" icon="play">3 分鐘重點複習</Button>
              <Button size="sm" variant="secondary">調整學習節奏</Button>
              <Button size="sm" variant="ghost">聯繫人工助教</Button>
            </div>
          </div>
        </div>
      </Card>

      {/* In-progress courses */}
      <Card style={{ padding: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
          <div style={{ fontSize: "var(--fs-lg)", fontWeight: 700 }}>進行中的課程</div>
          <a onClick={() => {}} style={{ fontSize: "var(--fs-sm)", cursor: "pointer" }}>查看全部 →</a>
        </div>
        {[
          { t: "AI 工具應用入門", u: "第 2 單元", p: 45, due: "本週進度目標：50%" },
          { t: "Excel 實務運用", u: "第 5 單元", p: 78, due: "已 14 天未學習", warn: true },
          { t: "社群媒體經營實戰", u: "第 1 單元", p: 25, due: "剛開始" },
        ].map((c, i) => (
          <div key={i} onClick={() => onPlayCourse({ title: c.t })} style={{
            padding: "14px 0", borderBottom: i < 2 ? "1px dashed var(--border)" : "none",
            display: "flex", alignItems: "center", gap: 16, cursor: "pointer",
          }}>
            <div className="ph-img" style={{ width: 80, height: 60, borderRadius: 8, flexShrink: 0, fontSize: 9 }}>
              {c.t.slice(0, 3)}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: "var(--fs-base)", marginBottom: 2 }}>{c.t}</div>
              <div style={{ fontSize: "var(--fs-xs)", color: c.warn ? "var(--warn)" : "var(--muted)", fontWeight: c.warn ? 700 : 400, marginBottom: 6 }}>
                {c.u} · {c.due}
              </div>
              <div style={{ height: 5, background: "var(--bg-2)", borderRadius: 3, overflow: "hidden" }}>
                <div style={{ height: "100%", width: `${c.p}%`, background: c.warn ? "var(--warn)" : "var(--brand)" }} />
              </div>
            </div>
            <div style={{ fontFamily: "JetBrains Mono, monospace", fontWeight: 700, color: "var(--ink-2)" }}>
              {c.p}%
            </div>
            <Icon name="chevronR" size={16} color="var(--muted)" />
          </div>
        ))}
      </Card>

      {/* Recommendations */}
      <Card style={{ padding: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
          <Icon name="sparkle" size={18} color="var(--accent)" />
          <div style={{ fontSize: "var(--fs-lg)", fontWeight: 700 }}>AI 為你推薦</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
          {[
            { t: "履歷撰寫工作坊", r: "配合你的求職目標", why: "ok" },
            { t: "Python 程式設計入門", r: "延伸你的 AI 學習路徑", why: "brand" },
          ].map((c, i) => (
            <div key={i} style={{
              padding: 16, border: "1px solid var(--border)", borderRadius: 10,
              background: "var(--bg)",
            }}>
              <div style={{ fontWeight: 700, fontSize: "var(--fs-base)" }}>{c.t}</div>
              <div style={{ fontSize: "var(--fs-xs)", color: "var(--accent-600)", marginTop: 4, fontWeight: 600 }}>
                ✦ {c.r}
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>

    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      {/* Weekly streak */}
      <Card style={{ padding: 22 }}>
        <div style={{ fontSize: "var(--fs-sm)", fontWeight: 700, color: "var(--ink-soft)", marginBottom: 12 }}>本週學習</div>
        <div style={{ display: "flex", gap: 6, marginBottom: 16 }}>
          {["一", "二", "三", "四", "五", "六", "日"].map((d, i) => {
            const active = i < 5;
            const today = i === 4;
            return (
              <div key={i} style={{ textAlign: "center", flex: 1 }}>
                <div style={{
                  height: 40, borderRadius: 6,
                  background: active ? "var(--brand)" : "var(--bg-2)",
                  border: today ? "2px solid var(--accent)" : "none",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: active ? "#fff" : "var(--muted)",
                }}>
                  {active && <Icon name="check" size={14} color="#fff" stroke={3} />}
                </div>
                <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 4, fontWeight: today ? 700 : 400 }}>{d}</div>
              </div>
            );
          })}
        </div>
        <div style={{ padding: 12, background: "var(--bg)", borderRadius: 8, fontSize: "var(--fs-sm)" }}>
          本週已學習 <strong style={{ color: "var(--brand)" }}>5 天 · 共 2 小時 18 分</strong>
        </div>
      </Card>

      {/* Recent achievements */}
      <Card style={{ padding: 22 }}>
        <div style={{ fontSize: "var(--fs-sm)", fontWeight: 700, color: "var(--ink-soft)", marginBottom: 14 }}>最近成就</div>
        {[
          { i: "award", t: "連續 7 天學習", d: "昨天", c: "var(--accent)" },
          { i: "book", t: "完成「履歷撰寫工作坊」", d: "4/15", c: "var(--ok)" },
          { i: "star", t: "AI 助教給你 4.9 星", d: "4/12", c: "var(--brand)" },
        ].map((a, i) => (
          <div key={i} style={{ display: "flex", gap: 10, padding: "10px 0", borderBottom: i < 2 ? "1px dashed var(--border)" : "none" }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: `color-mix(in srgb, ${a.c} 12%, white)`, color: a.c,
              display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
            }}>
              <Icon name={a.i} size={18} color={a.c} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: "var(--fs-sm)", fontWeight: 600 }}>{a.t}</div>
              <div style={{ fontSize: 11, color: "var(--muted)" }}>{a.d}</div>
            </div>
          </div>
        ))}
      </Card>

      {/* Career nudge */}
      <Card style={{ padding: 22, background: "var(--ink)", color: "#fff" }}>
        <div style={{ display: "flex", gap: 10, marginBottom: 8, alignItems: "center" }}>
          <Icon name="briefcase" size={18} color="#fff" />
          <div style={{ fontSize: "var(--fs-sm)", fontWeight: 700 }}>職涯資源</div>
        </div>
        <div style={{ fontSize: "var(--fs-base)", fontWeight: 600, marginBottom: 10 }}>
          你的履歷已完成 80%
        </div>
        <div style={{ fontSize: "var(--fs-sm)", opacity: 0.75, lineHeight: 1.7, marginBottom: 14 }}>
          AI 分析你的技能組合，已幫你媒合 12 個無障礙友善職缺。
        </div>
        <Button size="sm" variant="accent" style={{ width: "100%" }}>查看媒合職缺</Button>
      </Card>
    </div>
  </div>
);

const LearningTab = ({ onPlayCourse }) => (
  <Card style={{ padding: 24 }}>
    <div style={{ fontSize: "var(--fs-lg)", fontWeight: 700, marginBottom: 16 }}>全部進行中課程（3）</div>
    {COURSES.filter(c => c.progress > 0 && c.progress < 100).map(c => (
      <div key={c.id} onClick={() => onPlayCourse(c)} style={{
        padding: "16px 0", borderBottom: "1px dashed var(--border)",
        display: "flex", alignItems: "center", gap: 16, cursor: "pointer",
      }}>
        <div className="ph-img" style={{ width: 120, height: 80, borderRadius: 8, flexShrink: 0, fontSize: 10 }}>{c.img}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: "var(--fs-base)" }}>{c.title}</div>
          <div style={{ fontSize: "var(--fs-sm)", color: "var(--muted)", margin: "4px 0 8px" }}>
            <Tag color="brand">{c.cat}</Tag> · {c.dur} 分
          </div>
          <div style={{ height: 6, background: "var(--bg-2)", borderRadius: 3, overflow: "hidden", width: 240 }}>
            <div style={{ height: "100%", width: `${c.progress}%`, background: "var(--accent)" }} />
          </div>
        </div>
        <Button variant="secondary">繼續學習</Button>
      </div>
    ))}
  </Card>
);

const AchievementsTab = () => (
  <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
    {[
      { t: "初學者", d: "完成 3 門課", earned: true, c: "var(--brand)" },
      { t: "連續學習 7 天", d: "持續學習週獎勵", earned: true, c: "var(--accent)" },
      { t: "AI 互動達人", d: "與 AI 對話 50 次", earned: true, c: "var(--ok)" },
      { t: "完課大師", d: "完成 10 門課", earned: false, c: "var(--muted)" },
      { t: "分享者", d: "分享學習心得", earned: false, c: "var(--muted)" },
      { t: "全勤學員", d: "連續 30 天學習", earned: false, c: "var(--muted)" },
      { t: "導師", d: "幫助其他學員", earned: false, c: "var(--muted)" },
      { t: "專業認證", d: "通過能力測驗", earned: false, c: "var(--muted)" },
    ].map((a, i) => (
      <Card key={i} style={{ padding: 20, textAlign: "center", opacity: a.earned ? 1 : 0.55 }}>
        <div style={{
          width: 64, height: 64, borderRadius: "50%", margin: "0 auto 12px",
          background: `color-mix(in srgb, ${a.c} 15%, white)`, color: a.c,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <Icon name="award" size={32} color={a.c} />
        </div>
        <div style={{ fontWeight: 700 }}>{a.t}</div>
        <div style={{ fontSize: "var(--fs-xs)", color: "var(--muted)", marginTop: 4 }}>{a.d}</div>
        {a.earned && <Tag color="ok" style={{ marginTop: 8 }}>已獲得</Tag>}
      </Card>
    ))}
  </div>
);

const CareerTab = () => (
  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
    <Card style={{ padding: 24 }}>
      <div style={{ fontSize: "var(--fs-xs)", color: "var(--accent-600)", letterSpacing: "0.1em", fontWeight: 700, marginBottom: 8 }}>履歷健檢</div>
      <div style={{ fontSize: "var(--fs-lg)", fontWeight: 700, marginBottom: 12 }}>你的履歷完成度：80%</div>
      <div style={{ height: 8, background: "var(--bg-2)", borderRadius: 4, overflow: "hidden", marginBottom: 16 }}>
        <div style={{ height: "100%", width: "80%", background: "var(--brand)" }} />
      </div>
      <ul style={{ paddingLeft: 20, color: "var(--ink-2)", lineHeight: 2, marginBottom: 16 }}>
        <li>✓ 基本資料已填寫</li>
        <li>✓ 學歷經歷完整</li>
        <li>△ 建議補充：專案成果連結</li>
        <li>△ 建議補充：自傳（AI 可協助撰寫）</li>
      </ul>
      <Button variant="accent" icon="sparkle" style={{ width: "100%" }}>讓 AI 幫我補充履歷</Button>
    </Card>

    <Card style={{ padding: 24 }}>
      <div style={{ fontSize: "var(--fs-xs)", color: "var(--accent-600)", letterSpacing: "0.1em", fontWeight: 700, marginBottom: 8 }}>無障礙友善職缺</div>
      <div style={{ fontSize: "var(--fs-lg)", fontWeight: 700, marginBottom: 16 }}>為你媒合 12 個職缺</div>
      {[
        { c: "漫話科技", p: "AI 資料標註員", t: "居家辦公", m: 92 },
        { c: "光源文創", p: "客服專員（視障友善）", t: "台北", m: 85 },
        { c: "友善數位", p: "行政助理", t: "新北", m: 78 },
      ].map((j, i) => (
        <div key={i} style={{ padding: "12px 0", borderBottom: i < 2 ? "1px dashed var(--border)" : "none" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div>
              <div style={{ fontWeight: 700, fontSize: "var(--fs-sm)" }}>{j.p}</div>
              <div style={{ fontSize: "var(--fs-xs)", color: "var(--muted)", marginTop: 2 }}>
                {j.c} · {j.t}
              </div>
            </div>
            <Tag color="ok">匹配 {j.m}%</Tag>
          </div>
        </div>
      ))}
      <Button variant="ghost" style={{ width: "100%", marginTop: 14 }}>查看全部職缺</Button>
    </Card>
  </div>
);

Object.assign(window, { DashboardPage });