/* Rass Jerseys - product grid, cards, detail view */

function badgeTag(badge) {
  if (!badge) return null;
  if (badge === "Best Seller") return <span className="tag tag-gold">★ Best Seller</span>;
  if (badge === "New Arrival") return <span className="tag tag-new">New Arrival</span>;
  return null;
}

function supportsDetailPhotos(product) {
  return product && product.type === "Home";
}

function ProductCard({ product, onOpen }) {
  const t = RassData.teamById(product.team);
  const isFeatured = product.type === "Home";

  return (
    <article className={`card ${isFeatured ? "card-featured" : "card-standard"}`} data-type={product.type} onClick={() => onOpen(product)}>
      {isFeatured && <div className="card-featured-crown">★ Best Seller</div>}
      <div className="card-media">
        {badgeTag(product.badge) && <div className="card-badge">{badgeTag(product.badge)}</div>}
        <JerseyPlaceholder product={product} ratio="4 / 5" />
      </div>
      <div className="card-body">
        <div className="card-team">
          {t.name} <span className="muted">· {product.type}</span>
        </div>
        <SizeDots sizes={RassData.productSizes(product)} />
        <div className="card-line" style={{ alignItems: "flex-end" }}>
          <span>
            <span className="price card-price">{RassData.taka(product.price)}</span>
            <span className="muted" style={{ display: "block", fontSize: 12, textDecoration: "line-through" }}>
              {RassData.taka(product.compareAtPrice)}
            </span>
          </span>
          <span className="tag tag-hot">{product.discountLabel}</span>
        </div>
        <button className="btn btn-primary btn-block card-add-btn" onClick={(e) => { e.stopPropagation(); onOpen(product); }}>
          Add to Cart
        </button>
      </div>
    </article>
  );
}

function ProductGrid({ onOpen, innerRef }) {
  const list = RassData.PRODUCTS.filter((product) => product.active);
  return (
    <section className="section grid-sect" ref={innerRef}>
      <div className="wrap">
        <div className="sect-head">
          <div>
            <p className="sect-kicker">Argentina Collection</p>
            <h2 className="sect-title">All Jerseys</h2>
          </div>
          <span className="muted grid-count">{list.length} kits available</span>
        </div>
        <div className="product-grid grid-three">
          {list.map((product) => <ProductCard key={product.id} product={product} onOpen={onOpen} />)}
        </div>
      </div>
    </section>
  );
}

