// src/components/Nav.jsx
function Nav() {
  const { lang, theme, toggleTheme, toggleLang, t, navigate, scrollToSection, page, activeSection } = useApp();
  const [open, setOpen] = React.useState(false);

  const links = [
    { id: 'stories',    label: t.nav.stories,    section: 'stories',     p: 'history' },
    { id: 'problems',   label: t.nav.problem,    section: 'problems',    p: 'home' },
    { id: 'demands',    label: t.nav.demands,    section: 'demands',     p: 'home' },
    { id: 'news',       label: t.nav.news,       section: 'latest-news', p: 'news' },
    { id: 'supporters', label: t.nav.supporters, section: 'supporters',  p: 'home' },
  ];

  function handleLinkClick(link) {
    setOpen(false);
    if (link.p === 'news' || link.p === 'history') {
      navigate(link.p);
    } else if (link.section) {
      scrollToSection(link.section);
    } else {
      navigate('home');
    }
  }

  function isActive(link) {
    if (link.p === 'news') {
      return page === 'news' || page === 'article' || (page === 'home' && activeSection === 'latest-news');
    }
    if (link.p === 'history') {
      return page === 'history' || page === 'history-article' || (page === 'home' && activeSection === 'stories');
    }
    if (page !== 'home') return false;
    if (!link.section || !activeSection) return false;
    if (activeSection === 'hero') return false;
    return activeSection === link.section;
  }

  const SunIcon = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <circle cx="12" cy="12" r="5"/>
      <line x1="12" y1="1" x2="12" y2="3"/>
      <line x1="12" y1="21" x2="12" y2="23"/>
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
      <line x1="1" y1="12" x2="3" y2="12"/>
      <line x1="21" y1="12" x2="23" y2="12"/>
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
    </svg>
  );
  const MoonIcon = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
    </svg>
  );

  return (
    <>
    {open && (
      <div
        className="md:hidden fixed inset-0 z-40"
        style={{ background: 'rgba(0,0,0,0.35)' }}
        onClick={() => setOpen(false)}
        aria-hidden="true"
      />
    )}
    <nav
      className="fixed top-0 left-0 right-0 z-50"
      style={{ background: 'var(--bg-nav)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--border-card)' }}
    >
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 h-[76px] flex items-center justify-between">
        <Logo />

        <div className="desktop-nav hidden md:flex items-center gap-[20px]">
          {links.map(l => (
            <button
              key={l.id}
              type="button"
              onClick={() => handleLinkClick(l)}
              className="nav-link text-[15px]"
              style={{
                color: isActive(l) ? 'var(--accent)' : 'var(--text)',
                fontWeight: isActive(l) ? 600 : 400,
                background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0',
              }}
            >
              {l.label}
            </button>
          ))}
        </div>

        <div className="hidden md:flex items-center gap-20">
          <button className="theme-btn" onClick={toggleTheme} title={theme === 'dark' ? 'Light mode' : 'Dark mode'}>
            {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
          </button>
          <div className="flex gap-3 items-center text-[15px]" style={{ color: 'var(--text-muted)' }}>
            <button
              onClick={() => lang !== 'ru' && toggleLang()}
              style={{ color: lang === 'ru' ? 'var(--text)' : 'var(--text-muted)', fontWeight: lang === 'ru' ? 600 : 400, background:'none', border:'none', cursor:'pointer', padding:0 }}
            >ru</button>
            <span style={{ color: 'var(--border)' }}>|</span>
            <button
              onClick={() => lang !== 'en' && toggleLang()}
              style={{ color: lang === 'en' ? 'var(--text)' : 'var(--text-muted)', fontWeight: lang === 'en' ? 600 : 400, background:'none', border:'none', cursor:'pointer', padding:0 }}
            >en</button>
          </div>
        </div>

        <button className="md:hidden theme-btn" onClick={() => setOpen(!open)}>
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            {open
              ? <path strokeLinecap="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              : <path strokeLinecap="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            }
          </svg>
        </button>
      </div>

      {open && (
        <div
          className="md:hidden px-4 py-4 flex flex-col gap-1"
          style={{ background: 'var(--bg-nav)', borderTop: '1px solid var(--border-card)' }}
        >
          {links.map(l => (
            <button
              key={l.id}
              type="button"
              onClick={() => handleLinkClick(l)}
              className="text-left text-[15px] py-[8px] px-[12px] rounded transition-colors"
              style={{
                color: isActive(l) ? 'var(--accent)' : 'var(--text-muted)',
                fontWeight: isActive(l) ? 600 : 400,
                background: isActive(l) ? 'var(--bg-outline)' : 'none',
                border: 'none', cursor: 'pointer',
              }}
            >
              {l.label}
            </button>
          ))}
          <div className="flex items-center justify-between pt-3 mt-1" style={{ borderTop: '1px solid var(--border-card)' }}>
            <div className="flex gap-2 text-[15px]" style={{ color: 'var(--text-muted)' }}>
              <button onClick={() => lang !== 'ru' && toggleLang()}
                style={{ color: lang === 'ru' ? 'var(--text)' : 'var(--text-muted)', fontWeight: lang === 'ru' ? 600 : 400, background:'none', border:'none', cursor:'pointer', padding:0 }}>ru</button>
              <span>|</span>
              <button onClick={() => lang !== 'en' && toggleLang()}
                style={{ color: lang === 'en' ? 'var(--text)' : 'var(--text-muted)', fontWeight: lang === 'en' ? 600 : 400, background:'none', border:'none', cursor:'pointer', padding:0 }}>en</button>
            </div>
            <button className="theme-btn" onClick={toggleTheme}>
              {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
            </button>
          </div>
        </div>
      )}
    </nav>
    </>
  );
}