// Product detail page

const DetailPage = ({ productId, setPage, lang }) => {
  const product = PRODUCTS.find(p => p.id === productId) || PRODUCTS[0];
  const [tab, setTab] = React.useState('specs');
  const [thumbIdx, setThumbIdx] = React.useState(0);
  const [config, setConfig] = React.useState({
    range: product.range, conn: product.conn, filling: product.filling, accuracy: product.accuracy,
  });

  const rangeOpts = ['0–60 bar', '0–250 bar', '0–600 bar', '0–1000 bar'];
  const connOpts = ['1/4" NPT', '1/2" NPT', 'G1/2"', 'M20×1.5'];
  const fillingOpts = ['Dry', 'Glycerin', 'Silicone'];
  const accuracyOpts = ['±1.6%', '±1.0%', '±0.6%', '±0.25%'];

  const setOpt = (k, v) => setConfig(c => ({ ...c, [k]: v }));

  const fillLabel = (f) => lang === 'zh' ? ({ 'Dry': '干式', 'Glycerin': '甘油', 'Silicone': '硅油' }[f] || f) : f;

  return (
    <>
      <div className="container" style={{ paddingTop: 24 }}>
        <div className="crumb">
          {t('pd.crumb.home', lang)} <a onClick={() => setPage('products')} style={{ cursor: 'pointer', color: 'var(--ink-2)' }}>{t('pd.crumb.products', lang)}</a> / {product.sku}
        </div>
        <div className="pd-layout">
          <div>
            <div className="pd-image" style={{ background: '#fff', padding: 32 }}>
              {(() => {
                const galleryProducts = [product, ...PRODUCTS.filter(p => p.category === product.category && p.id !== product.id)].slice(0, 4);
                while (galleryProducts.length < 4) galleryProducts.push(PRODUCTS[(PRODUCTS.indexOf(product) + galleryProducts.length) % PRODUCTS.length]);
                const cur = galleryProducts[thumbIdx] || product;
                return <ProductPhoto name={cur.img} alt={pname(cur.id, lang)} />;
              })()}
              <div style={{ position: 'absolute', top: 20, left: 20, fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.08em', background: 'oklch(1 0 0 / 0.9)', padding: '4px 8px', borderRadius: 'var(--radius-sm)' }}>
                FIG. {String(thumbIdx + 1).padStart(2, '0')}
              </div>
            </div>
            <div className="pd-thumbs">
              {(() => {
                const galleryProducts = [product, ...PRODUCTS.filter(p => p.category === product.category && p.id !== product.id)].slice(0, 4);
                while (galleryProducts.length < 4) galleryProducts.push(PRODUCTS[(PRODUCTS.indexOf(product) + galleryProducts.length) % PRODUCTS.length]);
                return galleryProducts.map((p, i) => (
                  <div key={i} className={`pd-thumb ${thumbIdx === i ? 'active' : ''}`}
                    onClick={() => setThumbIdx(i)} style={{ background: '#fff', padding: 8 }}>
                    <ProductPhoto name={p.img} alt="" />
                  </div>
                ));
              })()}
            </div>
          </div>

          <div className="pd-info">
            <div className="sku">SKU · {product.sku}</div>
            <h1 className="h-1">{pname(product.id, lang)}</h1>
            <p className="summary">{t('pd.summary', lang)}</p>

            <div className="pd-config">
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>
                {t('pd.configure', lang)}
              </div>
              <div className="pd-config-row">
                <label>{t('pd.range', lang)}</label>
                <div className="opts">
                  {rangeOpts.map(o => (
                    <button key={o} className={`pd-opt ${config.range === o ? 'active' : ''}`} onClick={() => setOpt('range', o)}>{o}</button>
                  ))}
                </div>
              </div>
              <div className="pd-config-row">
                <label>{t('pd.conn', lang)}</label>
                <div className="opts">
                  {connOpts.map(o => (
                    <button key={o} className={`pd-opt ${config.conn === o ? 'active' : ''}`} onClick={() => setOpt('conn', o)}>{o}</button>
                  ))}
                </div>
              </div>
              <div className="pd-config-row">
                <label>{t('pd.filling', lang)}</label>
                <div className="opts">
                  {fillingOpts.map(o => (
                    <button key={o} className={`pd-opt ${config.filling === o ? 'active' : ''}`} onClick={() => setOpt('filling', o)}>{fillLabel(o)}</button>
                  ))}
                </div>
              </div>
              <div className="pd-config-row">
                <label>{t('pd.accuracy', lang)}</label>
                <div className="opts">
                  {accuracyOpts.map(o => (
                    <button key={o} className={`pd-opt ${config.accuracy === o ? 'active' : ''}`} onClick={() => setOpt('accuracy', o)}>{o}</button>
                  ))}
                </div>
              </div>
            </div>

            <div className="pd-actions">
              <button className="btn btn-accent btn-lg" onClick={() => setPage('rfq')}>
                {t('pd.cta.quote', lang)} <Arrow />
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => setPage('rfq')}>{t('pd.cta.datasheet', lang)}</button>
              <button className="btn btn-ghost btn-lg" onClick={() => setPage('rfq')}>{t('pd.cta.3d', lang)}</button>
            </div>

            <div className="pd-tabs">
              <div className={`pd-tab ${tab === 'specs' ? 'active' : ''}`} onClick={() => setTab('specs')}>{t('pd.tab.specs', lang)}</div>
              <div className={`pd-tab ${tab === 'apps' ? 'active' : ''}`} onClick={() => setTab('apps')}>{t('pd.tab.apps', lang)}</div>
              <div className={`pd-tab ${tab === 'docs' ? 'active' : ''}`} onClick={() => setTab('docs')}>{t('pd.tab.docs', lang)}</div>
            </div>

            {tab === 'specs' && (
              <div className="spec-table">
                <div className="spec-row"><div className="k">{t('pd.spec.std', lang)}</div><div className="v">EN 837-1</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.range', lang)}</div><div className="v">{config.range}</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.acc', lang)}</div><div className="v">{config.accuracy} (Class 1.0)</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.dial', lang)}</div><div className="v">{product.size}</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.wet', lang)}</div><div className="v">{product.material}</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.case', lang)}</div><div className="v">{t('pd.spec.case.v', lang)}</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.window', lang)}</div><div className="v">{t('pd.spec.window.v', lang)}</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.conn', lang)}</div><div className="v">{config.conn}{t('pd.spec.conn.suffix', lang)}</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.fill', lang)}</div><div className="v">{fillLabel(config.filling)}</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.ip', lang)}</div><div className="v">IP65</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.ambient', lang)}</div><div className="v">{t('pd.spec.ambient.v', lang)}</div></div>
                <div className="spec-row"><div className="k">{t('pd.spec.process', lang)}</div><div className="v">{t('pd.spec.process.v', lang)}</div></div>
              </div>
            )}

            {tab === 'apps' && (
              <div style={{ padding: 20, border: '1px solid var(--line)', borderRadius: 'var(--radius)', background: 'var(--bg-sunken)' }}>
                <p style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.6, marginBottom: 16 }}>{t('pd.apps.intro', lang)}</p>
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[1,2,3,4,5].map(i => (
                    <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14, color: 'var(--ink-2)' }}>
                      <span style={{ fontFamily: 'JetBrains Mono', color: 'var(--ink-3)', fontSize: 12 }}>{String(i).padStart(2, '0')}</span>
                      {t(`pd.apps.${i}`, lang)}
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {tab === 'docs' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[1,2,3,4,5].map(i => (
                  <div key={i} onClick={() => setPage('rfq')} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 16px', border: '1px solid var(--line)', borderRadius: 'var(--radius)', cursor: 'pointer' }}>
                    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                      <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--ink-3)', padding: '2px 6px', border: '1px solid var(--line)', borderRadius: 'var(--radius-sm)' }}>PDF</span>
                      <span style={{ fontSize: 14 }}>{t(`pd.docs.${i}`, lang)}</span>
                    </div>
                    <span style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'JetBrains Mono' }}>{t('pd.docs.request', lang)} →</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        <div style={{ paddingBottom: 80 }}>
          <div className="section-head">
            <div className="l">
              <div className="eyebrow">{t('pd.related.eyebrow', lang)}</div>
              <h2 className="h-2">{t('pd.related.title', lang)}</h2>
            </div>
          </div>
          <div className="product-grid">
            {PRODUCTS.filter(p => p.id !== product.id).slice(0, 4).map((p, i) => (
              <div key={p.id} className="product-card" onClick={() => setPage(`product:${p.id}`)}>
                <div className="index">{p.sku}</div>
                <div className="pic" style={{ background: '#fff' }}>
                  <ProductPhoto name={p.img} alt={pname(p.id, lang)} />
                </div>
                <div>
                  <h3>{pname(p.id, lang)}</h3>
                  <div className="specs" style={{ marginTop: 8 }}>
                    <span>{p.range}</span>
                    <span>{p.size} · {p.material}</span>
                  </div>
                </div>
                <div className="cta"><span>{t('products.viewSpecs', lang)}</span><Arrow /></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { DetailPage });