// Products page — grid + filters

const Products = ({ navigate }) => {
  const [family, setFamily] = React.useState("All");
  const [collection, setCollection] = React.useState("All");
  const [sort, setSort] = React.useState("default");

  const filtered = React.useMemo(() => {
    let xs = PRODUCTS.slice();
    if (family !== "All") xs = xs.filter((p) => Array.isArray(p.family) ? p.family.includes(family) : p.family === family);
    if (collection !== "All") xs = xs.filter((p) => p.collection === collection);
    if (sort === "price-asc") xs.sort((a, b) => a.price - b.price);
    if (sort === "price-desc") xs.sort((a, b) => b.price - a.price);
    return xs;
  }, [family, collection, sort]);

  return (
    <main>
      {/* Header */}
      <section style={{ padding: "100px var(--pad-x) 80px", maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12" style={{ alignItems: "end" }}>
          <div className="col-span-8">
            <span className="caption">Index - Volume 01</span>
            <h1 className="d-xl" style={{ margin: "20px 0 0", fontStyle: "italic" }}>
              Six scents,<br/>
              <span style={{ fontStyle: "normal", fontWeight: 500 }}>indexed.</span>
            </h1>
          </div>
          <div className="col-span-4" style={{ paddingBottom: 12 }}>
            <p className="mono" style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink-mute)", margin: 0, lineHeight: 1.6 }}>
              Sort, filter, or read the full notes. Each scent is 30ml EDP, made in small batch.
            </p>
          </div>
        </div>
      </section>

      {/* Filter bar */}
      <div style={{ position: "sticky", top: 65, zIndex: 30, background: "var(--cream)", borderTop: "1px solid var(--hair-strong)", borderBottom: "1px solid var(--hair-strong)" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 0, maxWidth: "var(--max)", margin: "0 auto", padding: "0 var(--pad-x)" }}>
          <FilterGroup label="Family" value={family} setValue={setFamily} options={FAMILIES} />
          <FilterGroup label="Collection" value={collection} setValue={setCollection} options={COLLECTIONS} />
          <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 14, padding: "14px 0" }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", opacity: 0.55 }}>Sort</span>
            <select
              value={sort}
              onChange={(e) => setSort(e.target.value)}
              style={{ background: "transparent", border: "1px solid var(--hair-strong)", padding: "8px 12px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--ink)", borderRadius: 0 }}
            >
              <option value="default">Curator's order</option>
              <option value="price-asc">Price · low to high</option>
              <option value="price-desc">Price · high to low</option>
            </select>
            <span className="mono" style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", opacity: 0.55 }}>{filtered.length}/{PRODUCTS.length}</span>
          </div>
        </div>
      </div>

      {/* Product grid */}
      <section style={{ padding: "80px var(--pad-x) 160px", maxWidth: "var(--max)", margin: "0 auto" }}>
        {filtered.length === 0 && (
          <div style={{ padding: "80px 0", textAlign: "center" }}>
            <p className="d-m" style={{ fontStyle: "italic", margin: 0 }}>No scents in that combination, yet.</p>
            <button className="lnk" style={{ marginTop: 24 }} onClick={() => { setFamily("All"); setCollection("All"); }}>Reset filters →</button>
          </div>
        )}
        <div className="grid12" style={{ rowGap: 80 }}>
          {filtered.map((p, i) => {
            // Asymmetric layout — alternate full vs grid
            const wide = i % 5 === 2;
            return (
              <div key={p.id} className={wide ? "col-span-12" : "col-span-4"}>
                {wide ? (
                  <a href={"#/p/" + p.id} className="pcard editorial-pcard" onClick={(e) => { e.preventDefault(); navigate("/p/" + p.id); }}>
                    {p.image
                      ? <img src={p.image} alt={p.name} style={{ aspectRatio: "5/4", width: "100%", display: "block", objectFit: "cover" }} />
                      : <div className="ph" data-label={"Editorial · " + p.name} style={{ aspectRatio: "5/4" }}></div>
                    }
                    <div>
                      <span className="caption">№ {p.num} · {p.collection}</span>
                      <h3 style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 64, lineHeight: 1, margin: "18px 0 10px" }}>{p.name}</h3>
                      <p style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".06em", color: "var(--ink-mute)", margin: 0 }}>{p.translation} · {Array.isArray(p.family) ? p.family.join(" · ") : p.family}</p>
                      <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.3, marginTop: 24, maxWidth: 40 + "ch" }}>{p.blurb}</p>
                      <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                        <span className="mono" style={{ fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase" }}>{formatIDR(p.price)}</span>
                        <span className="lnk">Read the notes →</span>
                      </div>
                    </div>
                  </a>
                ) : (
                  <ProductCard p={p} navigate={navigate} />
                )}
              </div>
            );
          })}
        </div>
      </section>
    </main>
  );
};

const FilterGroup = ({ label, value, setValue, options }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 28px 14px 0", marginRight: 28, borderRight: "1px solid var(--hair)" }}>
    <span className="mono" style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", opacity: 0.55 }}>{label}</span>
    <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
      {options.map((o) => {
        const isSignature = o === "Signature";
        const isActive = value === o;
        return (
          <button
            key={o}
            onClick={() => setValue(o)}
            className="mono"
            style={{
              padding: isSignature ? "6px 10px 4px" : "6px 10px",
              fontSize: 11,
              letterSpacing: ".12em",
              textTransform: "uppercase",
              border: isSignature
                ? "none"
                : "1px solid " + (isActive ? "var(--ink)" : "transparent"),
              borderBottom: isSignature
                ? "2px solid " + (isActive ? "var(--ink)" : "rgba(15,14,12,0.25)")
                : undefined,
              background: isSignature ? "transparent" : (isActive ? "var(--ink)" : "transparent"),
              color: isSignature ? "var(--ink)" : (isActive ? "var(--cream)" : "var(--ink)"),
              fontFamily: isSignature ? "var(--serif)" : undefined,
              fontStyle: isSignature ? "italic" : undefined,
              fontSize: isSignature ? 14 : 11,
              letterSpacing: isSignature ? "0" : ".12em",
              textTransform: isSignature ? "none" : "uppercase",
              fontWeight: isActive && isSignature ? 500 : 400,
              borderRadius: 0,
            }}
          >{o}</button>
        );
      })}
    </div>
  </div>
);

window.Products = Products;