/* global React */
const { useState, useMemo } = window.ReactHooks;

function CatalogPage() {
  const [cat, setCat] = useState("All");
  const [sort, setSort] = useState("Popular");
  const products = window.PRODUCTS;
  const categories = ["All", ...Array.from(new Set(products.map((p) => p.category)))];

  const list = useMemo(() => {
    let l = products;
    if (cat !== "All") l = l.filter((p) => p.category === cat);
    l = [...l];
    if (sort === "Popular") l.sort((a, b) => b.downloads - a.downloads);
    if (sort === "Newest") l.sort((a, b) => b.updated.localeCompare(a.updated));
    if (sort === "Price") l.sort((a, b) => a.price - b.price);
    if (sort === "Rating") l.sort((a, b) => b.rating - a.rating);
    return l;
  }, [cat, sort]);

  return (
    <main>
      <section className="page-head">
        <div className="container">
          <div className="crumb">
            <a href="#/home">Home</a><span>/</span><span>Catalog</span>
          </div>
          <h1>Catalog</h1>
          <p className="sub">Ten custom visuals for Power BI, maintained on independent roadmaps and supported directly by TC engineers. Pilot any visual free for 30 days.</p>
        </div>
      </section>

      <section className="section compact" style={{ padding: "32px 0" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
            <div className="tabs" style={{ margin: 0, border: 0 }}>
              {categories.map((c) => (
                <button key={c} className={"tab " + (cat === c ? "active" : "")} onClick={() => setCat(c)}>{c}</button>
              ))}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--muted)" }}>Sort</span>
              <select value={sort} onChange={(e) => setSort(e.target.value)} style={{ background: "transparent", border: "1px solid var(--line-soft)", padding: "6px 10px", fontFamily: "var(--f-mono)", fontSize: 12, color: "var(--fg)" }}>
                <option>Popular</option>
                <option>Newest</option>
                <option>Price</option>
                <option>Rating</option>
              </select>
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 112 }}>
        <div className="container">
          <div className="cards">
            {list.map((p) => (
              <a key={p.id} href={"#/product?id=" + p.id} className="card">
                <div className="card-vis">
                  <div className="card-tag">{p.category}</div>
                  <window.ProductVisual id={p.id} />
                </div>
                <div>
                  <div className="card-title">{p.name}</div>
                  <div className="card-sub">{p.tagline}</div>
                </div>
                <div className="card-foot">
                  <span>v{p.version} · {p.rating}★</span>
                  <span className="price">${p.price}<span style={{ color: "var(--muted)", textTransform: "lowercase", letterSpacing: 0 }}> / seat / mo</span></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

window.CatalogPage = CatalogPage;