// pencarian.jsx — Search Results page

function Pencarian({ ctx, query }) {
  const [q, setQ] = React.useState(query || '');
  const [activeChips, setActiveChips] = React.useState(['Asli Jepang', 'Ready Stock']);

  const lower = (q || '').toLowerCase();
  const results = PRODUCTS.filter(p =>
    !lower ||
    p.nameID.toLowerCase().includes(lower) ||
    p.nameJP.toLowerCase().includes(lower) ||
    p.brand.toLowerCase().includes(lower) ||
    CATEGORY_BY_SLUG[p.cat].nameID.toLowerCase().includes(lower)
  );

  const suggestions = ['matcha', 'yukata', 'sake', 'switch', 'pocky', 'gundam', 'kimono', 'shiseido'];

  return (
    <div>
      <div style={{ marginBottom: 20 }}>
        <form className="search" style={{ maxWidth: 720, margin: '0 auto' }}
              onSubmit={(e) => { e.preventDefault(); ctx.go('pencarian', q); }}>
          <Icon name="search" size={18} />
          <input value={q} onChange={(e) => setQ(e.target.value)}
                 placeholder="Cari produk Jepang…" autoFocus />
          <button type="submit" className="search-btn">
            <Icon name="search" size={14} /> Cari
          </button>
        </form>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
        <span className="muted" style={{ fontSize: 13 }}>Hasil pencarian untuk:</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>"{query || '—'}"</span>
        <span className="muted">· {results.length} produk</span>
      </div>

      {/* active filter chips */}
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 20 }}>
        {activeChips.map(c => (
          <span key={c} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            background: 'var(--pink-l)', border: '2px solid var(--pink)',
            color: 'var(--pink-d)', borderRadius: 999, padding: '4px 10px',
            fontSize: 12, fontWeight: 600
          }}>
            {c}
            <button onClick={() => setActiveChips(activeChips.filter(x => x !== c))}
                    style={{ background: 'none', border: 0, color: 'inherit', padding: 0, display: 'grid', placeItems: 'center' }}>
              <Icon name="close" size={12} />
            </button>
          </span>
        ))}
        <button className="btn ghost sm" onClick={() => setActiveChips([])}>Hapus filter</button>
      </div>

      {results.length === 0 ? (
        <div className="empty">
          <div className="icon-big">無</div>
          <h3>Tidak ada hasil untuk "{query}"</h3>
          <p>Coba kata kunci lain atau jelajahi kategori populer.</p>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'center', marginTop: 8 }}>
            {suggestions.map(s => (
              <button key={s} className="btn ghost sm" onClick={() => ctx.go('pencarian', s)}>
                {s}
              </button>
            ))}
          </div>
        </div>
      ) : (
        <>
          <div className="product-grid">
            {results.map(p => <ProductCard key={p.id} product={p} ctx={ctx} />)}
          </div>

          <div style={{ marginTop: 32 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, marginBottom: 12 }}>
              <span style={{ fontFamily: 'var(--font-jp)', fontSize: 12, color: 'var(--pink)', display: 'block', letterSpacing: '.2em' }}>
                おすすめ
              </span>
              Pencarian Populer
            </h3>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {suggestions.map(s => (
                <button key={s} className="btn ghost sm" onClick={() => ctx.go('pencarian', s)}>
                  <Icon name="search" size={12} /> {s}
                </button>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

Object.assign(window, { Pencarian });