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

// Auto-advancing hero slideshow. One image = static; several = cross-fade + dots.
function HeroSlideshow({ images }) {
  const list = (images || []).filter(Boolean);
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    if (list.length <= 1) return;
    const id = setInterval(() => setI((p) => (p + 1) % list.length), 5000);
    return () => clearInterval(id);
  }, [list.length]);
  // Fixed 4:3 frame + cover so the image fills the box (no empty/white padding).
  const wrap = { position: "relative", width: "100%", aspectRatio: "4 / 3", minHeight: 280, borderRadius: 14, overflow: "hidden", background: "var(--brand-primary-050)" };
  const imgStyle = { width: "100%", height: "100%", objectFit: "cover", display: "block" };
  if (list.length === 1) return <div style={wrap}><img src={list[0]} alt="" style={imgStyle} /></div>;
  return (
    <div style={wrap}>
      {list.map((src, idx) => (
        <img key={idx} src={src} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: idx === i ? 1 : 0, transition: "opacity 0.8s ease" }} />
      ))}
      <div style={{ position: "absolute", bottom: 12, insetInlineStart: 0, insetInlineEnd: 0, display: "flex", justifyContent: "center", gap: 8 }}>
        {list.map((_, idx) => (
          <button key={idx} onClick={() => setI(idx)} aria-label={"Slide " + (idx + 1)}
            style={{ width: 9, height: 9, borderRadius: "50%", border: "none", padding: 0, cursor: "pointer",
              background: idx === i ? "#fff" : "rgba(255,255,255,0.55)", boxShadow: "0 0 0 1px rgba(0,0,0,0.15)" }} />
        ))}
      </div>
    </div>
  );
}

function Hero({ t, lang, variant, onBrowse, onSales, heroImages }) {
  const cls = variant === "bold" ? "hero hero--bold" : variant === "center" ? "hero hero--center" : "hero";
  const content = (
    <div className="hero__grid">
      <div className="hero__copy">
        {t.heroOverline && (
          <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">
        {heroImages && heroImages.length ? (
          <HeroSlideshow images={heroImages} />
        ) : (
          <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>
    </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">
          <button className={"catcard" + (activeCat === "all" ? " is-active" : "")} onClick={() => onPick("all")}>
            <span className="catcard__ic"><SFIcon name="boxes" size={26} /></span>
            <span className="catcard__name">{t.allProducts}</span>
          </button>
          {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="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" onClick={() => onView(p.id)} role="button" tabIndex={0}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onView(p.id); } }}
        style={{ cursor: "pointer" }} aria-label={p.name[lang]}>
        <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={(e) => { e.stopPropagation(); 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 SavedItemsPage({ lang, t, cardStyle, products, favs, onFav, onAdd, onView, onBack, onBrowse }) {
  const saved = (products || []).filter((p) => favs.includes(p.id));
  return (
    <main>
      <div className="container" style={{ padding: "32px 0 64px" }}>
        <button className="linkbtn" onClick={onBack} style={{ marginBottom: 16 }}>
          <SFIcon name="arrow-left" size={16} className="flip-x" />{t.backToStore}
        </button>
        <div style={{ display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap", marginBottom: 6 }}>
          <h2 style={{ margin: 0 }}>{t.savedItems}</h2>
          {saved.length > 0 && (
            <span style={{ color: "var(--fg3)", fontSize: "var(--text-sm)" }}>{saved.length} {t.savedCount}</span>
          )}
        </div>
        <p style={{ color: "var(--fg3)", marginTop: 0, marginBottom: 24 }}>{t.savedItemsSub}</p>

        {saved.length === 0 ? (
          <div className="emptycart">
            <div className="ic"><SFIcon name="heart" size={32} /></div>
            <h4>{t.savedEmptyTitle}</h4>
            <p>{t.savedEmptySub}</p>
            <button className="btn btn--primary" onClick={onBrowse}>{t.startShopping}</button>
          </div>
        ) : (
          <ProductGrid products={saved} lang={lang} t={t} cardStyle={cardStyle}
            onAdd={onAdd} onView={onView} favs={favs} onFav={onFav} />
        )}
      </div>
    </main>
  );
}

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, heroImages }) {
  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.tagline.ar + 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} heroImages={heroImages} />
      <CategoryRail t={t} lang={lang} activeCat={activeCat} onPick={setActiveCat} categories={categories} />
      <section className="section section--catalog" 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, SavedItemsPage });