// Product detail page

const PDPPage = ({ accent, productId, setRoute }) => {
  const product = PRODUCTS.find((p) => p.id === productId) || PRODUCTS[0];
  const cart = useCart();
  const [size, setSize] = React.useState('M');
  const [colorIdx, setColorIdx] = React.useState(0);
  const [imgIdx, setImgIdx] = React.useState(0);
  const accentColor = accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)';

  // 4 image slots (front/back/detail/lifestyle)
  const images = [
    { label: 'FRONT', kind: 'product' },
    { label: 'BACK', kind: 'product' },
    { label: 'DETAIL — SHOULDER SEAM', kind: 'detail' },
    { label: 'ON-PLAYER / POOL DECK', kind: 'lifestyle' },
  ];

  return (
    <>
      <div style={{
        padding: '20px 32px',
        borderBottom: '1px solid var(--uwr-line)',
        display: 'flex', gap: 8, alignItems: 'center',
      }}>
        <a onClick={() => setRoute({ name: 'home' })} className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', cursor: 'pointer' }}>INDEX</a>
        <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>/</span>
        <a onClick={() => setRoute({ name: 'shop' })} className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', cursor: 'pointer' }}>DROP 01</a>
        <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>/</span>
        <span className="uwr-mono" style={{ color: 'var(--uwr-off)' }}>{product.code}</span>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '80px 1fr minmax(380px, 480px)',
        gap: 0, minHeight: 'calc(100vh - 100px)',
      }}>
        {/* thumbnail rail */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 8,
          padding: '32px 16px', borderRight: '1px solid var(--uwr-line)',
        }}>
          {images.map((img, i) => (
            <button key={i} onClick={() => setImgIdx(i)} style={{
              padding: 0, background: 'transparent',
              border: imgIdx === i ? `1px solid ${accentColor}` : '1px solid var(--uwr-line)',
              cursor: 'pointer', aspectRatio: '4/5', position: 'relative',
            }}>
              {img.kind === 'product' ? (
                <ProductPlaceholder color={product.color} style={{ width: '100%', height: '100%' }} />
              ) : (
                <UnderwaterPlaceholder label="" intensity={0.4} style={{ width: '100%', height: '100%' }} />
              )}
              <div className="uwr-mono" style={{
                position: 'absolute', bottom: 2, left: 4, fontSize: 8,
                color: imgIdx === i ? accentColor : 'var(--uwr-off-dim)',
              }}>0{i + 1}</div>
            </button>
          ))}
        </div>

        {/* main image */}
        <div style={{ position: 'relative', borderRight: '1px solid var(--uwr-line)', minHeight: 600 }}>
          {images[imgIdx].kind === 'product' ? (
            <ProductPlaceholder color={product.color} name={product.code} hideLabel style={{ position: 'absolute', inset: 0 }} />
          ) : (
            <UnderwaterPlaceholder label={images[imgIdx].label} sub={`${product.code} / ${images[imgIdx].kind.toUpperCase()}`} intensity={0.6} style={{ position: 'absolute', inset: 0 }} />
          )}
          {/* image label HUD */}
          <div style={{ position: 'absolute', top: 16, left: 16 }}>
            <MonoTag color={accentColor}>0{imgIdx + 1} / 0{images.length}</MonoTag>
            <div className="uwr-mono" style={{ color: 'var(--uwr-off)', marginTop: 4 }}>{images[imgIdx].label}</div>
          </div>
          {/* nav arrows */}
          <button onClick={() => setImgIdx((imgIdx - 1 + images.length) % images.length)} style={{
            position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)',
            background: 'rgba(5,8,10,0.6)', border: '1px solid var(--uwr-line)', color: 'var(--uwr-off)',
            width: 40, height: 40, padding: 0,
          }}>
            <Arrow size={16} style={{ transform: 'rotate(180deg)' }} />
          </button>
          <button onClick={() => setImgIdx((imgIdx + 1) % images.length)} style={{
            position: 'absolute', right: 16, top: '50%', transform: 'translateY(-50%)',
            background: 'rgba(5,8,10,0.6)', border: '1px solid var(--uwr-line)', color: 'var(--uwr-off)',
            width: 40, height: 40, padding: 0,
          }}>
            <Arrow size={16} />
          </button>
        </div>

        {/* details */}
        <div style={{ padding: '40px 32px', display: 'flex', flexDirection: 'column', gap: 24 }}>
          {product.tag && <MonoTag color={accentColor}>★ {product.tag}</MonoTag>}
          <div>
            <MonoTag color="var(--uwr-off-dim)">{product.code}</MonoTag>
            <h1 className="uwr-head" style={{ fontSize: 'clamp(36px, 5vw, 56px)', margin: '8px 0 0', lineHeight: 0.95 }}>
              {product.name.toUpperCase()}
            </h1>
            <div className="uwr-head" style={{ fontSize: 24, marginTop: 12 }}>${product.price}.00</div>
          </div>

          <div style={{ borderTop: '1px solid var(--uwr-line-strong)', borderBottom: '1px solid var(--uwr-line-strong)', padding: '20px 0' }}>
            <div style={{ fontSize: 14, color: 'var(--uwr-off-dim)', lineHeight: 1.6 }}>
              {product.desc}
            </div>
          </div>

          {/* color */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
              <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>COLOR</span>
              <span className="uwr-mono" style={{ color: 'var(--uwr-off)' }}>{product.colors[colorIdx].toUpperCase()}</span>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              {product.colors.map((c, i) => {
                const fill = c.toLowerCase().includes('white') || c.toLowerCase().includes('off') ? '#F2F2EA' :
                             c.toLowerCase().includes('ocean') ? '#0B1B24' :
                             c.toLowerCase().includes('red') ? '#FF3B1F' : '#05080A';
                return (
                  <button key={c} onClick={() => setColorIdx(i)} style={{
                    width: 36, height: 36, padding: 0,
                    background: fill,
                    border: colorIdx === i ? `2px solid ${accentColor}` : '1px solid var(--uwr-line-strong)',
                    cursor: 'pointer',
                  }} />
                );
              })}
            </div>
          </div>

          {/* size */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
              <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>SIZE</span>
              <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', textDecoration: 'underline', cursor: 'pointer' }}>SIZE GUIDE</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${product.sizes.length}, 1fr)`, gap: 4 }}>
              {product.sizes.map((s) => (
                <button key={s} onClick={() => setSize(s)} className="uwr-head" style={{
                  background: size === s ? 'var(--uwr-off)' : 'transparent',
                  color: size === s ? 'var(--uwr-black)' : 'var(--uwr-off)',
                  border: '1px solid var(--uwr-line-strong)',
                  padding: '12px 0', fontSize: 14, cursor: 'pointer',
                }}>{s}</button>
              ))}
            </div>
          </div>

          {/* CTA */}
          <button onClick={() => cart.add(product, size, product.colors[colorIdx])} className="uwr-btn" style={{
            justifyContent: 'space-between', padding: '18px 24px',
            background: accentColor, color: accent === 'red' ? 'var(--uwr-off)' : 'var(--uwr-black)',
          }}>
            <span>ADD TO BAG — ${product.price}.00</span>
            <PlusIcon size={16} />
          </button>

          {/* spec table */}
          <div style={{ paddingTop: 24, borderTop: '1px solid var(--uwr-line)' }}>
            <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', marginBottom: 12 }}>// SPEC</div>
            {[
              ['WEIGHT', product.weight],
              ['FIT', product.fit.toUpperCase()],
              ['FABRIC', product.fabric.toUpperCase()],
              ['ORIGIN', 'PORTUGAL'],
              ['SHIPS', '2–4 BUSINESS DAYS'],
            ].map(([k, v]) => (
              <div key={k} style={{
                display: 'flex', justifyContent: 'space-between',
                padding: '10px 0', borderBottom: '1px solid var(--uwr-line)',
                fontSize: 12, fontFamily: 'var(--uwr-mono)', letterSpacing: '0.04em',
              }}>
                <span style={{ color: 'var(--uwr-off-dim)' }}>{k}</span>
                <span style={{ color: 'var(--uwr-off)' }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* related */}
      <div style={{ padding: '80px 32px', borderTop: '1px solid var(--uwr-line-strong)' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 32 }}>
          <h2 className="uwr-head" style={{ fontSize: 'clamp(32px, 5vw, 56px)', margin: 0 }}>
            FROM THE SAME DROP
          </h2>
          <a onClick={() => setRoute({ name: 'shop' })} className="uwr-mono" style={{
            color: accentColor, cursor: 'pointer', borderBottom: `1px solid ${accentColor}`, paddingBottom: 2,
          }}>VIEW ALL DROP 01</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 24 }}>
          {PRODUCTS.filter((p) => p.id !== product.id).slice(0, 4).map((p) => (
            <ProductCard key={p.id} product={p} layout="minimal" accent={accent}
              onClick={() => { setRoute({ name: 'pdp', id: p.id }); window.scrollTo(0, 0); }} />
          ))}
        </div>
      </div>

      <Footer accent={accent} />
    </>
  );
};

Object.assign(window, { PDPPage });