/* global React, Icon, MOCK_IP, CopyBtn, useHashRoute, useT, useLocale, setLocale, SUPPORTED */

function ThemeToggle() {
  const t = useT();
  const [theme, setTheme] = useState(() => document.documentElement.dataset.theme || 'dark');
  const flip = () => {
    const v = theme === 'dark' ? 'light' : 'dark';
    document.documentElement.dataset.theme = v;
    setTheme(v);
    try { localStorage.setItem('vermeip:theme', v); } catch {}
  };
  return (
    <button className="icon-btn" onClick={flip}
      title={theme === 'dark' ? t('theme.light') : t('theme.dark')}
      aria-label={theme === 'dark' ? t('theme.light') : t('theme.dark')}>
      {theme === 'dark' ? <Icon.sun/> : <Icon.moon/>}
    </button>
  );
}

function LangSelector() {
  const t = useT();
  const locale = useLocale();
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const handler = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, [open]);

  return (
    <div className="lang-selector" ref={ref}>
      <button
        className="icon-btn lang-btn"
        onClick={() => setOpen(o => !o)}
        title={t('lang.label')}
        aria-label={t('lang.label')}
        aria-haspopup="menu"
        aria-expanded={open}
      >
        <span className="lang-globe"><Icon.globe/></span>
        <span className="lang-code">{locale.toUpperCase()}</span>
      </button>
      {open && (
        <div className="lang-menu" role="menu">
          {SUPPORTED.map(code => (
            <button
              key={code}
              role="menuitemradio"
              aria-checked={locale === code}
              className={'lang-option' + (locale === code ? ' active' : '')}
              onClick={() => { setLocale(code); setOpen(false); }}
            >
              <span className="lang-flag">{code === 'pt' ? '🇧🇷' : code === 'en' ? '🇬🇧' : '🇪🇸'}</span>
              <span>{t('lang.' + code)}</span>
              {locale === code && <span className="lang-check"><Icon.check/></span>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Brand() {
  return (
    <a href="#/" className="brand" aria-label="Ver meu IP">
      <span className="brand-mark">
        <svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
          <circle cx="16" cy="16" r="11"/>
          <ellipse cx="16" cy="16" rx="5" ry="11"/>
          <path d="M5 16h22"/>
          <circle cx="16" cy="16" r="2.5" fill="currentColor" stroke="none"/>
        </svg>
      </span>
      <span><strong>Ver</strong> meu <em>IP</em></span>
    </a>
  );
}

function Header({ route }) {
  const t = useT();
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [route]);

  const ROUTES = [
    { path: '/',           label: t('nav.home'),    icon: <Icon.globe/>   },
    { path: '/dns',        label: t('nav.dns'),     icon: <Icon.dns/>     },
    { path: '/ping',       label: t('nav.ping'),    icon: <Icon.ping/>    },
    { path: '/whois',      label: t('nav.whois'),   icon: <Icon.whois/>   },
    { path: '/velocidade', label: t('nav.speed'),   icon: <Icon.speed/>   },
    { path: '/reverse',    label: t('nav.reverse'), icon: <Icon.reverse/> },
  ];

  return (
    <header className="site-header">
      <div className="container header-row">
        <Brand/>
        <nav className={'nav' + (open ? ' open' : '')}>
          {ROUTES.map(r => (
            <a key={r.path} href={'#' + r.path} className="nav-link"
               aria-current={route === r.path ? 'page' : undefined}>
              {r.label}
            </a>
          ))}
        </nav>
        <div className="row header-actions">
          <LangSelector/>
          <ThemeToggle/>
          <button className="icon-btn mobile-toggle" onClick={() => setOpen(o => !o)} aria-label={t('nav.menu')}>
            <Icon.menu/>
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  const t = useT();
  return (
    <footer className="site-footer">
      <div className="container footer-row">
        <div style={{ maxWidth: 320 }}>
          <Brand/>
          <p style={{ marginTop: 12, lineHeight: 1.6 }}>{t('footer.tagline')}</p>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <h4>{t('footer.tools')}</h4>
            <a href="#/">{t('nav.home')}</a>
            <a href="#/dns">{t('nav.dns')}</a>
            <a href="#/ping">{t('nav.ping')}</a>
            <a href="#/whois">{t('nav.whois')}</a>
            <a href="#/velocidade">{t('nav.speed')}</a>
            <a href="#/reverse">{t('nav.reverse')}</a>
          </div>
          <div className="footer-col">
            <h4>{t('footer.learn')}</h4>
            <a href="#faq">{t('footer.whatIp')}</a>
            <a href="#faq">{t('footer.v4v6')}</a>
            <a href="#faq">{t('footer.privacy')}</a>
            <a href="#faq">{t('footer.glossary')}</a>
          </div>
          <div className="footer-col">
            <h4>{t('footer.about')}</h4>
            <a href="mailto:contato@vermeuip.com">{t('footer.contact')}</a>
            <a href="#/privacidade">{t('footer.privacyPolicy')}</a>
            <a href="#/termos">{t('footer.terms')}</a>
          </div>
        </div>
      </div>
      <div className="container" style={{ marginTop: 24, paddingTop: 16, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
        <span>{t('footer.copyright', { year: new Date().getFullYear() })}</span>
        <span>{t('footer.disclaimer')}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer, Brand, ThemeToggle, LangSelector });