// ============================================================
// Search — khung tìm sản phẩm theo tên, mã, loại, bộ sưu tập.
// Không cần máy chủ: lọc ngay trên danh sách JM.products.
// ============================================================

function jmPlain(s) {
  return String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/đ/g, 'd').replace(/Đ/g, 'd').toLowerCase();
}

function JmSearch({ open, lang, onClose, onOpenProduct }) {
  const [q, setQ] = React.useState('');
  const inputRef = React.useRef(null);

  React.useEffect(() => { if (open) { setQ(''); setTimeout(() => inputRef.current && inputRef.current.focus(), 50); } }, [open]);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const index = React.useMemo(() => (JM.products || []).map(p => {
    const cat = JM.categories.find(c => c.id === p.category);
    const cols = (p.collections || []).map(id => (JM.collections.find(c => c.id === id) || {}).name).join(' ');
    return { p, text: jmPlain([p.name, p.code, cat && cat.vi, cat && cat.en, cols].join(' ')) };
  }), []);

  const words = jmPlain(q).split(/\s+/).filter(Boolean);
  const results = words.length
    ? index.filter(x => words.every(w => x.text.includes(w))).map(x => x.p).sort(JM.featuredSort).slice(0, 24)
    : [];
  const suggest = ['Hoops', 'Pearl', 'Ring', 'Bangle', 'Hòa Viên', 'Inner Universe'];

  if (!open) return null;
  return (
    <>
      <div className="jm-scrim is-open" onClick={onClose}></div>
      <div className="jm-search" role="dialog" aria-label={lang === 'vi' ? 'Tìm kiếm' : 'Search'}>
        <div className="jm-search__bar">
          <i data-lucide="search" className="jm-icon"></i>
          <input ref={inputRef} id="jm-search-input" className="jm-search__input" value={q} onChange={e => setQ(e.target.value)}
                 placeholder={lang === 'vi' ? 'Tìm theo tên, mã sản phẩm, bộ sưu tập…' : 'Search by name, code, collection…'}/>
          <button className="jm-icon-btn" onClick={onClose} aria-label={lang === 'vi' ? 'Đóng' : 'Close'}><i data-lucide="x" className="jm-icon"></i></button>
        </div>
        <div className="jm-search__body">
          {!words.length && (
            <div className="jm-search__suggest">
              <span className="jm-label">{lang === 'vi' ? 'Gợi ý' : 'Try'}</span>
              {suggest.map(s => <button key={s} className="jm-search__chip" onClick={() => setQ(s)}>{s}</button>)}
            </div>
          )}
          {words.length > 0 && results.length === 0 && (
            <p className="jm-small">{lang === 'vi' ? `Không tìm thấy sản phẩm cho "${q}".` : `No pieces match "${q}".`}</p>
          )}
          {results.length > 0 && (
            <>
              <p className="jm-small">{lang === 'vi' ? `${results.length} sản phẩm` : `${results.length} pieces`}</p>
              <div className="jm-search__grid">
                {results.map(p => (
                  <a key={p.id} className="jm-search__item" href={JM.hrefFor({ view: 'product', product: p })}
                     onClick={(e) => { e.preventDefault(); onClose(); onOpenProduct(p); }}>
                    <div className="jm-search__thumb"><JmProductImage product={p} ratio="1/1" alt={p.name}/></div>
                    <div>
                      <div className="jm-title">{p.name}</div>
                      <div className="jm-small">{p.code} · {JM.formatPrice(p.price)}</div>
                    </div>
                  </a>
                ))}
              </div>
            </>
          )}
        </div>
      </div>
    </>
  );
}

window.JmSearch = JmSearch;