/* Course directory - outlook A: branded evergreen category band + clean cards.
   REPs-category-led: pick a category in the band, refine by provider. */

function Directory({ onOpenCourse }) {
  const { COURSES, REP_CATEGORIES, PROVIDERS } = window.TR_CONTENT;
  const [cat, setCat] = React.useState("all");
  const [sort, setSort] = React.useState("rating");

  let list = COURSES.filter((c) => (cat === "all" || c.cat === cat));
  list = [...list].sort((a, b) => sort === "rating" ? ((b.rating || 0) - (a.rating || 0)) : String(a.duration || "").localeCompare(String(b.duration || "")));
  const active = REP_CATEGORIES.find((k) => k.id === cat);

  const Chip = ({ id, label }) => {
    const on = cat === id;
    return (
      <button onClick={() => setCat(id)} style={{ fontFamily: "var(--tr-font-text)", fontSize: 13, fontWeight: 600, padding: "8px 14px", borderRadius: 999, border: "none", cursor: "pointer", background: on ? "var(--tr-amber-500)" : "rgba(255,255,255,0.1)", color: on ? "var(--tr-ink)" : "#fff", whiteSpace: "nowrap" }}>{label}</button>
    );
  };

  const Card = ({ c }) => {
    const isTop = c.rating >= 4.7;
    return (
      <div className="tr-card tr-card-hover" onClick={() => onOpenCourse && onOpenCourse(c.id)} style={{ padding: 18, display: "flex", flexDirection: "column", gap: 8, cursor: "pointer" }}>
        <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
          <span className="tr-pill tr-pill-approved" style={{ fontSize: 10.5 }}><Icon name="badge-check" size={12} /> REPs UAE</span>
          <span className="tr-pill tr-pill-neutral" style={{ fontSize: 10.5 }}>{c.level}</span>
          {isTop && <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: "0.05em", textTransform: "uppercase", color: "var(--tr-amber-700)", background: "var(--tr-amber-100)", padding: "2px 7px", borderRadius: 4 }}>Top rated</span>}
        </div>
        <h3 style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 17, margin: "2px 0 0", color: "var(--tr-ink)", letterSpacing: "-0.01em", textWrap: "balance" }}>{c.title}</h3>
        <div style={{ fontSize: 13, color: "var(--tr-fg-muted)" }}>{c.format} · {c.duration}</div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12.5, color: "var(--tr-fg-2)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="clock" size={12} /> {c.format}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="map-pin" size={12} /> {c.location}</span>
          {c.rating != null && <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="star" size={12} style={{ color: "var(--tr-amber-500)", fill: "var(--tr-amber-500)" }} /> {c.rating.toFixed(1)}</span>}
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--tr-line-2)" }}>
          <span style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 15, color: "var(--tr-ink)", whiteSpace: "nowrap" }}>{c.level}</span>
          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--tr-brand-700)" }}>View →</span>
        </div>
      </div>
    );
  };

  return (
    <main style={{ background: "var(--tr-paper-2)", minHeight: "70vh" }}>
      {/* branded category band */}
      <div style={{ background: "var(--tr-brand-900)", color: "#fff" }}>
        <div className="container" style={{ padding: "36px var(--tr-gutter) 34px" }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--tr-amber-400)" }}>Course library</div>
          <h1 style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 36, letterSpacing: "-0.03em", margin: "10px 0 6px", textWrap: "balance" }}>
            {active ? active.name + " courses" : "What do you want to qualify in?"}
          </h1>
          <p style={{ fontSize: 15.5, color: "rgba(255,255,255,0.78)", margin: "0 0 20px", maxWidth: 580, textWrap: "pretty" }}>
            {active ? active.blurb : "Pick a REPs UAE category to see every approved course for it. Everything here lets you register and work legally in the UAE."}
          </p>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <Chip id="all" label="All courses" />
            {REP_CATEGORIES.map((k) => <Chip key={k.id} id={k.id} label={k.name} />)}
          </div>
        </div>
      </div>

      {/* results */}
      <div className="container" style={{ padding: "24px var(--tr-gutter) 80px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18, flexWrap: "wrap" }}>
          <select value={sort} onChange={(e) => setSort(e.target.value)} style={{ border: "1.5px solid var(--tr-line)", borderRadius: 10, padding: "9px 12px", fontSize: 13.5, color: "var(--tr-ink)", background: "#fff", fontFamily: "var(--tr-font-text)", cursor: "pointer" }}>
            <option value="rating">Sort: top rated</option>
            <option value="duration">Sort: duration</option>
          </select>
          <span style={{ marginLeft: "auto", fontSize: 13.5, color: "var(--tr-fg-muted)" }}>{list.length} course{list.length === 1 ? "" : "s"}</span>
        </div>

        {list.length > 0 ? (
          <div className="dir-results" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {list.map((c) => <Card key={c.id} c={c} />)}
          </div>
        ) : (
          <div style={{ background: "#fff", border: "1px solid var(--tr-line)", borderRadius: 14, padding: "40px 24px", textAlign: "center", color: "var(--tr-fg-muted)" }}>
            <div style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 18, color: "var(--tr-ink)", marginBottom: 6 }}>Nothing matches that yet</div>
            <div style={{ fontSize: 14.5 }}>Try removing the provider filter.</div>
          </div>
        )}
      </div>
    </main>
  );
}

window.Directory = Directory;