// Shop / Kollektionsseite mit Filtern

const Shop = () => {
  const { openPDP, quickAdd, route, go } = useApp();
  const initFilter = route.filter || null;
  const [cat, setCat] = React.useState(() => {
    if (!initFilter) return 'Alle';
    if (initFilter === 'new') return 'Neu';
    if (['Tische','Regale','Sitzen','Objekte','Konsolen'].includes(initFilter)) return initFilter;
    return 'Alle';
  });
  const [finishes, setFinishes] = React.useState([]);
  const [price, setPrice] = React.useState([0, 7000]);
  const [sort, setSort] = React.useState('curated');
  const [collection, setCollection] = React.useState(() => initFilter==='ZEN'||initFilter==='zen' ? 'ZEN' : 'Alle');

  const toggle = (arr,setA,v)=>setA(arr.includes(v)?arr.filter(x=>x!==v):[...arr,v]);

  let items = PRODUCTS.slice();
  if (cat !== 'Alle' && cat !== 'Neu') items = items.filter(p=>p.category===cat || p.cat===cat);
  if (cat === 'Neu') items = items.filter(p=>p.flag==='new');
  if (collection === 'ZEN') items = items.filter(p=>p.name.startsWith('ZEN'));
  if (collection === 'TUKKON') items = items.filter(p=>p.name.startsWith('TUKKON'));
  if (finishes.length) items = items.filter(p=>p.tones.some(t=>finishes.includes(t)));
  items = items.filter(p=> p.price==null || (p.price>=price[0] && p.price<=price[1]));

  if (sort==='price-asc') items.sort((a,b)=>(a.price||0)-(b.price||0));
  if (sort==='price-desc') items.sort((a,b)=>(b.price||0)-(a.price||0));
  if (sort==='new') items.sort((a,b)=> (b.flag==='new'?1:0)-(a.flag==='new'?1:0));
  if (sort==='curated') items.sort((a,b)=> (b.hasStudio?1:0)-(a.hasStudio?1:0));

  const categoryTitle = cat==='Alle' && collection==='Alle' ? 'Alle Stücke' : (collection!=='Alle'? collection+' Kollektion' : cat);

  return <>
    <div className="crumb"><a onClick={()=>go({page:'home'})}>Home</a><span>/</span>Shop<span>/</span>{categoryTitle}</div>
    <div className="col-hero">
      <div className="eyebrow">{items.length.toString().padStart(2,'0')} Stücke · {cat==='Alle'?'Alle Kategorien':cat}</div>
      <h1>{collection!=='Alle'? <>Die <span className="accent-word">{collection}</span> Kollektion.</> : cat==='Alle'? <>Der vollständige <span className="accent-word">Katalog.</span></> : <>Für den Bereich <span className="accent-word">{cat}.</span></>}</h1>
      <p>
        {collection==='ZEN' && "Die Gründungskollektion. Sechs Stücke, die eine einzige Grammatik teilen: eine schwere Platte auf der leisesten möglichen Basis."}
        {collection==='TUKKON' && "Drei Stücke, die sich wie kleine Tempel lesen. Dunkel, feierlich, in sich geschlossen."}
        {collection==='Alle' && cat==='Alle' && "Jedes Stück, das in unserer Werkstatt entsteht. Nach Kategorie, Oberfläche oder Preis filtern. Oder schreiben Sie uns und wir stellen etwas zusammen."}
        {collection==='Alle' && cat!=='Alle' && "Filtern Sie nach Oberfläche, Größe und Preis. Jedes Stück wird auf Bestellung gefertigt; Lieferzeiten finden Sie auf der Produktseite."}
      </p>
    </div>

    <div className="col-head">
      <div className="count">{items.length} von {PRODUCTS.length}</div>
      <div className="pills">
        {['Alle','Tische','Regale','Sitzen','Objekte','Konsolen','Neu'].map(c=>(
          <button key={c} className={cat===c?'on':''} onClick={()=>setCat(c)}>{c}</button>
        ))}
        <span style={{width:1,background:'var(--line)',margin:'0 8px'}}/>
        {['Alle','ZEN','TUKKON'].map(c=>(
          <button key={c} className={collection===c?'on':''} onClick={()=>setCollection(c)}>{c==='Alle'?'Alle Koll.':c}</button>
        ))}
      </div>
      <select value={sort} onChange={e=>setSort(e.target.value)} style={{padding:'8px 12px',border:'1px solid var(--line)',background:'var(--paper)',fontFamily:'"JetBrains Mono",monospace',fontSize:11,letterSpacing:'0.14em',textTransform:'uppercase'}}>
        <option value="curated">Kuratiert</option>
        <option value="new">Neu zuerst</option>
        <option value="price-asc">Preis ↑</option>
        <option value="price-desc">Preis ↓</option>
      </select>
    </div>

    <div className="col-body">
      <aside className="filters">
        <details className="group" open>
          <summary><h4>Oberfläche</h4></summary>
          {[
            {k:'brass',n:'Messing'},
            {k:'copper',n:'Kupfer'},
            {k:'steel',n:'Edelstahl, gebürstet'},
            {k:'black',n:'Stahl, geschwärzt'},
          ].map(f=>(
            <label key={f.k}>
              <input type="checkbox" checked={finishes.includes(f.k)} onChange={()=>toggle(finishes,setFinishes,f.k)}/>
              <Swatch c={f.k}/> {f.n}
              <span className="count">{PRODUCTS.filter(p=>p.tones.includes(f.k)).length}</span>
            </label>
          ))}
        </details>

        <details className="group">
          <summary><h4>Typ</h4></summary>
          {['Tische','Regale','Sitzen','Objekte','Konsolen'].map(c=>(
            <label key={c}>
              <input type="checkbox" checked={cat===c} onChange={()=>setCat(cat===c?'Alle':c)}/>
              {c}
              <span className="count">{PRODUCTS.filter(p=>p.category===c || p.cat===c).length}</span>
            </label>
          ))}
        </details>

        <details className="group">
          <summary><h4>Preis</h4></summary>
          <div className="pricerange">
            <div className="vals"><span>{price[0].toLocaleString('de-DE')} €</span><span>{price[1].toLocaleString('de-DE')} €{price[1]>=7000?'+':''}</span></div>
            <div className="dual">
              <div className="track"><div className="fill" style={{left:((price[0]/7000)*100)+'%',right:(100-(price[1]/7000)*100)+'%'}}/></div>
              <input type="range" min="0" max="7000" step="100" value={price[0]} onChange={e=>setPrice([Math.min(+e.target.value, price[1]-100), price[1]])}/>
              <input type="range" min="0" max="7000" step="100" value={price[1]} onChange={e=>setPrice([price[0], Math.max(+e.target.value, price[0]+100)])}/>
            </div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:6,marginTop:14}}>
            {[[0,500,'unter 500'],[500,1500,'500 – 1.500'],[1500,3000,'1.500 – 3.000'],[3000,7000,'ab 3.000']].map((b)=>(
              <button key={b[2]} onClick={()=>setPrice([b[0],b[1]])} style={{padding:'8px',border:'1px solid var(--line)',fontFamily:'"JetBrains Mono",monospace',fontSize:10,letterSpacing:'0.12em',textTransform:'uppercase',background:price[0]===b[0]&&price[1]===b[1]?'var(--ink)':'var(--paper)',color:price[0]===b[0]&&price[1]===b[1]?'var(--paper)':'var(--ink)'}}>{b[2]}</button>
            ))}
          </div>
        </details>

        <details className="group">
          <summary><h4>Verfügbarkeit</h4></summary>
          <label><input type="checkbox"/> Lagernd · 48 h Versand <span className="count">9</span></label>
          <label><input type="checkbox"/> Auftragsarbeit <span className="count">14</span></label>
          <label><input type="checkbox"/> Nummerierte Edition <span className="count">3</span></label>
        </details>

        <details className="group">
          <summary><h4>Raum</h4></summary>
          {['Wohnzimmer','Esszimmer','Eingang','Schlafzimmer'].map(r=>(
            <label key={r}><input type="checkbox"/> {r}</label>
          ))}
        </details>

        <button className="btn sm ghost" style={{width:'100%',justifyContent:'center',marginTop:12}} onClick={()=>{setFinishes([]);setPrice([0,7000]);setCat('Alle');setCollection('Alle')}}>Filter zurücksetzen</button>
      </aside>

      <div className="col-grid-wrap">
        <div className="col-grid">
          {items.map(p=><ProductCard key={p.id} p={p} onOpen={openPDP} onAdd={quickAdd}/>)}
        </div>
        {items.length===0 && <div style={{padding:'80px 0',textAlign:'center',color:'var(--ink-3)'}}>Keine Stücke entsprechen diesen Filtern.</div>}
        {items.length>0 && <div style={{marginTop:64,padding:'40px',textAlign:'center',borderTop:'1px solid var(--line)'}}>
          <div className="eyebrow">Nicht das Richtige dabei?</div>
          <div className="serif" style={{fontSize:36,marginTop:14}}>Wir fertigen <span className="accent-word">maßgeschneidert.</span></div>
          <p style={{color:'var(--ink-2)',maxWidth:'36em',margin:'16px auto'}}>Jedes Stück gibt es auch in anderer Größe, Oberfläche oder Legierung. Skizze oder Foto schicken. Wir antworten mit Zeichnung und Preis.</p>
          <button className="btn" style={{marginTop:14}}>Auftragsarbeit anfragen <Icon name="arrow"/></button>
        </div>}
      </div>
    </div>
  </>;
};

Object.assign(window, { Shop });