// Search step — side-by-side: keyword search vs personalized/semantic search.
// Three scripted queries surface ernestarugs.com keyword-search weak points:
//   typo · natural-language (semantic) · attribute+price combo.

function StepSearch({ state, setState }) {
  const persona = window.PERSONAS.find(p => p.id === state.persona) || window.PERSONAS[0];
  const favorites = state.favorites || [];

  const [query, setQuery] = React.useState(SCRIPTED_QUERIES[0].q);
  const switchPersona = (id) => setState(s => ({ ...s, persona: id, favorites: [] }));

  // BEFORE — keyword search only sees the visible title (name + type + color).
  // For the combo query we mirror the REAL ernestarugs.com behavior: a multi-attribute
  // natural query is ignored and the entire catalog is returned in default order.
  const scriptedQ = SCRIPTED_QUERIES.find(s => s.q === query);
  const flood = !!(scriptedQ && scriptedQ.floods);
  const keywordResults = React.useMemo(() => {
    if (flood) return window.defaultOrder(window.PRODUCTS).slice(0, 8);
    const stop = new Set(['rug','rugs','the','for','and','that','can','will','with','under','from','your','our','this','one']);
    const words = query.toLowerCase().replace(/[$]/g, '').split(/\s+/).filter(w => w.length > 2 && !stop.has(w));
    if (!words.length) return [];
    return window.PRODUCTS.filter(p => {
      const visible = `${p.name} ${p.type} ${p.color}`.toLowerCase();
      return words.every(w => visible.includes(w));
    }).sort((a, b) => a.name.localeCompare(b.name)).slice(0, 6);
  }, [query, flood]);

  const favWeights = window.buildFavWeights ? window.buildFavWeights(favorites) : null;

  // AFTER — Malachyte resolves typo/intent to attribute aliases, matches the full
  // attribute vector (incl. material, palette, durability), then ranks by persona.
  const personalizedResults = React.useMemo(() => {
    const scripted = SCRIPTED_QUERIES.find(s => s.q === query);
    const aliases = scripted ? scripted.aliases : [query.toLowerCase()];
    if (!aliases.length) return [];
    const every = scripted && scripted.match === 'every';
    let pool = window.PRODUCTS.filter(p => {
      const extended = `${p.name} ${p.type} ${p.color} ${p.fam} ${p.cats.join(' ')}`.toLowerCase();
      return every ? aliases.every(a => extended.includes(a)) : aliases.some(a => extended.includes(a));
    });
    if (scripted && scripted.maxPrice) pool = pool.filter(p => p.price <= scripted.maxPrice);
    return window.rankProducts(pool, persona, favWeights).slice(0, 6);
  }, [query, persona, favWeights]);

  return (
    <div className="sbs-shell">
      <div className="sbs-grid">
        <SearchColumn mode="alpha" query={query} setQuery={setQuery} results={keywordResults} persona={persona} flood={flood} floodTotal={window.PRODUCTS.length} />
        <SearchColumn mode="malachyte" query={query} setQuery={setQuery} results={personalizedResults} persona={persona} favWeights={favWeights} />
      </div>
    </div>
  );
}

const SCRIPTED_QUERIES = [
  { q: 'a soft rug that hides pet hair',     intent: 'semantic', aliases: ['performance', 'pet-friendly', 'washable'] },
  { q: 'coastal blue rug for a nursery',     intent: 'combo',    aliases: ['blue', 'performance'], match: 'every' },
];

function SearchColumn({ mode, query, setQuery, results, persona, favWeights, flood, floodTotal }) {
  const isMal = mode === 'malachyte';
  const handleImgErr = (e) => { e.target.src = window.PRODUCT_FALLBACK; };
  const [open, setOpen] = React.useState(false);
  const pick = (q) => { setQuery(q); setOpen(false); };
  const scripted = SCRIPTED_QUERIES.find(s => s.q === query);

  return (
    <div className={`sbs-col sbs-col--${mode}`}>
      <div className="sbs-col__head">
        <span className="sbs-col__tag">{isMal ? 'AFTER' : 'BEFORE'}</span>
        <img
          src={isMal ? 'assets/malachyte-logo-gradient.png' : 'assets/ernesta-logo.png'}
          alt={isMal ? 'Malachyte' : 'Ernesta'}
          className={`sbs-col__logo sbs-col__logo--${isMal ? 'mal' : 'wiha'}`}
        />
        <span className="sbs-col__caption">{isMal ? 'Personalized search' : 'Keyword match'}</span>
      </div>

      <div className="sbs-col__viewport">
        <div className="demo-urlbar">
          <div className="demo-urlbar__dots"><span /><span /><span /></div>
          <div className="demo-urlbar__url">
            ernestarugs.com/search?q={encodeURIComponent(query)}{isMal ? ' · personalized by malachyte' : ''}
          </div>
        </div>

        <ErnestaChrome />

        <div className="wiha-plp-root">
          <div className={`search-bar-row ${open ? 'is-active' : ''}`}>
            <button className="search-bar-trigger" onClick={() => setOpen(o => !o)}>
              <span className={`search-bar-trigger-text ${!query ? 'is-placeholder' : ''}`}>
                {query || 'Search rugs…'}
              </span>
              <span className="search-bar-trigger-caret">▾</span>
            </button>

            {open && (
              <div className="search-bar-menu">
                <div className="search-bar-menu-eye">SCRIPTED QUERIES</div>
                {SCRIPTED_QUERIES.map(s => (
                  <button
                    key={s.q}
                    className={`search-bar-menu-item ${s.q === query ? 'is-selected' : ''}`}
                    onClick={() => pick(s.q)}
                  >
                    <span className="search-bar-menu-item-q">{s.q}</span>
                    <span className={`search-bar-menu-item-intent search-bar-menu-item-intent--${s.intent}`}>{s.intent}</span>
                  </button>
                ))}
              </div>
            )}
          </div>

          <div className="search-head">
            <div className="search-head__eye">
              {isMal ? 'PERSONALIZED RESULTS' : 'KEYWORD RESULTS'}
            </div>
            <h2 className="search-head__title">
              {flood
                ? `${floodTotal} rugs returned for “${query}”`
                : `${results.length} ${results.length === 1 ? 'match' : 'matches'} for “${query}”`}
            </h2>
            <p className="search-head__note">
              {isMal
                ? `Resolved to ${(scripted?.aliases || []).map(prettyAlias).join(' + ') || 'intent vector'}${scripted?.maxPrice ? ` · ≤ $${scripted.maxPrice}` : ''} — ranked for ${persona.userId}.`
                : flood
                  ? `Multi-attribute query not understood — every rug returned in default order, unfiltered by palette, durability or price.`
                  : results.length
                    ? `Returned in catalog order. No attributes or intent understood.`
                    : `No titles contain those exact words. Keyword search can't read typos, intent, palette or durability.`}
            </p>
          </div>

          <div className="wiha-grid">
            {results.map((p, i) => (
              <ProductCard
                key={p.id}
                product={p}
                index={i}
                mode={mode}
                persona={persona}
                favWeights={favWeights}
                isFav={false}
                onFav={() => {}}
                onImgErr={handleImgErr}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function prettyAlias(a) {
  const m = {
    'natural-fiber': 'natural fiber', 'pet-friendly': 'pet-friendly', 'indoor-outdoor': 'indoor / outdoor',
    blue: 'coastal blue', washable: 'washable', performance: 'performance', jute: 'jute',
    plush: 'plush', wool: 'wool',
  };
  return m[a] || a;
}

Object.assign(window, { StepSearch });