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

// Render a small subset of markdown (bold, italic, links, "- " lists) to React.
function renderDescMarkdown(text) {
  if (!text) return null;
  const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  const inline = (s) =>
    esc(s)
      .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
      .replace(/\*([^*]+)\*/g, "<em>$1</em>")
      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (m, label, href) => {
        const safe = /^(https?:\/\/|mailto:|\/)/i.test(href) ? href : "#";
        return `<a href="${safe}" target="_blank" rel="noopener noreferrer">${label}</a>`;
      });
  const lines = String(text).split("\n");
  const blocks = [];
  let list = null;
  lines.forEach((line, i) => {
    const m = line.match(/^\s*-\s+(.*)$/);
    if (m) {
      if (!list) { list = []; }
      list.push(<li key={"li" + i} dangerouslySetInnerHTML={{ __html: inline(m[1]) }} />);
    } else {
      if (list) { blocks.push(<ul key={"ul" + i}>{list}</ul>); list = null; }
      if (line.trim()) blocks.push(<p key={"p" + i} dangerouslySetInnerHTML={{ __html: inline(line) }} />);
    }
  });
  if (list) blocks.push(<ul key="ul-end">{list}</ul>);
  return blocks;
}

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);
  const [copied, setCopied] = React.useState(false);
  React.useEffect(() => { setQty(1); setActiveThumb(0); setCopied(false); window.scrollTo(0, 0); }, [productId]);
  if (!p) return null;

  async function handleShare() {
    const url = window.location.origin + window.location.pathname + "?p=" + encodeURIComponent(p.id);
    try {
      if (navigator.share) { await navigator.share({ title: p.name[lang], url }); return; }
    } catch (e) { if (e && e.name === "AbortError") return; }
    try {
      await navigator.clipboard.writeText(url);
    } catch (e) {
      try {
        const ta = document.createElement("textarea");
        ta.value = url; ta.style.position = "fixed"; ta.style.opacity = "0";
        document.body.appendChild(ta); ta.select(); document.execCommand("copy"); document.body.removeChild(ta);
      } catch (e2) {}
    }
    setCopied(true); setTimeout(() => setCopied(false), 1800);
  }
  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 gallery = [p.img].concat(p.images || []).filter(Boolean);
  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">
              {gallery.length
                ? <img src={gallery[Math.min(activeThumb, gallery.length - 1)]} 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>
            {gallery.length > 1 && (
              <div className="detail__thumbs">
                {gallery.map((src, i) => (
                  <button key={i} className={"detail__thumb" + (activeThumb === i ? " is-active" : "")} onClick={() => setActiveThumb(i)}>
                    <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "inherit", display: "block" }} />
                  </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>
            <div className="detail__desc">{renderDescMarkdown(p.desc[lang])}</div>

            <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>
              <button className={"btn btn--lg btn--secondary btn--icon"} onClick={handleShare}
                aria-label={t.share} title={copied ? t.linkCopied : t.share}>
                <DIcon name={copied ? "check" : "share"} size={20} style={{ color: copied ? "var(--success)" : "inherit" }} />
              </button>
            </div>
            {copied && (
              <div className="caption" style={{ color: "var(--success)", marginTop: 8 }}>{t.linkCopied}</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>
              ))}
              {p.warranty !== false && (
                <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 });