/* =========================================================================
   Morning Mob — product detail page
   Thumbnail rail + large gallery (swaps by colourway), buy column with
   colour + size selectors, spec cells.
   ========================================================================= */

function SpecCell({ label, value }) {
  return (
    <div style={{ background: 'var(--surface-soft)', padding: '20px 24px' }}>
      <Eyebrow style={{ display: 'block', marginBottom: 8 }}>{label}</Eyebrow>
      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, color: 'var(--ink)' }}>{value}</div>
    </div>
  );
}

function ProductDetail({ product, onBack, onAdd, onOpen }) {
  const t = useMM();
  const colours = product.colours || ['Mocha'];
  const [colour, setColour] = useState(colours[0]);
  const [active, setActive] = useState(0);
  const [size, setSize] = useState(null);
  const [careOpen, setCareOpen] = useState(false);
  useEffect(() => { setActive(0); setSize(null); setColour(colours[0]); }, [product.id]);

  const sizes = product.sizes || ['S', 'M', 'L'];
  const soldOutSizes = product.soldOutSizes || [];
  const views = (MM_TEE_VIEWS && MM_TEE_VIEWS[colour]) || [];
  const slots = views.length ? views.map((_, i) => i) : [0, 1, 2];
  const related = MM_PRODUCTS.filter((p) => p.id !== product.id && p.cat === product.cat).slice(0, 4);
  const slotId = (i) => 'pdp-' + product.id + '-' + colour.toLowerCase() + '-' + i;

  return (
    <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '24px 28px 80px' }}>
      <button onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'none', border: 'none', cursor: 'pointer',
        fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '1px', textTransform: 'uppercase', color: 'var(--muted)', padding: '8px 0 28px' }}>
        <Icon name="arrowLeft" size={14} /> Back to shop
      </button>

      <div className="mm-pdp" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'start' }}>
        <div className="mm-pdp-gallery" style={{ display: 'flex', gap: 16 }}>
          <div className="mm-pdp-rail" style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 64, flex: 'none' }}>
            {slots.map((i) => (
              <button key={i} className="mm-pdp-thumb" onClick={() => setActive(i)} style={{ padding: 0, border: active === i ? '1px solid var(--ink)' : '1px solid var(--hairline)', cursor: 'pointer', background: 'none' }}>
                <Photo id={slotId(i)} src={views[i]} label={'View ' + (i + 1)} />
              </button>
            ))}
          </div>
          <div style={{ flex: 1, position: 'relative' }}>
            <Photo id={slotId(active)} src={views[active]} label={product.name} />
          </div>
        </div>

        <div style={{ position: 'sticky', top: 96 }}>
          <Eyebrow style={{ display: 'block', marginBottom: 16 }}>{product.kind}</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: Math.round(36 * t.displayScale), fontWeight: 400, color: 'var(--ink)', margin: 0, lineHeight: 1.15 }}>{product.name}</h1>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, letterSpacing: '0.5px', color: 'var(--body)', marginTop: 16 }}>{money(product.price)}</div>
          <p style={{ marginTop: 24, color: 'var(--body)', maxWidth: 440 }}>{product.desc}</p>

          {colours.length > 1 && (
            <div style={{ marginTop: 28 }}>
              <Eyebrow color="var(--ink)" style={{ display: 'block', marginBottom: 12 }}>Colour — {colour}</Eyebrow>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                {colours.map((c) => (
                  <button key={c} onClick={() => { setColour(c); setActive(0); }} style={{ minWidth: 64, height: 44, padding: '0 16px', cursor: 'pointer',
                    fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase',
                    border: '1px solid ' + (colour === c ? 'var(--ink)' : 'var(--hairline)'),
                    background: colour === c ? 'var(--ink)' : 'transparent', color: colour === c ? '#fff' : 'var(--body)' }}>{c}</button>
                ))}
              </div>
            </div>
          )}

          <div style={{ marginTop: 28 }}>
            <Eyebrow color="var(--ink)" style={{ display: 'block', marginBottom: 12 }}>Size</Eyebrow>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {sizes.map((s) => {
                const sold = soldOutSizes.includes(s);
                return (
                  <button key={s} disabled={sold} onClick={() => setSize(s)}
                    title={sold ? 'Sold out' : undefined} aria-label={sold ? s + ' — sold out' : s}
                    style={{ minWidth: 48, height: 44, padding: '0 14px', cursor: sold ? 'not-allowed' : 'pointer',
                    fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase',
                    textDecoration: sold ? 'line-through' : 'none', opacity: sold ? 0.5 : 1,
                    border: '1px solid ' + (size === s ? 'var(--ink)' : 'var(--hairline)'),
                    background: size === s ? 'var(--ink)' : 'transparent',
                    color: sold ? 'var(--muted)' : (size === s ? '#fff' : 'var(--body)') }}>{s}</button>
                );
              })}
            </div>
          </div>

          <button onClick={() => onAdd(product, size, colour)} style={{ width: '100%', height: 48, marginTop: 32, background: 'var(--ink)', color: '#fff', border: 'none',
            fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', cursor: 'pointer' }}>
            {size ? 'Add to cart' : 'Select a size'}</button>
          <p style={{ marginTop: 14, color: 'var(--muted)', fontSize: 11, letterSpacing: '0.5px' }}>
            Ships across Singapore in 3–5 business days.</p>

          {/* spec cells */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, marginTop: 28, border: '1px solid var(--hairline)', background: 'var(--hairline)' }}>
            <SpecCell label="Material" value={product.material} />
            <SpecCell label="Origin" value={product.made} />
          </div>

          {/* care accordion */}
          <button onClick={() => setCareOpen((v) => !v)} style={{ width: '100%', marginTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            background: 'none', border: 'none', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', padding: '16px 0', cursor: 'pointer' }}>
            <Eyebrow color="var(--ink)">Care</Eyebrow>
            <Icon name={careOpen ? 'minus' : 'plus'} size={16} style={{ color: 'var(--ink)' }} />
          </button>
          {careOpen && (
            <p style={{ color: 'var(--body)', padding: '16px 0' }}>{product.care}. Wash inside out to protect the print and skip the tumble dryer — it keeps its shape and softness far longer.</p>
          )}
        </div>
      </div>

      {related.length > 0 && (
        <div style={{ marginTop: 96 }}>
          <Eyebrow color="var(--body-strong)" style={{ display: 'block', marginBottom: 28 }}>You may also like</Eyebrow>
          <div className="mm-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {related.map((p) => <ProductCard key={p.id} product={p} onOpen={onOpen} />)}
          </div>
        </div>
      )}
    </div>
  );
}
Object.assign(window, { ProductDetail, SpecCell });