/* Veridyne Learning Portal — Documentation Library + Glossary */

function FilterGroup({ label, options, value, onChange }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
      <span style={{ fontSize: "0.72em", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--bone-50)", fontWeight: 600 }}>{label}</span>
      <div className="filter-bar">
        {["All", ...options].map((opt) => (
          <button key={opt} className={"pill" + (value === opt ? " active" : "")} onClick={() => onChange(opt)} style={{ padding: "6px 13px", minHeight: 34, fontSize: "0.82em" }}>
            {opt}
          </button>
        ))}
      </div>
    </div>
  );
}

function DocumentationLibrary() {
  const [product, setProduct] = React.useState("All");
  const [topic, setTopic] = React.useState("All");
  const [level, setLevel] = React.useState("All");
  const [type, setType] = React.useState("All");

  const PROTO_TOPICS = ["SAML", "OAuth", "OIDC", "Tokens"];
  const topics = ["SSO", "MFA", "Lifecycle", "Governance", "Actions", "Organizations", "APIs", "OAuth", "OIDC", "SAML", "Tokens", "Attack Protection"];

  const list = window.DOCS_LIBRARY.filter((d) => {
    const productOk = product === "All" || d.product === product || (product === "Protocols" && PROTO_TOPICS.includes(d.topic));
    return productOk && (topic === "All" || d.topic === topic) && (level === "All" || d.level === level) && (type === "All" || d.type === type);
  });

  const typeIcon = { Docs: "fileText", Training: "award", Video: "video", Quickstart: "zap" };

  return (
    <div className="anim-fade-up">
      <div className="page-head">
        <h1>Documentation Library</h1>
        <p>Every resource here is an official Okta or Auth0 source — the same links cited throughout the learning tracks.</p>
      </div>
      <div className="glass-card" style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 18 }}>
        <FilterGroup label="Product" options={["Okta", "Auth0", "Protocols"]} value={product} onChange={setProduct} />
        <FilterGroup label="Topic" options={topics} value={topic} onChange={setTopic} />
        <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
          <FilterGroup label="Level" options={["Beginner", "Practitioner", "Advanced"]} value={level} onChange={setLevel} />
          <FilterGroup label="Type" options={["Docs", "Training", "Video", "Quickstart"]} value={type} onChange={setType} />
        </div>
      </div>
      <p style={{ fontSize: "0.82em", color: "var(--bone-50)", marginBottom: 12 }}>{list.length} resource{list.length === 1 ? "" : "s"}</p>
      <div className="card-grid">
        {list.map((d, i) => (
          <div key={i} className="glass-card" style={{ display: "flex", flexDirection: "column", gap: 10, padding: 18 }}>
            <div style={{ display: "flex", gap: 7, flexWrap: "wrap", alignItems: "center" }}>
              <ProductBadge product={d.product.toLowerCase()} />
              <span className="badge">{d.topic}</span>
              <span className="badge"><Icon name={typeIcon[d.type] || "fileText"} size={11} /> {d.type}</span>
            </div>
            <div>
              <h3 style={{ fontSize: "1em", marginBottom: 5 }}>{d.title}</h3>
              <p style={{ fontSize: "0.85em", color: "var(--bone-70)" }}>{d.desc}</p>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "auto", gap: 8, flexWrap: "wrap" }}>
              <OfficialBadge />
              <a href={d.url} target="_blank" rel="noopener noreferrer" className="btn btn-sm" style={{ textDecoration: "none" }}>
                Open <Icon name="external" size={13} />
              </a>
            </div>
          </div>
        ))}
      </div>
      {list.length === 0 ? (
        <div className="glass-card" style={{ textAlign: "center", color: "var(--bone-50)", padding: 40 }}>
          No resources match those filters.
        </div>
      ) : null}
    </div>
  );
}

/* ---------------- Glossary ---------------- */
function Glossary() {
  const [search, setSearch] = React.useState("");
  const [open, setOpen] = React.useState(null);
  const list = window.GLOSSARY.filter((g) =>
    g.term.toLowerCase().includes(search.toLowerCase()) || g.def.toLowerCase().includes(search.toLowerCase())
  );
  return (
    <div className="anim-fade-up" style={{ maxWidth: 860 }}>
      <div className="page-head">
        <h1>Glossary</h1>
        <p>The identity vocabulary you'll hear in every customer call — each term links back to the module that teaches it.</p>
      </div>
      <div className="glass-card" style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", marginBottom: 16 }}>
        <Icon name="search" size={17} style={{ color: "var(--bone-50)" }} />
        <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search terms…"
          aria-label="Search glossary"
          style={{ flex: 1, background: "none", border: "none", outline: "none", color: "var(--bone)", fontSize: "0.95em", fontFamily: "inherit", minHeight: 32 }} />
        {search ? <button className="btn btn-ghost btn-sm" onClick={() => setSearch("")} aria-label="Clear search"><Icon name="x" size={15} /></button> : null}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {list.map((g) => {
          const isOpen = open === g.term;
          return (
            <div key={g.term} className="glass-card" style={{ padding: 0, overflow: "hidden" }}>
              <button onClick={() => setOpen(isOpen ? null : g.term)} aria-expanded={isOpen}
                style={{ width: "100%", display: "flex", alignItems: "center", gap: 12, padding: "15px 18px", background: "none", border: "none", cursor: "pointer", textAlign: "left", minHeight: 52 }}>
                <span style={{ fontWeight: 600, flex: 1 }}>{g.term}</span>
                <span className="badge">{g.products}</span>
                <Icon name="chevronDown" size={15} style={{ transform: isOpen ? "rotate(180deg)" : "none", transition: "transform 0.25s", color: "var(--bone-50)" }} />
              </button>
              {isOpen ? (
                <div className="anim-fade-in" style={{ padding: "0 18px 16px" }}>
                  <p style={{ fontSize: "0.92em", color: "var(--bone-70)", lineHeight: 1.6, marginBottom: 12 }}>{g.def}</p>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
                    {(g.related || []).map((rid) => {
                      const m = findModule(rid);
                      return m ? (
                        <button key={rid} className="btn btn-sm" onClick={() => navigate("module/" + rid)}>
                          <Icon name="book" size={12} /> {PRODUCT_META[moduleTrack(rid)].label} M{m.num}: {m.title}
                        </button>
                      ) : null;
                    })}
                    {g.url ? (
                      <a href={g.url} target="_blank" rel="noopener noreferrer" className="btn btn-sm btn-ghost" style={{ color: "var(--bone-70)", textDecoration: "none" }}>
                        <Icon name="external" size={12} /> Docs
                      </a>
                    ) : null}
                  </div>
                </div>
              ) : null}
            </div>
          );
        })}
        {list.length === 0 ? (
          <div className="glass-card" style={{ textAlign: "center", color: "var(--bone-50)", padding: 40 }}>No terms match "{search}".</div>
        ) : null}
      </div>
    </div>
  );
}

Object.assign(window, { DocumentationLibrary, Glossary });