/* ============================================================
   Farbodfilms — Shop grid, product card, product detail
   ============================================================ */

function ProductCard({ p, go, addToCart, theme, large = false }) {
  const [hover, setHover] = React.useState(false);
  const pair = p.pairs && p.pairs[0];
  // Bundle card: split preview of every included look.
  const bundleLooks = p.bundle
    ? (p.includes || []).map((iid) => PRODUCTS.find((x) => x.id === iid)).filter((x) => x && x.pairs)
    : null;
  return (
    <article
      className={"card " + (large ? "card-lg " : "") + (p.bundle ? "card-bundle" : "")}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => go("product:" + p.id)}
    >
      <div className="card-media">
        {bundleLooks ? (
          <div className="card-split" style={{ "--n": bundleLooks.length }}>
            {bundleLooks.map((inc) => (
              <div className="card-split-cell" key={inc.id}>
                <Scene sceneKey={inc.heroScene} grade={hover ? inc.grade : "ungraded"} grain={THEMES[theme].grain} photo={inc.pairs[0]} />
                <span className="card-split-label mono">{inc.name}</span>
              </div>
            ))}
          </div>
        ) : (
          <Scene sceneKey={p.heroScene} grade={hover ? p.grade : "ungraded"} grain={THEMES[theme].grain} photo={pair} />
        )}
        <span className="card-state mono">{hover ? "GRADED" : "ORIGINAL"}</span>
        {p.bundle && <span className="card-flag mono">BUNDLE</span>}
      </div>
      <div className="card-body">
        <div className="card-row">
          <h3 className="card-name">{p.name}</h3>
          <span className="card-price">€{p.price}</span>
        </div>
        <p className="card-tag">{p.tagline}</p>
        <div className="card-foot">
          <div className="card-looks">
            {p.looks.map((l) => <span className="chip mono" key={l}>{l}</span>)}
          </div>
        </div>
      </div>
    </article>
  );
}

function Shop({ go, addToCart, theme }) {
  const [filter, setFilter] = React.useState("all");
  const filtered = PRODUCTS.filter((p) => {
    if (filter === "all") return true;
    if (filter === "single") return !p.bundle;
    if (filter === "bundle") return p.bundle;
    return true;
  });
  return (
    <div className="page page-shop">
      <div className="shop-head">
        <span className="eyebrow mono">Collection · {COLLECTION}</span>
        <h1 className="shop-title">The looks.</h1>
        <p className="shop-intro">
          Cinematic colour LUTs, graded by hand on real footage. Hover any look to preview the grade —
          open it for the full before/after.
        </p>
        <div className="shop-filters">
          {[["all", "All"], ["single", "Single LUTs"], ["bundle", "Bundles"]].map(([k, l]) => (
            <button key={k} className={"filter " + (filter === k ? "is-active" : "")} onClick={() => setFilter(k)}>
              {l}
            </button>
          ))}
        </div>
      </div>
      <div className="shop-grid">
        {filtered.map((p) => (
          <ProductCard key={p.id} p={p} go={go} addToCart={addToCart} theme={theme} />
        ))}
        <article className="card card-soon" aria-disabled="true">
          <div className="card-media card-media-soon">
            <div className="soon-mark mono">{NEXT_DROP.collection}</div>
          </div>
          <div className="card-body">
            <div className="card-row">
              <h3 className="card-name">Next drop</h3>
              <span className="card-price mono">SOON</span>
            </div>
            <p className="card-tag">New looks land every two seasons. {NEXT_DROP.collection} — {NEXT_DROP.eta}.</p>
            <div className="card-foot">
              <div className="card-looks"><span className="chip mono">Notify me</span></div>
            </div>
          </div>
        </article>
      </div>
    </div>
  );
}