function DetailView({ product, onBack, onAddToCart }) {
  const t = RassData.teamById(product.team);
  const quality = RassData.JERSEY_QUALITY;
  const [size, setSize] = React.useState(RassData.productSizes(product)[0] || null);
  const [qty, setQty] = React.useState(1);
  const [wantsName, setWantsName] = React.useState(false);
  const [customNames, setCustomNames] = React.useState([""]);
  const [added, setAdded] = React.useState(false);
  const [activeImg, setActiveImg] = React.useState("front");

  React.useEffect(() => {
    setSize(RassData.productSizes(product)[0] || null);
    setQty(1);
    setWantsName(false);
    setCustomNames([""]);
    setAdded(false);
    setActiveImg("front");
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [product.id]);

  const changeQty = (next) => {
    const value = Math.max(1, next);
    setQty(value);
    setCustomNames((names) => RassData.resizeNames(names, value));
  };

  const setNameAt = (index, value) => {
    setCustomNames((names) => {
      const copy = RassData.resizeNames(names, qty);
      copy[index] = value;
      return copy;
    });
  };

  const handleAdd = () => {
    if (!size) return;
    const names = wantsName ? RassData.resizeNames(customNames, qty).map((n) => n.trim()) : [];
    onAddToCart({ productId: product.id, size, qty, customNames: names });
    setAdded(true);
    setTimeout(() => setAdded(false), 2000);
  };

  const namingFee = wantsName ? RassData.NAMING_FEE * qty : 0;
  const lineTotal = product.price * qty + namingFee;

  const imgViews = [
    { key: "front", label: "Front", src: product.images && product.images.front },
    ...(supportsDetailPhotos(product) ? [
      { key: "shoulder", label: "Shoulder", src: product.images && product.images.shoulder },
      { key: "logo", label: "Logo", src: product.images && product.images.logo },
    ] : []),
  ].filter((view) => view.key === "front" || view.src);
  const activeView = imgViews.find((view) => view.key === activeImg) || imgViews[0];

  return (
    <main className="detail">
      <div className="wrap">
        <button className="back-link" onClick={onBack}>
          <Icon name="arrow-left" size={17} /> Back to all jerseys
        </button>

        <div className="detail-grid">
          <div className="detail-media">
            <div className="detail-img">
              {activeView.src
                ? <img src={activeView.src} alt={t.name + " " + product.type + " " + activeView.label} style={{ width: "100%", aspectRatio: "1/1", objectFit: "contain" }} />
                : <JerseyPlaceholder product={product} ratio="1 / 1" />
              }
            </div>
            {imgViews.length > 1 && (
              <div className="detail-thumbs">
                {imgViews.map((view) => (
                  <button key={view.key} className="detail-thumb ph"
                    data-active={activeImg === view.key ? "1" : undefined}
                    onClick={() => setActiveImg(view.key)}
                    style={{ overflow: "hidden", padding: 0 }}>
                    {view.src
                      ? <img src={view.src} alt={view.label} style={{ width: "100%", height: "100%", objectFit: "contain", padding: "4px" }} />
                      : <span className="ph-label" style={{ fontSize: 9, padding: "3px 6px" }}>{view.label}</span>
                    }
                  </button>
                ))}
              </div>
            )}
          </div>

          <div className="detail-info">
            <span className="eyebrow" style={{ color: "var(--secondary)" }}>
              {t.name} · {product.type}
            </span>
            <h1 className="detail-title display">{product.name}</h1>
            <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
              <div className="detail-price price">{RassData.taka(product.price)}</div>
              <span className="muted" style={{ textDecoration: "line-through", fontSize: 18 }}>
                {RassData.taka(product.compareAtPrice)}
              </span>
              <span className="tag tag-hot">{product.discountLabel}</span>
            </div>

            <div className="detail-block">
              <div className="detail-label">
                Size {size && <span className="muted">· {size} selected</span>}
              </div>
              <div className="size-toggles">
                {RassData.ALL_SIZES.map((s) => {
                  const avail = Number(product.inventory[s] || 0) > 0;
                  return (
                    <button key={s} className="size-toggle"
                      data-active={size === s ? "1" : undefined}
                      disabled={!avail}
                      onClick={() => avail && setSize(s)}
                      title={avail ? "" : "Out of stock"}>
                      {s}
                    </button>
                  );
                })}
              </div>
            </div>

            <div className="detail-block">
              <div className="detail-label">Quantity</div>
              <div className="detail-qty">
                <button className="qty-btn qty-btn-lg" onClick={() => changeQty(qty - 1)}>-</button>
                <span className="qty-val qty-val-lg">{qty}</span>
                <button className="qty-btn qty-btn-lg" onClick={() => changeQty(qty + 1)}>+</button>
              </div>
            </div>

            <div className="detail-block">
              <div className="detail-label">Name on jersey</div>
              <div className="name-choice detail-name-choice" role="group" aria-label="Name on jersey">
                <button type="button" data-active={!wantsName ? "1" : undefined} onClick={() => { setWantsName(false); setCustomNames(RassData.resizeNames([], qty)); }}>No</button>
                <button type="button" data-active={wantsName ? "1" : undefined} onClick={() => { setWantsName(true); setCustomNames((names) => RassData.resizeNames(names, qty)); }}>Yes</button>
              </div>
              {!wantsName && (
                <p className="name-warning">The jersey back will be left blank — no name or number printed.</p>
              )}
              {wantsName && (
                <div className="name-input-list">
                  {RassData.resizeNames(customNames, qty).map((value, i) => (
                    <div key={i} className="name-input-row">
                      {qty > 1 && <span className="name-input-label">Jersey {i + 1}</span>}
                      <input className="detail-name-input" placeholder="e.g. MESSI #10 or your own name"
                        value={value} onChange={(e) => setNameAt(i, e.target.value)} maxLength={22} />
                    </div>
                  ))}
                  <p className="name-input-note muted">+TK 100 per jersey for a custom name & number.</p>
                </div>
              )}
            </div>

            <div className="detail-quality-card">
              <div>
                <span className="eyebrow">Imported Player Edition</span>
                <p className="detail-desc">{product.blurb || quality.summary}</p>
              </div>
              <div className="detail-fabric-line">
                <Icon name="check" size={16} />
                <span>{quality.fabric}</span>
              </div>
              <ul className="detail-specs">
                {quality.features.map((feature) => (
                  <li key={feature.title}><Icon name={feature.icon} size={15} /> {feature.text}</li>
                ))}
              </ul>
            </div>

            <button className={"btn btn-block detail-add-btn " + (added ? "btn-added" : "btn-primary")}
              onClick={handleAdd} disabled={!size}>
              {added
                ? <React.Fragment><Icon name="check" size={18} /> Added to Cart</React.Fragment>
                : <React.Fragment><Icon name="cart" size={18} /> Add to Cart - {RassData.taka(lineTotal)}</React.Fragment>
              }
            </button>
            <p className="detail-reply muted">
              <Icon name="chat" size={14} /> WhatsApp handoff after order review
            </p>
          </div>
        </div>
      </div>

      {/* Sticky bottom bar — visible only on mobile (CSS hides on desktop) */}
      <div className="detail-sticky-bar">
        <div className="detail-sticky-price">
          <small>Total</small>
          {RassData.taka(lineTotal)}
        </div>
        <button className={"btn detail-sticky-btn " + (added ? "btn-added" : "btn-primary")}
          onClick={handleAdd} disabled={!size}>
          {added
            ? <React.Fragment><Icon name="check" size={17} /> Added!</React.Fragment>
            : <React.Fragment><Icon name="cart" size={17} /> Add to Cart</React.Fragment>
          }
        </button>
      </div>
    </main>
  );
}

Object.assign(window, { ProductCard, ProductGrid, DetailView });