// Navegación superior — logo, links, búsqueda con resultados, CTA portfolio
function Nav({ screen, onNavigate, query, setQuery }) {
  const [focused, setFocused] = React.useState(false);
  const results = React.useMemo(() => {
    if (!query) return [];
    const q = query.toLowerCase();
    return Object.values(window.TICKERS)
      .filter((t) => t.symbol.toLowerCase().includes(q) || t.name.toLowerCase().includes(q))
      .slice(0, 6);
  }, [query]);

  const links = [
    { id: 'mercados',  label: 'Mercados', screens: ['portfolio'] },
    { id: 'acciones',  label: 'Acciones', screens: ['detail'] },
    { id: 'indices',   label: 'Índices' },
    { id: 'etfs',      label: 'ETFs' },
    { id: 'analisis',  label: 'Análisis' },
  ];

  return (
    <nav className="nav">
      <a href="#" className="logo" onClick={(e) => { e.preventDefault(); onNavigate('portfolio'); }}>
        Stock<span>Pulse</span>
      </a>

      <div className="nav-links">
        {links.map((l) => (
          <a key={l.id} href="#"
             className={l.screens?.includes(screen) ? 'active' : ''}
             onClick={(e) => {
               e.preventDefault();
               if (l.id === 'mercados') onNavigate('portfolio');
               else if (l.id === 'acciones') onNavigate('detail');
             }}>
            {l.label}
          </a>
        ))}
      </div>

      <div className={`nav-search${focused ? ' focused' : ''}`}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <circle cx="5.8" cy="5.8" r="4.3" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M9.2 9.2L12 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
        <input type="text" placeholder="Buscar ticker o empresa…"
               value={query} onChange={(e) => setQuery(e.target.value)}
               onFocus={() => setFocused(true)}
               onBlur={() => setTimeout(() => setFocused(false), 150)}/>
        {query && (
          <button className="nav-search-clear" onClick={() => setQuery('')}>✕</button>
        )}
        {focused && results.length > 0 && (
          <div className="nav-search-results">
            {results.map((t) => (
              <button key={t.symbol} className="nav-result"
                      onMouseDown={(e) => {
                        e.preventDefault();
                        onNavigate('detail', t.symbol);
                        setQuery('');
                      }}>
                <div className="nav-result-sym">{t.symbol}</div>
                <div className="nav-result-name">{t.name}</div>
                <div className={`nav-result-pct ${t.pct >= 0 ? 'up' : 'dn'}`}>
                  {t.pct >= 0 ? '+' : ''}{t.pct.toFixed(2)}%
                </div>
              </button>
            ))}
          </div>
        )}
      </div>

      <div className="nav-spacer"></div>

      <div className="nav-right">
        <button className="nav-icon-btn" title="Notificaciones">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M3.5 6.5a4.5 4.5 0 0 1 9 0v3l1.5 2.5h-12l1.5-2.5v-3Z"
                  stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
            <path d="M6.5 13a1.5 1.5 0 0 0 3 0" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
          </svg>
          <span className="nav-icon-dot"></span>
        </button>

        <a href="#" className={`nav-portfolio${screen === 'portfolio' ? ' on' : ''}`}
           onClick={(e) => { e.preventDefault(); onNavigate('portfolio'); }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <rect x="1" y="4.5" width="12" height="8.5" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
            <path d="M4.5 4.5V3C4.5 2.17 5.17 1.5 6 1.5H8C8.83 1.5 9.5 2.17 9.5 3V4.5" stroke="currentColor" strokeWidth="1.4"/>
          </svg>
          Mi Portafolio
        </a>
      </div>
    </nav>
  );
}

window.Nav = Nav;