// ---------- Shared chrome: Header, Footer, Search ----------

function Header({ route, onNav }) {
  return (
    <header className="site-header">
      <div className="container">
        <a href="#/" className="brand" onClick={(e)=>{e.preventDefault(); onNav('/');}}>
          <span className="dot" />
          <span>alternativegratis<span className="tld">.it</span></span>
        </a>
        <nav className="header-nav">
          <a href="#/software" className={route.name==='all' ? 'active' : ''} onClick={(e)=>{e.preventDefault(); onNav('/software');}}>Tutti i software</a>
          <a href="#/" className={`hide-sm ${route.name==='home' ? 'active' : ''}`} onClick={(e)=>{e.preventDefault(); onNav('/');}}>Categorie</a>
        </nav>
      </div>
    </header>
  );
}

function SearchBar({ data, onNav, large=false, autoFocus=false, placeholder }) {
  const [q, setQ] = React.useState('');
  const [open, setOpen] = React.useState(false);
  const [hi, setHi] = React.useState(0);
  const ref = React.useRef();

  React.useEffect(() => {
    function onDoc(e) {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    }
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const results = React.useMemo(() => {
    if (!q.trim()) return [];
    const needle = q.toLowerCase().trim();
    const scored = [];
    for (const s of data) {
      const nm = s.nome.toLowerCase();
      let score = 0;
      if (nm.startsWith(needle)) score = 100;
      else if (nm.includes(needle)) score = 50;
      else if (s.categoria.toLowerCase().includes(needle)) score = 20;
      else if ((s.sottocategorie||[]).some(x=>x.toLowerCase().includes(needle))) score = 15;
      if (score) scored.push({ s, score });
    }
    scored.sort((a,b)=>b.score-a.score);
    return scored.slice(0, 8).map(x => x.s);
  }, [q, data]);

  function go(s) {
    setQ(''); setOpen(false);
    onNav(`/alternativa/${s.slug}`);
  }

  function onKey(e) {
    if (!open || !results.length) return;
    if (e.key === 'ArrowDown') { e.preventDefault(); setHi(h => Math.min(results.length-1, h+1)); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setHi(h => Math.max(0, h-1)); }
    else if (e.key === 'Enter') { e.preventDefault(); if (results[hi]) go(results[hi]); }
    else if (e.key === 'Escape') { setOpen(false); }
  }

  return (
    <div className={`searchbar ${large ? 'searchbar-lg' : ''}`} ref={ref}>
      <Icon.search />
      <input
        type="text"
        placeholder={placeholder || "Cerca un software (es. Photoshop, Notion, Canva…)"}
        value={q}
        autoFocus={autoFocus}
        onFocus={()=>setOpen(true)}
        onChange={(e)=>{ setQ(e.target.value); setOpen(true); setHi(0); }}
        onKeyDown={onKey}
      />
      {open && q.trim() && (
        <div className="search-results">
          {results.length === 0 ? (
            <div className="search-empty">Nessun software trovato per "{q}"</div>
          ) : results.map((s, i) => (
            <a key={s.id} href={`#/alternativa/${s.slug}`}
               className={`search-result ${i===hi?'highlighted':''}`}
               onMouseEnter={()=>setHi(i)}
               onClick={(e)=>{e.preventDefault(); go(s);}}>
              <Logo name={s.nome} size={32} url={s.sito_ufficiale} />
              <div>
                <div className="search-result-name">{s.nome}</div>
              </div>
              <div className="search-result-cat">{s.categoria}</div>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

function Footer({ categories, onNav }) {
  const year = new Date().getFullYear();
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-cols">
          <div className="footer-col">
            <a href="#/" className="brand" style={{marginBottom:12}} onClick={(e)=>{e.preventDefault(); onNav('/');}}>
              <span className="dot" />
              <span>alternativegratis<span className="tld">.it</span></span>
            </a>
            <p style={{color:'var(--ink-3)', fontSize:14, lineHeight:1.55, margin:0, maxWidth:360}}>
              La directory italiana delle alternative gratuite e open source ai software a pagamento. Recensioni indipendenti, aggiornate.
            </p>
          </div>
          <div className="footer-col">
            <h4>Esplora</h4>
            <a href="#/software" onClick={(e)=>{e.preventDefault(); onNav('/software');}}>Tutti i software</a>
            <a href="#/" onClick={(e)=>{e.preventDefault(); onNav('/');}}>Categorie</a>
          </div>
          <div className="footer-col">
            <h4>Top categorie</h4>
            {categories.slice(0,5).map(c => (
              <a key={c.name} href={`#/categoria/${c.slug}`} onClick={(e)=>{e.preventDefault(); onNav(`/categoria/${c.slug}`);}}>
                {c.name}
              </a>
            ))}
          </div>
          <div className="footer-col">
            <h4>Info</h4>
            <a href="#/chi-siamo" onClick={(e)=>{e.preventDefault(); onNav('/chi-siamo');}}>Chi siamo</a>
            <a href="#/contatti" onClick={(e)=>{e.preventDefault(); onNav('/contatti');}}>Contatti</a>
            <a href="#/privacy" onClick={(e)=>{e.preventDefault(); onNav('/privacy');}}>Privacy</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {year} AlternativeGratis.it — Fatto in Italia 🇮🇹</span>
          <span>Aggiornato {new Date().toLocaleDateString('it-IT', {month:'long', year:'numeric'})}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, SearchBar, Footer });