// Shop — filters sidebar + sortable product grid
function ShopScreen({ onAdd, onOpen }) {
  const { Icon } = window;
  const { ProductCard, Badge, Checkbox, Select } = window.SinopharmaDesignSystem_d11735;
  const all = window.SP_DATA.products;
  const [cat, setCat] = React.useState(null);
  const [sort, setSort] = React.useState('pop');

  let list = cat ? all.filter((p) => p.category === cat) : all;
  if (sort === 'price') list = [...list].sort((a, b) => parseFloat(a.price.replace(',', '.')) - parseFloat(b.price.replace(',', '.')));
  if (sort === 'rating') list = [...list].sort((a, b) => b.rating - a.rating);

  return (
    <main>
      {/* page head */}
      <div style={{ background: 'var(--sage-50)', borderBottom: '1px solid var(--border-hairline)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 28px 36px' }}>
          <div style={{ fontSize: 13, color: 'var(--gray-500)', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 7 }}>
            Accueil <Icon name="chevron-right" size={14} color="var(--gray-400)" /> <span style={{ color: 'var(--gray-700)' }}>Boutique</span>
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.9rem,1.4rem+1.6vw,2.6rem)', letterSpacing: '-0.02em', color: 'var(--gray-900)', margin: '0 0 8px' }}>
            {cat || 'Toutes les formules'}
          </h1>
          <p style={{ color: 'var(--gray-600)', fontSize: 15, margin: 0 }}>{list.length} produits · plantes tracées, dosages standardisés</p>
        </div>
      </div>

      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '36px 28px 84px', display: 'grid', gridTemplateColumns: '252px 1fr', gap: 40 }}>
        {/* SIDEBAR */}
        <aside>
          <FilterGroup title="Besoin">
            <FilterRow active={!cat} label="Tous les besoins" onClick={() => setCat(null)} count={all.length} />
            {window.SP_DATA.categories.map((c) => (
              <FilterRow key={c} active={cat === c} label={c} onClick={() => setCat(c)} count={all.filter((p) => p.category === c).length} />
            ))}
          </FilterGroup>
          <div style={{ height: 1, background: 'var(--border-hairline)', margin: '22px 0' }} />
          <FilterGroup title="Forme">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 4 }}>
              <Checkbox label="Gélules" defaultChecked />
              <Checkbox label="Comprimés" />
              <Checkbox label="Poudre" />
              <Checkbox label="Tisane" />
            </div>
          </FilterGroup>
          <div style={{ height: 1, background: 'var(--border-hairline)', margin: '22px 0' }} />
          <FilterGroup title="Label">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 4 }}>
              <Checkbox label="Bio" defaultChecked />
              <Checkbox label="Sans gluten" />
              <Checkbox label="Vegan" />
            </div>
          </FilterGroup>
          <div style={{ marginTop: 26, background: 'var(--wave-dusk)', borderRadius: 'var(--radius-lg)', padding: 22, color: 'var(--cream-100)' }}>
            <Icon name="stethoscope" size={24} color="var(--sage-300)" />
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, margin: '12px 0 6px' }}>Besoin d'un conseil ?</div>
            <p style={{ fontSize: 13.5, color: 'var(--text-on-dark-muted)', lineHeight: 1.55, margin: '0 0 14px' }}>Un praticien vous oriente vers la formule adaptée.</p>
            <a href="#" style={{ color: 'var(--sage-300)', fontWeight: 600, fontSize: 13.5, display: 'inline-flex', alignItems: 'center', gap: 6 }}>Démarrer le bilan <Icon name="arrow-right" size={15} color="var(--sage-300)" /></a>
          </div>
        </aside>

        {/* GRID */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {cat ? <Badge tone="green" dot>{cat}</Badge> : null}
              <Badge tone="sage">Bio</Badge>
              <Badge tone="sage">Gélules</Badge>
            </div>
            <div style={{ minWidth: 200 }}>
              <Select value={sort} onChange={(e) => setSort(e.target.value)}>
                <option value="pop">Trier : Popularité</option>
                <option value="price">Prix croissant</option>
                <option value="rating">Mieux notés</option>
              </Select>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
            {list.map((p) => (
              <div key={p.id} onClick={() => onOpen(p)} style={{ cursor: 'pointer' }}>
                <ProductCard {...p} onAdd={() => onAdd(p)} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
}

function FilterGroup({ title, children }) {
  return (
    <div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 12.5, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--gray-500)', margin: '0 0 12px' }}>{title}</h3>
      {children}
    </div>
  );
}
function FilterRow({ label, count, active, onClick }) {
  return (
    <button onClick={onClick} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', padding: '7px 10px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: active ? 'var(--sage-100)' : 'transparent', color: active ? 'var(--green-700)' : 'var(--gray-700)', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: active ? 600 : 400, textAlign: 'left' }}>
      <span>{label}</span>
      <span style={{ fontSize: 12, color: active ? 'var(--green-600)' : 'var(--gray-400)', fontFamily: 'var(--font-mono)' }}>{count}</span>
    </button>
  );
}
window.ShopScreen = ShopScreen;