// detail.jsx — product detail page + related items.
const { Icon: DIcon } = window;

function ProductDetail({ productId, lang, t, onBack, onAdd, onView, favs, onFav, onOpenCart, products }) {
  const { PRODUCTS, fmtMoney, catName, Badge, Stars, QtyStepper, ProductGrid, StockLine, CatMedallion } = window;
  const source = products || PRODUCTS;
  const p = source.find((x) => x.id === productId);
  const [qty, setQty] = React.useState(1);
  const [activeThumb, setActiveThumb] = React.useState(0);
  React.useEffect(() => { setQty(1); setActiveThumb(0); window.scrollTo(0, 0); }, [productId]);
  if (!p) return null;
  const related = source.filter((x) => x.cat === p.cat && x.id !== p.id).slice(0, 4);
  const filler = related.length < 4 ? source.filter((x) => x.id !== p.id && !related.includes(x)).slice(0, 4 - related.length) : [];
  const relatedAll = related.concat(filler);
  const out = p.stock <= 0;

  function handleAdd() { onAdd(p, qty); onOpenCart(); }

  return (
    <main>
      <div className="container">
        <nav className="crumbs">
          <button onClick={onBack}>{t.storefront}</button>
          <DIcon name="chevron-right" size={15} className="flip-x" />
          <button onClick={onBack}>{catName(p.cat, lang)}</button>
          <DIcon name="chevron-right" size={15} className="flip-x" />
          <span style={{ color: "var(--fg1)" }}>{p.name[lang]}</span>
        </nav>

        <div className="detail">
          <div className="detail__media">
            <div className="detail__main">
              {p.img
                ? <img src={p.img} alt={p.name[lang]} style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 14, display: "block" }} />
                : <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-raised)", borderRadius: 14 }}><CatMedallion catId={p.cat} size={96} /></div>}
            </div>
            <div className="detail__thumbs">
              {[0, 1, 2, 3].map((i) => (
                <button key={i} className={"detail__thumb" + (activeThumb === i ? " is-active" : "")} onClick={() => setActiveThumb(i)}>
                  <CatMedallion catId={p.cat} size={26} />
                </button>
              ))}
            </div>
          </div>

          <div className="detail__info">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="pcard__cat">{catName(p.cat, lang)}</span>
              {p.badge && <Badge badge={p.badge} lang={lang} />}
            </div>
            <h1>{p.name[lang]}</h1>
            <div className="detail__tagline">{p.tagline[lang]}</div>
            <div className="pcard__rating">
              <span className="num-tabular caption">{t.skuLabel}: {p.sku}</span>
            </div>

            <div className="detail__price">
              <span className="now num-tabular">{fmtMoney(p.price, lang)}</span>
              {p.unit === "yr" && <span style={{ color: "var(--fg3)" }}>{t.perYear}</span>}
              {p.compareAt && <span className="price__was num-tabular" style={{ fontSize: "var(--text-lg)" }}>{fmtMoney(p.compareAt, lang)}</span>}
            </div>
            <div style={{ marginBottom: 18 }}><StockLine stock={p.stock} t={t} /></div>
            <p className="detail__desc">{p.desc[lang]}</p>

            <div className="detail__buy">
              <QtyStepper value={qty} onChange={setQty} max={p.stock || 99} />
              <button className="btn btn--lg btn--primary" style={{ flex: 1 }} onClick={handleAdd} disabled={out}>
                <DIcon name="cart" size={20} />{out ? t.outOfStock : t.addToCart}
              </button>
              <button className={"btn btn--lg btn--secondary btn--icon"} onClick={() => onFav(p.id)} aria-label="Save">
                <DIcon name="heart" size={20} fill={favs.includes(p.id) ? "var(--danger)" : "none"} style={{ color: favs.includes(p.id) ? "var(--danger)" : "inherit" }} />
              </button>
            </div>

            <div className="section__overline" style={{ marginTop: 28, marginBottom: 8 }}>{t.specs}</div>
            <div className="spectable">
              {p.specs.map((s, i) => (
                <div className="spectable__row" key={i}>
                  <span className="ic"><DIcon name="check-circle" size={20} /></span>
                  <span className="txt">{s[lang]}</span>
                </div>
              ))}
              <div className="spectable__row">
                <span className="ic"><DIcon name="shield" size={20} /></span>
                <span className="txt">{t.trustWarranty} · {lang === "en" ? "MegaTech certified hardware" : "أجهزة معتمدة من ميجاتك"}</span>
              </div>
            </div>
          </div>
        </div>

        <section className="section" style={{ paddingTop: 8 }}>
          <div className="section__head">
            <h2 className="section__title" style={{ fontSize: "var(--text-2xl)" }}>{t.relatedTitle}</h2>
          </div>
          <ProductGrid products={relatedAll} lang={lang} t={t} cardStyle="standard"
            onAdd={(prod) => onAdd(prod, 1)} onView={onView} favs={favs} onFav={onFav} />
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { ProductDetail });