// Product listing page

const ListingPage = ({ setPage, lang }) => {
  const [activeCat, setActiveCat] = React.useState('all');
  const [filters, setFilters] = React.useState({ material: [], size: [], filling: [] });
  const [sort, setSort] = React.useState('default');

  const toggleFilter = (key, val) => {
    setFilters(f => ({
      ...f,
      [key]: f[key].includes(val) ? f[key].filter(v => v !== val) : [...f[key], val],
    }));
  };

  const filtered = PRODUCTS.filter(p => {
    if (activeCat !== 'all' && p.category !== activeCat) return false;
    if (filters.material.length && !filters.material.includes(p.material)) return false;
    if (filters.size.length && !filters.size.includes(p.size)) return false;
    if (filters.filling.length && !filters.filling.includes(p.filling)) return false;
    return true;
  });

  const activeFilters = [
    ...filters.material.map(v => ({ key: 'material', val: v })),
    ...filters.size.map(v => ({ key: 'size', val: v })),
    ...filters.filling.map(v => ({ key: 'filling', val: v })),
  ];

  const fillingLabel = (f) => {
    if (lang !== 'zh') return f;
    return { 'Dry': '干式', 'Glycerin': '甘油', 'N/A': '无' }[f] || f;
  };

  const countFn = t('list.toolbar.count', lang);

  return (
    <>
      <section className="listing-head">
        <div className="container">
          <div className="crumb">{t('list.crumb', lang)}</div>
          <div className="listing-hero-row">
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>{t('list.eyebrow', lang)}</div>
              <h1 className="h-display" style={{ fontSize: 'clamp(32px, 4.4vw, 56px)' }}>{t('list.title', lang)}</h1>
              <p className="lede" style={{ marginTop: 12 }}>{t('list.summary', lang)}</p>
            </div>
            <button className="btn btn-accent" onClick={() => setPage('rfq')}>{t('list.download', lang)}</button>
          </div>
        </div>
      </section>

      <div className="container">
        <div className="listing-layout">
          <aside>
            <div className="filter-group">
              <h5>{t('list.filter.cat', lang)}</h5>
              {CATEGORIES.map(c => (
                <div key={c.id} className="filter-opt"
                  style={{ color: activeCat === c.id ? 'var(--ink)' : 'var(--ink-2)', fontWeight: activeCat === c.id ? 600 : 400 }}
                  onClick={() => setActiveCat(c.id)}>
                  <span>{t(`list.cat.${c.id}`, lang)}</span>
                  <span className="count">{c.id === 'all' ? PRODUCTS.length : PRODUCTS.filter(p => p.category === c.id).length}</span>
                </div>
              ))}
            </div>

            <div className="filter-group">
              <h5>{t('list.filter.mat', lang)}</h5>
              {['316L SS', 'Brass'].map(m => (
                <label key={m} className="filter-opt">
                  <input type="checkbox" checked={filters.material.includes(m)} onChange={() => toggleFilter('material', m)} />
                  <span>{lang === 'zh' ? (m === '316L SS' ? '316L 不锈钢' : '黄铜') : m}</span>
                  <span className="count">{PRODUCTS.filter(p => p.material === m).length}</span>
                </label>
              ))}
            </div>

            <div className="filter-group">
              <h5>{t('list.filter.size', lang)}</h5>
              {['Ø85mm', 'Ø100mm', 'Ø160mm'].map(s => (
                <label key={s} className="filter-opt">
                  <input type="checkbox" checked={filters.size.includes(s)} onChange={() => toggleFilter('size', s)} />
                  <span>{s}</span>
                  <span className="count">{PRODUCTS.filter(p => p.size === s).length}</span>
                </label>
              ))}
            </div>

            <div className="filter-group">
              <h5>{t('list.filter.fill', lang)}</h5>
              {['Dry', 'Glycerin', 'N/A'].map(f => (
                <label key={f} className="filter-opt">
                  <input type="checkbox" checked={filters.filling.includes(f)} onChange={() => toggleFilter('filling', f)} />
                  <span>{fillingLabel(f)}</span>
                  <span className="count">{PRODUCTS.filter(p => p.filling === f).length}</span>
                </label>
              ))}
            </div>

            <div style={{ marginTop: 32, padding: 20, background: 'var(--bg-sunken)', borderRadius: 'var(--radius)', border: '1px solid var(--line)' }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>{t('list.help.title', lang)}</div>
              <p style={{ fontSize: 13, color: 'var(--ink-2)', marginBottom: 12, lineHeight: 1.5 }}>{t('list.help.body', lang)}</p>
              <button className="btn btn-primary btn-sm" onClick={() => setPage('rfq')} style={{ width: '100%', justifyContent: 'center' }}>{t('list.help.cta', lang)}</button>
            </div>
          </aside>

          <div>
            <div className="listing-toolbar">
              <div>
                <span className="count">{countFn(filtered.length, PRODUCTS.length)}</span>
                {activeFilters.length > 0 && (
                  <div className="chip-row">
                    {activeFilters.map((f, i) => (
                      <span key={i} className="chip">
                        {f.val}
                        <span className="x" onClick={() => toggleFilter(f.key, f.val)}>✕</span>
                      </span>
                    ))}
                    <span className="chip" style={{ cursor: 'pointer', borderStyle: 'dashed' }}
                      onClick={() => setFilters({ material: [], size: [], filling: [] })}>
                      {t('list.clear', lang)}
                    </span>
                  </div>
                )}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'JetBrains Mono', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{t('list.toolbar.sort', lang)}</span>
                <select value={sort} onChange={e => setSort(e.target.value)}>
                  <option value="default">{t('list.sort.default', lang)}</option>
                  <option value="name">{t('list.sort.name', lang)}</option>
                  <option value="range">{t('list.sort.range', lang)}</option>
                </select>
              </div>
            </div>

            {filtered.length === 0 ? (
              <div style={{ padding: 80, textAlign: 'center', border: '1px dashed var(--line)', borderRadius: 'var(--radius)' }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>{t('list.empty.h', lang)}</div>
                <p style={{ color: 'var(--ink-2)' }}>{t('list.empty.b', lang)}</p>
              </div>
            ) : (
              <div className="listing-grid">
                {filtered.map((p, i) => (
                  <div key={p.id} className="product-card" onClick={() => setPage(`product:${p.id}`)}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <div className="index">{p.sku}</div>
                      {p.hot && <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--accent)', letterSpacing: '0.08em' }}>{t('products.popular', lang)}</div>}
                    </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>
                        <span>{p.accuracy} · {p.conn}</span>
                      </div>
                    </div>
                    <div className="cta">
                      <span>{t('products.viewSpecs', lang)}</span>
                      <Arrow />
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { ListingPage });