// Hatch Search — side-by-side: keyword match vs personalized search
// Three real-world queries exposing Hatch's search weak points

const HATCH_QUERIES = [
  {
    q: 'flowy sundres',
    intent: 'typo',
    // "sundres" = common misspelling of "sundress" — zero keyword matches
    // Malachyte resolves intent → dresses + rompers, ranked by persona
    aliases: ['dress', 'wrap dress', 'romper', 'jumpsuit', 'audrey', 'bella', 'maisie', 'sadie', 'izzy'],
  },
  {
    q: 'baby shower outfit',
    intent: 'semantic',
    // Natural occasion query — zero keyword matches on Hatch.
    // Malachyte understands occasion intent → premium dresses, patterns, florals, ranked by persona
    aliases: ['dress', 'floral', 'crochet', 'wrap dress', 'maisie', 'bella', 'camilla', 'magnolia', 'audrey', 'sadie', 'phoebe', 'maeve', 'bianca'],
  },
  {
    q: 'nursing top',
    intent: 'ranking',
    // Keywords exist — alpha returns all 16 nursing items alphabetically.
    // Dresses & nightgowns surface before tops. Malachyte narrows to tops only, ranked by persona.
    aliases: ['nursing top', 'nursing tee', 'nursing tank', 'isla nursing', 'ava nursing', 'vivi nursing', 'polished secret', 'softest rib nursing'],
  },
];

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(HATCH_QUERIES[0].q);

  const keywordResults = React.useMemo(() => {
    const words = query.toLowerCase().split(/\s+/).filter(w => w.length > 3);
    if (!words.length) return [];
    return window.PRODUCTS.filter(p => {
      const n = (p.name + ' ' + p.type + ' ' + p.color).toLowerCase();
      return words.every(w => n.includes(w));
    }).sort((a,b) => a.name.localeCompare(b.name)).slice(0, 6);
  }, [query]);

  const favWeights = window.buildFavWeights ? window.buildFavWeights(favorites) : null;
  const personalizedResults = React.useMemo(() => {
    const scripted = HATCH_QUERIES.find(s => s.q === query);
    const aliases = scripted ? scripted.aliases : [query.toLowerCase()];
    const pool = window.PRODUCTS.filter(p => {
      const n = (p.name + ' ' + p.type + ' ' + p.color).toLowerCase();
      return aliases.some(a => n.includes(a));
    });
    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} />
        <SearchColumn mode="malachyte" query={query} setQuery={setQuery} results={personalizedResults} persona={persona} favWeights={favWeights} />
      </div>
    </div>
  );
}

function SearchColumn({ mode, query, setQuery, results, persona, favWeights }) {
  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 = HATCH_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/hatch-logo.png'}
          alt={isMal ? 'Malachyte' : 'HATCH'}
          className={`sbs-col__logo sbs-col__logo--${isMal ? 'mal' : 'hatch'}`}
        />
        <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">
            hatchcollection.com/search?q={encodeURIComponent(query)}{isMal ? ' · personalized' : ''}
          </div>
        </div>
        <HatchChrome />

        <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 HATCH…'}
              </span>
              <span className="search-bar-trigger-caret">▾</span>
            </button>
            {open && (
              <div className="search-bar-menu">
                <div className="search-bar-menu-eye">SCRIPTED QUERIES · HATCH WEAK POINTS</div>
                {HATCH_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">{results.length} {results.length === 1 ? 'match' : 'matches'} for "{query}"</h2>
            <p className="search-head__note">
              {isMal
                ? `Resolved to: ${(scripted?.aliases || []).slice(0,4).join(' · ')} — ranked for ${persona.userId}.`
                : results.length
                  ? 'Returned in catalog order. No persona or lifecycle signal applied.'
                  : 'No exact keyword matches. Hatch search cannot handle typos or intent-based queries.'}
            </p>
          </div>

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

Object.assign(window, { StepSearch });