function ProductPage({ id, go, addToCart, theme, buyNow }) {
  const p = PRODUCTS.find((x) => x.id === id) || PRODUCTS[0];
  const [active, setActive] = React.useState(0);
  const grain = THEMES[theme].grain;
  const pairs = p.pairs || null;
  const activePair = pairs ? pairs[active] : null;

  // Bundle: show every included look as its own labelled before/after.
  const bundleLooks = p.bundle
    ? p.includes.map((iid) => PRODUCTS.find((x) => x.id === iid)).filter((x) => x && x.pairs)
    : null;

  return (
    <div className="page page-product">
      <button className="back mono" onClick={() => go("shop")}>← All looks</button>
      <div className="pp-grid">
        {p.bundle && bundleLooks ? (
          <div className="pp-media">
            <div className="pp-bundle-stack">
              {bundleLooks.map((inc) => (
                <div className="pp-bundle-look" key={inc.id}>
                  <div className="pp-bundle-head">
                    <span className="pp-bundle-sw" style={{ background: inc.swatch }} />
                    <span className="pp-bundle-name">{inc.name}</span>
                    <button className="pp-bundle-link mono" onClick={() => go("product:" + inc.id)}>View look →</button>
                  </div>
                  <BeforeAfter sceneKey={inc.scenes[0]} grade={inc.grade} grain={grain} label={inc.name} photo={inc.pairs[0]} />
                </div>
              ))}
            </div>
          </div>
        ) : (
        <div className="pp-media">
          <BeforeAfter sceneKey={p.scenes[active]} grade={p.grade} grain={grain} label={p.name} photo={activePair} />
          <div className="pp-thumbs">
            {(pairs || p.scenes).map((s, i) => (
              <button
                key={i}
                className={"pp-thumb " + (active === i ? "is-active" : "")}
                onClick={() => setActive(i)}
              >
                <Scene sceneKey={pairs ? null : s} grade={p.grade} grain={grain} photo={pairs ? pairs[i] : null} />
                <span className="pp-thumb-cap mono">{pairs ? pairs[i].label.split(" · ")[0] : SCENES[s].label.split(" · ")[0]}</span>
              </button>
            ))}
          </div>
        </div>
        )}

        <div className="pp-info">
          <span className="eyebrow mono">Farbodfilms · {p.collection}{p.bundle ? " · Collection" : " LUT"}</span>
          <h1 className="pp-title">{p.name}</h1>
          <p className="pp-tagline">{p.tagline}</p>
          <div className="pp-swatch" style={{ background: p.swatch }} />
          <p className="pp-desc">{p.description}</p>

          {p.bundle ? (
            <div className="pp-includes">
              <span className="pp-h mono">Included</span>
              {p.includes.map((iid) => {
                const inc = PRODUCTS.find((x) => x.id === iid);
                return (
                  <button key={iid} className="pp-inc" onClick={() => go("product:" + iid)}>
                    <span className="pp-inc-sw" style={{ background: inc.swatch }} />
                    <span className="pp-inc-name">{inc.name}</span>
                    <span className="pp-inc-tag">{inc.tagline}</span>
                    <span className="pp-inc-arrow">→</span>
                  </button>
                );
              })}
            </div>
          ) : (
            <div className="pp-looks">
              {p.looks.map((l) => <span className="chip mono" key={l}>{l}</span>)}
            </div>
          )}

          <div className="pp-buy">
            <div className="pp-price-row">
              <span className="pp-price">€{p.price}</span>
              {p.bundle && <span className="pp-save mono">save 14%</span>}
            </div>
            <div className="pp-buy-btns">
              <Btn full onClick={() => buyNow(p)}>Buy now · €{p.price}</Btn>
              <Btn full variant="outline" onClick={() => addToCart(p)}>Add to cart</Btn>
            </div>
            <ul className="pp-meta">
              <li><span className="mono">FORMAT</span> .cube + .look · LOG & Rec709</li>
              <li><span className="mono">WORKS IN</span> Premiere · DaVinci · Final Cut · more</li>
              <li><span className="mono">DELIVERY</span> Instant download after checkout</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="pp-related">
        <h2 className="section-title">More from {p.collection}</h2>
        <div className="featured-grid">
          {PRODUCTS.filter((x) => x.id !== p.id).slice(0, 2).map((x) => (
            <ProductCard key={x.id} p={x} go={go} addToCart={addToCart} theme={theme} />
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProductCard, Shop, ProductPage });