// pages-pdp.jsx — Product detail with reviews + cross-sell

const RECENTLY_VIEWED_KEY = 'ms_recently_viewed';
const RECENTLY_VIEWED_MAX = 8;

function trackRecentlyViewed(sku) {
  try {
    if (!sku) return;
    const raw = localStorage.getItem(RECENTLY_VIEWED_KEY);
    let list = raw ? JSON.parse(raw) : [];
    if (!Array.isArray(list)) list = [];
    list = list.filter(s => s !== sku);
    list.unshift(sku);
    if (list.length > RECENTLY_VIEWED_MAX) list = list.slice(0, RECENTLY_VIEWED_MAX);
    localStorage.setItem(RECENTLY_VIEWED_KEY, JSON.stringify(list));
  } catch {}
}

function getRecentlyViewed(excludeSku) {
  try {
    const raw = localStorage.getItem(RECENTLY_VIEWED_KEY);
    if (!raw) return [];
    const list = JSON.parse(raw);
    if (!Array.isArray(list)) return [];
    const skus = excludeSku ? list.filter(s => s !== excludeSku) : list;
    const byKey = {};
    (window.PRODUCTS || []).forEach(p => { byKey[p.sku] = p; });
    return skus.map(s => byKey[s]).filter(Boolean);
  } catch { return []; }
}

window.trackRecentlyViewed = trackRecentlyViewed;
window.getRecentlyViewed = getRecentlyViewed;

function StrengthBars({ n, max=5 }) {
  return (
    <span className="strength-bars">
      {Array.from({length: max}).map((_, i) => <span key={i} className={i < n ? 'on' : ''}/>)}
    </span>
  );
}

function RestockForm({ productId, productSlug, productName, compact }) {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | sending | done | error
  const [msg, setMsg] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    setStatus('sending'); setMsg('');
    try {
      const payload = productId ? { product_id: productId, email } : { product_slug: productSlug, email };
      const r = await window.api.post('/restock-alerts', payload);
      setStatus('done');
      setMsg(`★ We'll email you when ${productName} is back in stock.`);
      setEmail('');
    } catch (err) {
      setStatus('error');
      setMsg(err.message || 'Could not subscribe.');
    }
  };

  if (status === 'done') {
    return <div style={{fontSize:13, color:'var(--acid)', fontFamily:'var(--font-mono)', fontWeight:700, marginTop:8}}>{msg}</div>;
  }

  return (
    <form onSubmit={submit} style={{display:'flex', gap: 6, marginTop: compact ? 4 : 8, flexWrap:'wrap'}}>
      <input
        type="email"
        required
        placeholder="your@email.ca"
        className="field"
        value={email}
        onChange={(e)=>setEmail(e.target.value)}
        onClick={(e)=>e.stopPropagation()}
        style={{flex:1, minWidth: compact ? 0 : 200, fontSize: 12, padding: '8px 12px'}}
      />
      <button
        type="submit"
        className="btn btn-primary"
        style={{padding:'8px 14px', fontSize: 11}}
        disabled={status === 'sending'}
        onClick={(e)=>e.stopPropagation()}
      >
        {status === 'sending' ? '…' : 'Notify'}
      </button>
      {status === 'error' && (
        <div style={{fontSize:11, color:'var(--ember)', fontFamily:'var(--font-mono)', flexBasis:'100%'}}>
          {msg}
        </div>
      )}
    </form>
  );
}

