// Catalog — 選課頁面

const COURSES = [
  { id: 1, title: "AI 工具應用入門", cat: "資訊技能", dur: 120, level: "入門", feat: ["tts","caption","keyboard"], progress: 45, rating: 4.8, enroll: 320, img: "https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=800&q=75" },
  { id: 2, title: "易讀版：求職必備技能", cat: "易讀版", dur: 45, level: "基礎", feat: ["easy","multi","caption"], progress: 0, rating: 4.9, enroll: 180, img: "https://images.unsplash.com/photo-1517022812141-23620dba5c23?auto=format&fit=crop&w=800&q=75", isNew: true },
  { id: 3, title: "Excel 實務運用", cat: "資訊技能", dur: 180, level: "進階", feat: ["tts","caption","keyboard"], progress: 78, rating: 4.7, enroll: 450, img: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=75" },
  { id: 4, title: "客服溝通與同理心", cat: "職能提升", dur: 90, level: "入門", feat: ["caption","sign","easy"], progress: 0, rating: 4.6, enroll: 210, img: "https://images.unsplash.com/photo-1553775282-20af80779df7?auto=format&fit=crop&w=800&q=75" },
  { id: 5, title: "履歷撰寫工作坊", cat: "職涯準備", dur: 60, level: "基礎", feat: ["tts","caption","easy","multi"], progress: 100, rating: 4.8, enroll: 380, img: "https://images.unsplash.com/photo-1586281380349-632531db7ed4?auto=format&fit=crop&w=800&q=75" },
  { id: 6, title: "數位插畫與設計思維", cat: "視覺設計", dur: 150, level: "進階", feat: ["caption","multi"], progress: 0, rating: 4.5, enroll: 165, img: "https://images.unsplash.com/photo-1561070791-2526d30994b8?auto=format&fit=crop&w=800&q=75" },
  { id: 7, title: "Python 程式設計入門", cat: "程式設計", dur: 240, level: "入門", feat: ["tts","caption","keyboard"], progress: 0, rating: 4.7, enroll: 290, img: "https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=800&q=75" },
  { id: 8, title: "社群媒體經營實戰", cat: "職能提升", dur: 100, level: "基礎", feat: ["caption","easy","multi"], progress: 25, rating: 4.4, enroll: 240, img: "https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=800&q=75" },
];

const CatalogPage = ({ onPlayCourse, onOpenAI }) => {
  const [filter, setFilter] = React.useState("all");
  const [levelFilter, setLevelFilter] = React.useState("all");
  const [adaptFilter, setAdaptFilter] = React.useState(null);
  const cats = ["all", "資訊技能", "易讀版", "職能提升", "職涯準備", "視覺設計", "程式設計"];

  let filtered = COURSES;
  if (filter !== "all") filtered = filtered.filter(c => c.cat === filter);
  if (levelFilter !== "all") filtered = filtered.filter(c => c.level === levelFilter);
  if (adaptFilter) filtered = filtered.filter(c => c.adapt.includes(adaptFilter));

  return (
    <Page screen="03 選課頁面" title="選課頁面" summary="這裡列出所有課程，可以用篩選器或 AI 為您推薦合適的課程。">
      {/* AI assisted picker banner */}
      <Card style={{
        marginBottom: 28, padding: "20px 24px",
        background: "linear-gradient(100deg, var(--accent-100) 0%, #fff 70%)",
        border: "1.5px solid var(--accent)",
        display: "flex", alignItems: "center", gap: 20,
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: "var(--accent)", color: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <Icon name="sparkle" size={28} color="#fff" />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: "var(--fs-lg)", color: "var(--ink)" }}>
            不知道該選哪門課？讓 AI 幫我選課
          </div>
          <div style={{ color: "var(--ink-soft)", fontSize: "var(--fs-sm)", marginTop: 3 }}>
            上傳身心障礙證明或告訴 AI 你的偏好，推薦最適合你的無障礙課程
          </div>
        </div>
        <Button variant="accent" icon="sparkle" onClick={onOpenAI}>開始諮詢</Button>
      </Card>

      <SectionHeader
        eyebrow="課程總覽"
        title={`${filtered.length} 門課程`}
        desc="所有課程皆通過 WCAG 2.1 AAA 無障礙檢測"
      />

      {/* Filters */}
      <div style={{ marginBottom: 22, display: "flex", flexDirection: "column", gap: 12 }}>
        <FilterRow label="類別" items={cats} value={filter} onChange={setFilter} labelMap={{all:"全部"}} />
        <FilterRow label="難度" items={["all","入門","基礎","進階"]} value={levelFilter} onChange={setLevelFilter} labelMap={{all:"全部"}} />
        <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <span style={{ fontSize: "var(--fs-sm)", fontWeight: 600, color: "var(--ink-soft)", minWidth: 56 }}>
            無障礙適配
          </span>
          {["VI","HI","CI","LD"].map(a => (
            <button
              key={a}
              onClick={() => setAdaptFilter(adaptFilter === a ? null : a)}
              style={{
                padding: "6px 12px", borderRadius: 999,
                background: adaptFilter === a ? "var(--ink)" : "var(--paper)",
                color: adaptFilter === a ? "#fff" : "var(--ink-2)",
                border: `1.5px solid ${adaptFilter === a ? "var(--ink)" : "var(--border-strong)"}`,
                fontSize: "var(--fs-sm)", fontWeight: 600, fontFamily: "inherit",
                display: "inline-flex", alignItems: "center", gap: 6,
              }}
            >
              <Icon name={a==="VI"?"eye":a==="HI"?"ear":a==="CI"?"puzzle":"brain"} size={14} />
              {a === "VI" ? "視障" : a === "HI" ? "聽障" : a === "CI" ? "認知" : "學習"}友善
            </button>
          ))}
          {adaptFilter && (
            <button onClick={() => setAdaptFilter(null)} style={{
              color: "var(--muted)", background: "transparent", border: "none",
              fontSize: "var(--fs-sm)", fontFamily: "inherit", cursor: "pointer",
            }}>清除 ×</button>
          )}
        </div>
      </div>

      {/* Course grid */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {filtered.map(c => (
          <CatalogCard key={c.id} course={c} onClick={() => onPlayCourse(c)} />
        ))}
      </div>

      {filtered.length === 0 && (
        <Card style={{ padding: 48, textAlign: "center", color: "var(--muted)" }}>
          <Icon name="search" size={40} />
          <div style={{ marginTop: 12 }}>沒有符合條件的課程，試試調整篩選</div>
        </Card>
      )}
    </Page>
  );
};

const FilterRow = ({ label, items, value, onChange, labelMap = {} }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
    <span style={{ fontSize: "var(--fs-sm)", fontWeight: 600, color: "var(--ink-soft)", minWidth: 56 }}>{label}</span>
    {items.map(i => (
      <button
        key={i}
        onClick={() => onChange(i)}
        style={{
          padding: "6px 14px", borderRadius: 999,
          background: value === i ? "var(--brand)" : "var(--paper)",
          color: value === i ? "#fff" : "var(--ink-2)",
          border: `1.5px solid ${value === i ? "var(--brand)" : "var(--border)"}`,
          fontSize: "var(--fs-sm)", fontWeight: 600, fontFamily: "inherit",
        }}
      >
        {labelMap[i] || i}
      </button>
    ))}
  </div>
);

const CatalogCard = ({ course, onClick }) => (
  <Card hover onClick={onClick} style={{ overflow: "hidden" }}>
    <div style={{ height: 150, position: "relative", overflow: "hidden",
      background: "linear-gradient(135deg, #e4e9f2, #d3dae8)" }}>
      <img src={course.img} alt={course.title} loading="lazy"
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      {course.isNew && <div style={{ position: "absolute", top: 12, left: 12 }}><Tag color="accent">NEW</Tag></div>}
      {course.progress === 100 && <div style={{ position: "absolute", top: 12, right: 12 }}><Tag color="ok">✓ 已完課</Tag></div>}
    </div>
    <div style={{ padding: 18 }}>
      <div style={{ display: "flex", gap: 6, marginBottom: 10 }}>
        <Tag color="brand">{course.cat}</Tag>
        <Tag>{course.level}</Tag>
      </div>
      <h3 style={{ margin: 0, fontSize: "var(--fs-lg)", fontWeight: 700, lineHeight: 1.3 }}>{course.title}</h3>
      <div style={{ marginTop: 10, display: "flex", gap: 14, fontSize: "var(--fs-sm)", color: "var(--muted)" }}>
        <span style={{ display: "inline-flex", gap: 4, alignItems: "center" }}><Icon name="clock" size={14} /> {course.dur}分</span>
        <span style={{ display: "inline-flex", gap: 4, alignItems: "center" }}><Icon name="users" size={14} /> {course.enroll}</span>
        <span style={{ display: "inline-flex", gap: 4, alignItems: "center", color: "var(--accent-600)" }}><Icon name="star" size={14} color="var(--accent)" /> {course.rating}</span>
      </div>
      <div style={{ marginTop: 12, display: "flex", gap: 4, flexWrap: "wrap" }}>
        {(course.feat || []).map(f => <FeatureBadge key={f} type={f} />)}
      </div>
      {course.progress > 0 && course.progress < 100 && (
        <div style={{ marginTop: 12 }}>
          <div style={{ height: 6, background: "var(--bg-2)", borderRadius: 3, overflow: "hidden" }}>
            <div style={{ height: "100%", width: `${course.progress}%`, background: "var(--accent)" }} />
          </div>
          <div style={{ fontSize: "var(--fs-xs)", color: "var(--ink-soft)", marginTop: 4 }}>進度 {course.progress}%</div>
        </div>
      )}
    </div>
  </Card>
);

Object.assign(window, { CatalogPage, COURSES });