// storefront.jsx — hero, category rail, catalog toolbar, product grid + cards.
const { Icon: SFIcon } = window;

function Hero({ t, lang, variant, onBrowse, onSales, heroImageUrl }) {
  const cls = variant === "bold" ? "hero hero--bold" : variant === "center" ? "hero hero--center" : "hero";
  const content = (
    <div className="hero__grid">
      <div className="hero__copy">
        <div className="hero__overline">
          <SFIcon name="zap" size={15} fill="currentColor" stroke={0} />
          <span className="ov">{t.heroOverline}</span>
        </div>
        <h1>{t.heroTitle}</h1>
        <p className="hero__sub">{t.heroSub}</p>
        <div className="hero__cta">
          <button className={"btn btn--lg " + (variant === "bold" ? "btn--onbrand" : "btn--primary")} onClick={onBrowse}>
            {t.browse}<SFIcon name="arrow-right" size={20} className="flip-x" />
          </button>
          <button className={"btn btn--lg " + (variant === "bold" ? "btn--onbrand-ghost" : "btn--secondary")} onClick={onSales}>
            <SFIcon name="headset" size={20} />{t.talkSales}
          </button>
        </div>
      </div>
      <div className="hero__media">
        {heroImageUrl ? (
          <img src={heroImageUrl} alt="" style={{ width: "100%", height: "100%", minHeight: 280, objectFit: "cover", borderRadius: 14, display: "block" }} />
        ) : (
          <div className="hero__media-img" style={{ width: "100%", height: "100%", minHeight: 280, display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-raised)", borderRadius: 14 }}>
            <SFIcon name="register" size={120} />
          </div>
        )}
        <div className="hero__float">
          <div className="ic"><SFIcon name="check-circle" size={22} /></div>
          <div>
            <div className="t">{lang === "en" ? "Set up in under an hour" : "تجهيز في أقل من ساعة"}</div>
            <div className="s">{lang === "en" ? "Pre-configured & certified" : "معدّ مسبقاً ومعتمد"}</div>
          </div>
        </div>
      </div>
    </div>
  );
  return (
    <section className={cls}>
      <div className="container">
        <div className="hero__inner">{content}</div>
      </div>
    </section>
  );
}

function CategoryRail({ t, lang, activeCat, onPick, categories }) {
  const CATEGORIES = categories || window.CATEGORIES;
  return (
    <section className="section" id="catalog" style={{ paddingBottom: 0 }}>
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__overline">{t.catalog}</div>
            <h2 className="section__title">{t.shopByCat}</h2>
          </div>
        </div>
        <div className="catrail">
          {CATEGORIES.map((c) => (
            <button key={c.id} className={"catcard" + (activeCat === c.id ? " is-active" : "")} onClick={() => onPick(activeCat === c.id ? "all" : c.id)}>
              <span className="catcard__ic"><window.CatGlyph cat={c} size={26} /></span>
              <span className="catcard__name">{c[lang]}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function Toolbar({ t, lang, activeCat, onPick, sort, onSort, count, categories }) {
  const CATEGORIES = categories || window.CATEGORIES;
  return (
    <div className="toolbar">
      <div className="filterchips">
        <button className={"chip" + (activeCat === "all" ? " chip--active" : "")} onClick={() => onPick("all")}>{t.allProducts}</button>
        {CATEGORIES.map((c) => (
          <button key={c.id} className={"chip" + (activeCat === c.id ? " chip--active" : "")} onClick={() => onPick(c.id)}>
            <span className="chip__icon"><window.CatGlyph cat={c} size={16} /></span>{c[lang]}
          </button>
        ))}
      </div>
      <div className="toolbar__right">
        <span className="toolbar__count num-tabular">{count} {count === 1 ? t.resultsOne : t.resultsMany}</span>
        <div className="selectwrap">
          <select value={sort} onChange={(e) => onSort(e.target.value)} aria-label={t.sortBy}>
            <option value="featured">{t.sortFeatured}</option>
            <option value="price-low">{t.sortPriceLow}</option>
            <option value="price-high">{t.sortPriceHigh}</option>
            <option value="rating">{t.sortRating}</option>
          </select>
          <span className="caret"><SFIcon name="chevron-down" size={16} /></span>
        </div>
      </div>
    </div>
  );
}

function ProductCard({ product: p, lang, t, cardStyle, onAdd, onView, fav, onFav }) {
  const { fmtMoney, catName, ProductMedia, Badge, Stars, ProductMedia: PM } = window;
  const [added, setAdded] = React.useState(false);
  const out = p.stock <= 0;
  const sub = p.unit === "yr" ? t.perYear : null;
  const cls = "pcard pcard--" + cardStyle;

  function handleAdd() {
    if (out) return;
    onAdd(p);
    setAdded(true);
    setTimeout(() => setAdded(false), 1300);
  }

  return (
    <article className={cls}>
      <div className="pcard__media media-ar">
        <ProductMedia product={p} lang={lang} />
        {p.badge && <div className="pcard__badge"><Badge badge={p.badge} lang={lang} /></div>}
        <button className={"pcard__fav" + (fav ? " is-on" : "")} onClick={() => onFav(p.id)} aria-label="Save">
          <SFIcon name="heart" size={18} fill={fav ? "currentColor" : "none"} />
        </button>
      </div>
      <div className="pcard__body">
        <div className="pcard__cat">{catName(p.cat, lang)}</div>
        <div className="pcard__name" onClick={() => onView(p.id)}>{p.name[lang]}</div>
        <div className="pcard__tagline">{p.tagline[lang]}</div>

        {cardStyle === "standard" && (
          <ul className="pcard__specs">
            {p.specs.map((s, i) => (
              <li key={i}><span className="ic"><SFIcon name="check" size={15} /></span>{s[lang]}</li>
            ))}
          </ul>
        )}
        {cardStyle === "spec" && (
          <>
            <div className="specgrid">
              {p.specs.slice(0, 3).map((s, i) => (
                <div key={i}><div className="v">{s[lang]}</div></div>
              ))}
              <div><div className="k">{t.skuLabel}</div><div className="v">{p.sku}</div></div>
            </div>
          </>
        )}

        <div className="pcard__foot">
          <div className="price">
            {p.compareAt && <span className="price__was num-tabular">{fmtMoney(p.compareAt, lang)}</span>}
            <span className="price__now num-tabular">{fmtMoney(p.price, lang)}</span>
            {sub ? <span className="price__sub">{t.perYear}</span> : <StockLineMini stock={p.stock} t={t} />}
          </div>
          <button className={"btn btn--sm " + (added ? "btn--secondary" : "btn--primary")} onClick={handleAdd} disabled={out}>
            {out ? t.outOfStock : added ? <><SFIcon name="check" size={16} />{t.added}</> : <><SFIcon name="cart" size={16} />{t.addToCart}</>}
          </button>
        </div>
      </div>
    </article>
  );
}

function StockLineMini({ stock, t }) {
  if (stock <= 0) return <span className="price__sub" style={{ color: "var(--fg4)" }}>{t.outOfStock}</span>;
  if (stock <= 12) return <span className="price__sub" style={{ color: "var(--warning-fg)" }}>{t.lowStock}</span>;
  return <span className="price__sub" style={{ color: "var(--success)" }}>{t.inStock}</span>;
}

function ProductGrid({ products, lang, t, cardStyle, onAdd, onView, favs, onFav }) {
  return (
    <div className="pgrid">
      {products.map((p) => (
        <ProductCard key={p.id} product={p} lang={lang} t={t} cardStyle={cardStyle}
          onAdd={onAdd} onView={onView} fav={favs.includes(p.id)} onFav={onFav} />
      ))}
    </div>
  );
}

function Storefront({ t, lang, heroVariant, cardStyle, activeCat, setActiveCat, sort, setSort, query, onAdd, onView, favs, onFav, catalogRef, onSales, onBrowse, products, categories, heroImageUrl }) {
  const { PRODUCTS } = window;
  const source = products || PRODUCTS;
  const filtered = React.useMemo(() => {
    let list = source.filter((p) => p.status !== "draft");
    if (activeCat !== "all") list = list.filter((p) => p.cat === activeCat);
    if (query.trim()) {
      const q = query.trim().toLowerCase();
      list = list.filter((p) =>
        (p.name.en + p.name.ar + p.tagline.en + p.sku).toLowerCase().includes(q));
    }
    if (sort === "price-low") list.sort((a, b) => a.price - b.price);
    else if (sort === "price-high") list.sort((a, b) => b.price - a.price);
    else if (sort === "rating") list.sort((a, b) => b.rating - a.rating);
    return list;
  }, [activeCat, query, sort, source]);

  return (
    <main>
      <Hero t={t} lang={lang} variant={heroVariant} onBrowse={onBrowse} onSales={onSales} heroImageUrl={heroImageUrl} />
      <CategoryRail t={t} lang={lang} activeCat={activeCat} onPick={setActiveCat} categories={categories} />
      <section className="section" ref={catalogRef}>
        <div className="container">
          <Toolbar t={t} lang={lang} activeCat={activeCat} onPick={setActiveCat} sort={sort} onSort={setSort} count={filtered.length} categories={categories} />
          {filtered.length === 0 ? (
            <div className="emptycart" style={{ height: 240 }}>
              <div className="ic"><SFIcon name="search" size={28} /></div>
              <h4>{lang === "en" ? "No products found" : "لا توجد منتجات"}</h4>
              <p>{lang === "en" ? "Try a different category or search term." : "جرّب فئة أو كلمة بحث مختلفة."}</p>
            </div>
          ) : (
            <ProductGrid products={filtered} lang={lang} t={t} cardStyle={cardStyle}
              onAdd={onAdd} onView={onView} favs={favs} onFav={onFav} />
          )}
        </div>
      </section>
    </main>
  );
}

const { TrustBar } = window;
Object.assign(window, { Hero, CategoryRail, Toolbar, ProductCard, ProductGrid, Storefront });