function PDP({ product, onBack, onAdd, onOpen, layout='split' }) {
  const [qty, setQty] = React.useState(1);
  const [thumb, setThumb] = React.useState(0);
  const [detail, setDetail] = React.useState(null);
  const reviews = (window.REVIEWS_BY_BRAND[product.brand] || []).slice(0, 3);
  const avg = reviews.length ? (reviews.reduce((s,r)=>s+r.stars,0)/reviews.length) : 4.7;
  const cross = window.PRODUCTS.filter(p => p.sku !== product.sku && (p.brand === product.brand || p.blend === product.blend)).slice(0, 4);

  // Fetch full product detail (images array) when slug changes
  React.useEffect(() => {
    setThumb(0);
    setDetail(null);
    if (!product?.slug) return;
    // Track for "recently viewed" cross-merch
    trackRecentlyViewed(product.sku);
    window.api.get('/products/' + encodeURIComponent(product.slug))
      .then(d => setDetail(d.product))
      .catch(() => setDetail({ images: [] }));
  }, [product?.slug]);

  // Compute recently viewed (excluding current product)
  const recentlyViewed = React.useMemo(
    () => getRecentlyViewed(product.sku).slice(0, 4),
    [product.sku]
  );

  // Image list (sorted by sort_order, primary first) or placeholder
  const images = (detail?.images && detail.images.length)
    ? [...detail.images].sort((a, b) => (b.is_primary - a.is_primary) || (a.sort_order - b.sort_order))
    : [];
  const activeImg = images[thumb]?.url || null;
  const hasImages = images.length > 0;

  const handleAdd = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    if (window.smokePuff) window.smokePuff(rect.left + rect.width/2, rect.top + rect.height/2);
    for (let i = 0; i < qty; i++) onAdd(product);
  };

  const restockDay = detail?.restock_day || 'Friday';
  const stockLabel = product.stock === 'out' ? `Restocks ${restockDay} 9am ET` :
                     product.stock === 'low' ? 'Low stock — under 20 left' :
                     'In stock · ships today if before 1pm ET';
  const dotClass = product.stock === 'out' ? 'out' : product.stock === 'low' ? 'low' : '';

  const galleryNode = (
    <div>
      <div className="gallery">
        {activeImg ? (
          <img
            src={activeImg}
            alt={images[thumb]?.alt_text || product.name}
            style={{width:'92%', height:'92%', objectFit:'contain'}}
          />
        ) : (
          <img src="assets/skull-icon.png" alt={product.name}/>
        )}
        <span className={`tag tag-${product.tag || 'new'}`} style={{position:'absolute', top: 14, left: 14}}>
          {product.tagLabel || product.brand}
        </span>
        <span className="deco-sticker" style={{bottom: 18, right: 18, transform:'rotate(-6deg)', background:'var(--bone)'}}>
          {product.count} CIGS
        </span>
      </div>

      {hasImages && images.length > 1 && (
        <div className="thumbs">
          {images.map((img, i) => (
            <div key={img.id || i} className={"thumb " + (i === thumb ? 'active' : '')} onClick={()=>setThumb(i)}>
              <img src={img.url} alt={img.alt_text || ''} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
            </div>
          ))}
        </div>
      )}
      {!hasImages && (
        <div className="thumbs">
          {[0,1,2,3].map(i => (
            <div key={i} className={"thumb " + (i === thumb ? 'active' : '')} onClick={()=>setThumb(i)}>
              <img src="assets/skull-icon.png" alt="" style={{transform:`rotate(${i*45}deg)`}}/>
            </div>
          ))}
        </div>
      )}
    </div>
  );

  const detailNode = (
    <div>
      <div className="breadcrumb"><a onClick={onBack}>Shop</a> / {product.brand} / <span style={{color:'var(--bone)'}}>{product.name}</span></div>
      <h1 style={{marginTop: 12}}>{product.name}</h1>
      <div style={{display:'flex', alignItems:'center', gap: 12, margin:'10px 0 16px'}}>
        <span style={{fontFamily:'var(--font-mono)', fontWeight:700, color:'var(--ember)', letterSpacing:2}}>
          {'★'.repeat(Math.round(avg))}{'☆'.repeat(5-Math.round(avg))}
        </span>
        <span style={{fontFamily:'var(--font-mono)', fontSize: 12, color:'var(--fg-3)'}}>
          {avg.toFixed(1)} · {reviews.length} reviews
        </span>
        <span className={`tag tag-${product.tag || 'new'}`}>{product.tagLabel || 'Native'}</span>
      </div>

      <p style={{color:'var(--fg-2)', fontSize:15, lineHeight:1.6, maxWidth: 480}}>
        {product.blurb}
      </p>

      <div className="price-row">
        {product.oldPrice && (
          <span style={{fontFamily:'var(--font-mono)', fontSize:18, color:'var(--smoke-300)', textDecoration:'line-through'}}>
            ${product.oldPrice.toFixed(2)}
          </span>
        )}
        <span className="price">${product.price.toFixed(2)}</span>
        <span className="per">CAD · ${product.packPrice.toFixed(2)}/pack · ${(product.price/product.count).toFixed(3)}/cig</span>
      </div>

      <div className="stock-row">
        <span className={"stock-dot " + dotClass}/>
        {stockLabel}
      </div>

      {product.stock !== 'out' && (
        <div style={{display:'flex', gap: 12, marginTop: 14, alignItems:'center'}}>
          <div className="qty-stepper">
            <button onClick={()=>setQty(q => Math.max(1, q-1))}>−</button>
            <input value={qty} onChange={e=>setQty(Math.max(1, parseInt(e.target.value)||1))}/>
            <button onClick={()=>setQty(q => q+1)}>+</button>
          </div>
          <button className="btn btn-primary btn-lg" onClick={handleAdd}>
            <i data-lucide="shopping-bag"></i>
            Add {qty} to cart · ${(product.price*qty).toFixed(2)}
          </button>
        </div>
      )}
      {product.stock === 'out' && (
        <div style={{marginTop: 14, padding: 16, background:'var(--ink-soft)', border:'2px solid var(--ink-2)', borderRadius: 4}}>
          <div style={{fontFamily:'var(--font-display)', fontSize: 18, color: 'var(--bone)', textTransform:'uppercase'}}>
            Notify me when it's back
          </div>
          <p style={{fontSize: 12, color:'var(--smoke-400)', margin:'4px 0 8px'}}>
            Drop your email and we'll send a one-time alert when {product.name} restocks.
          </p>
          <RestockForm productId={product.id} productSlug={product.slug} productName={product.name}/>
        </div>
      )}

      <div className="spec-grid">
        <div className="spec"><dt>Brand</dt><dd>{product.brand}</dd></div>
        <div className="spec"><dt>Blend</dt><dd>{product.blend}</dd></div>
        <div className="spec"><dt>Strength</dt><dd><StrengthBars n={product.strength}/> {product.strength}/5</dd></div>
        <div className="spec"><dt>Size</dt><dd>{product.size}</dd></div>
        <div className="spec"><dt>Tar</dt><dd>{product.tar}</dd></div>
        <div className="spec"><dt>Nicotine</dt><dd>{product.nicotine}</dd></div>
        <div className="spec"><dt>Count</dt><dd>{product.count} cigs · {product.packs} packs × {product.perPack}</dd></div>
        <div className="spec"><dt>Origin</dt><dd>{detail?.ships_from || 'Tyendinaga, ON'}</dd></div>
        <div className="spec"><dt>SKU</dt><dd>{product.sku}</dd></div>
        <div className="spec">
          <dt>Ships</dt>
          <dd>
            {detail?.shipping_days_min && detail?.shipping_days_max
              ? `${detail.shipping_days_min}–${detail.shipping_days_max} biz days · plain pack`
              : '2–4 biz days · plain pack'}
          </dd>
        </div>
        {detail?.weight_grams && (
          <div className="spec"><dt>Weight</dt><dd>{detail.weight_grams}g</dd></div>
        )}
        {detail?.length_cm && detail?.width_cm && detail?.height_cm && (
          <div className="spec">
            <dt>Dimensions</dt>
            <dd>{detail.length_cm} × {detail.width_cm} × {detail.height_cm} cm</dd>
          </div>
        )}
        {detail?.restock_day && product.stock === 'out' && (
          <div className="spec"><dt>Restocks</dt><dd>{detail.restock_day}s</dd></div>
        )}
      </div>

      <div className="pdp" style={{display:'block'}}>
        <div className="warning" style={{marginTop: 24}}>
          <strong>Health Canada warning</strong>
          Cigarettes are addictive. Smoking causes lung cancer, heart disease, and other serious illnesses. Quitting smoking now greatly reduces serious risks to your health.
        </div>
      </div>
    </div>
  );

  let layoutCls = 'pdp';
  let layoutStyle = {};
  if (layout === 'top') {
    layoutCls = '';
    layoutStyle = { display: 'block' };
  } else if (layout === 'wide') {
    layoutStyle = { gridTemplateColumns: '1fr 1.4fr', gap: 64 };
  }

  return (
    <div>
      <button className="btn btn-ghost" onClick={onBack} style={{marginTop: 24}}>
        <i data-lucide="arrow-left"></i> Back to shop
      </button>

      {layout === 'top' ? (
        <>
          <div style={{maxWidth: 720, margin: '32px auto 0'}}>{galleryNode}</div>
          <div style={{maxWidth: 820, margin: '32px auto 0'}}>{detailNode}</div>
        </>
      ) : (
        <div className={layoutCls} style={layoutStyle}>
          {galleryNode}
          {detailNode}
        </div>
      )}

      {/* Reviews */}
      <div className="reviews">
        <div className="section-head">
          <div>
            <span className="sticker-tag">★ Real talk</span>
            <h2>Reviews.</h2>
          </div>
          <span className="link">{reviews.length} reviews</span>
        </div>
        <div className="reviews-summary">
          <div>
            <div className="review-big">{avg.toFixed(1)}</div>
            <div style={{fontFamily:'var(--font-mono)', fontSize: 12, color:'var(--fg-3)', letterSpacing:'.1em', textTransform:'uppercase'}}>
              {reviews.length} verified buyers
            </div>
            <div className="review-bars" style={{marginTop: 14}}>
              {[5,4,3,2,1].map(s => {
                const c = reviews.filter(r => r.stars === s).length;
                const pct = reviews.length ? (c / reviews.length) * 100 : 0;
                return (
                  <div className="review-bar-row" key={s}>
                    <span className="num">{s}★</span>
                    <div className="bar"><div className="fill" style={{width: pct+'%'}}/></div>
                    <span className="num">{c}</span>
                  </div>
                );
              })}
            </div>
          </div>
          <div>
            {reviews.map((r, i) => (
              <div className="review-card" key={i}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
                  <span className="who">{r.who}</span>
                  <span className="when">{r.when}</span>
                </div>
                <div className="stars">{'★'.repeat(r.stars)}{'☆'.repeat(5-r.stars)}</div>
                <h4 className="title">{r.title}</h4>
                <p className="body">{r.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Cross sell */}
      <div className="cross-sell">
        <h3>★ People also bought</h3>
        <div className="grid-4">
          {cross.map(p => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen}/>)}
        </div>
      </div>

      {/* Recently viewed */}
      {recentlyViewed.length > 0 && (
        <div className="cross-sell" style={{marginTop: 24}}>
          <h3>↻ Recently viewed</h3>
          <div className="grid-4">
            {recentlyViewed.map(p => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen}/>)}
          </div>
        </div>
      )}
    </div>
  );
}

window.PDP = PDP;