/* global React, ReactDOM, useHashRoute, Header, Footer,
          HomePage, DNSPage, PingPage, WhoisPage, SpeedPage, ReversePage,
          PrivacyPage, TermsPage,
          useT, useLocale,
          TweaksPanel, useTweaks, TweakSection, TweakToggle, TweakRadio, TweakColor */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showAds": true,
  "showVPN": true,
  "showQuickTools": true,
  "accent": "#3ec99a",
  "density": "spacious"
}/*EDITMODE-END*/;

// Google Analytics 4 measurement ID. Analytics loads only after cookie consent.
const GA_MEASUREMENT_ID = "G-HNHDCWT135";

const COOKIE_KEY = "vermeip:cookies-consent";

function applyAccent(hex) {
  if (!hex) return;
  document.documentElement.style.setProperty("--accent", hex);
  document.documentElement.style.setProperty("--accent-2", hex);
}

function applyDensity(d) {
  document.documentElement.dataset.density = d;
  if (d === "compact") document.documentElement.style.setProperty("--radius", "8px");
  else                 document.documentElement.style.removeProperty("--radius");
}

// ── Load Google Analytics only after consent ──────────────────────────────
function loadAnalytics() {
  if (!GA_MEASUREMENT_ID) return;
  if (window.__ga_loaded) return;
  window.__ga_loaded = true;

  const s = document.createElement("script");
  s.async = true;
  s.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`;
  document.head.appendChild(s);

  window.dataLayer = window.dataLayer || [];
  function gtag(){ window.dataLayer.push(arguments); }
  window.gtag = gtag;
  gtag("js", new Date());
  // anonymize_ip is enforced by default in GA4, but we set it explicitly
  gtag("config", GA_MEASUREMENT_ID, { anonymize_ip: true, allow_google_signals: false });
}

// ── Cookie consent banner (GDPR / LGPD) ────────────────────────────────────
function CookieBanner() {
  const t = useT();
  const [accepted, setAccepted] = useState(() => {
    try { return !!localStorage.getItem(COOKIE_KEY); } catch { return true; }
  });

  // Auto-load analytics if previously accepted
  useEffect(() => { if (accepted) loadAnalytics(); }, [accepted]);

  if (accepted) return null;

  const accept = () => {
    try { localStorage.setItem(COOKIE_KEY, JSON.stringify({ ts: Date.now(), version: 1 })); } catch {}
    setAccepted(true);
    loadAnalytics();
  };

  return (
    <div className="cookie-banner" role="region" aria-label={t('cookies.bigText')}>
      <div className="text">
        <strong>{t('cookies.bigText')}</strong>{" "}
        {t('cookies.desc')}{" "}
        <a href="#/cookies">{t('cookies.policyLink')}</a> {t('cookies.and')}{" "}
        <a href="#/privacidade">{t('cookies.privacyLink')}</a>.
      </div>
      <div className="actions">
        <a href="#/privacidade" className="btn btn-sm">{t('cookies.learn')}</a>
        <button className="btn btn-sm btn-primary" onClick={accept}>{t('cookies.accept')}</button>
      </div>
    </div>
  );
}

// Map hash routes → SEO key in i18n.seo.*
const ROUTE_SEO = {
  "/":             "home",
  "/dns":          "dns",
  "/ping":         "ping",
  "/whois":        "whois",
  "/velocidade":   "speed",
  "/reverse":      "reverse",
  "/privacidade":  "privacidade",
  "/cookies":      "privacidade",
  "/termos":       "termos",
};

function setMeta(name, attr, content) {
  if (!content) return;
  let el = document.querySelector(`meta[${attr}="${name}"]`);
  if (!el) {
    el = document.createElement("meta");
    el.setAttribute(attr, name);
    document.head.appendChild(el);
  }
  el.setAttribute("content", content);
}

function useDocumentSeo(route) {
  const t = useT();
  const locale = useLocale();
  useEffect(() => {
    const key = ROUTE_SEO[route] || "home";
    const title = t(`seo.${key}.title`);
    const desc  = t(`seo.${key}.desc`);
    if (typeof title === "string") document.title = title;
    if (typeof desc  === "string") {
      setMeta("description",      "name",     desc);
      setMeta("og:description",   "property", desc);
      setMeta("twitter:description","name",   desc);
    }
    if (typeof title === "string") {
      setMeta("og:title",      "property", title);
      setMeta("twitter:title", "name",     title);
    }
    // Update canonical URL to reflect current route
    const canonical = document.querySelector('link[rel="canonical"]');
    if (canonical) canonical.setAttribute("href", "https://vermeuip.com/" + (route === "/" ? "" : "#" + route));
  }, [route, locale, t]);
}

function App() {
  const [route] = useHashRoute();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const saved = localStorage.getItem("vermeip:theme");
    if (saved) document.documentElement.dataset.theme = saved;
  }, []);
  useEffect(() => { applyAccent(tweaks.accent); },  [tweaks.accent]);
  useEffect(() => { applyDensity(tweaks.density); }, [tweaks.density]);

  // Per-route SEO (title + meta description per page/locale)
  useDocumentSeo(route);

  // Track route changes in GA after consent
  useEffect(() => {
    if (window.gtag && GA_MEASUREMENT_ID) {
      window.gtag("event", "page_view", {
        page_path: window.location.pathname + window.location.hash,
        page_location: window.location.href,
        page_title: document.title,
      });
    }
    // Scroll to top on route change so legal anchors don't jump pages
    if (!window.location.hash.includes("#priv-") && !window.location.hash.includes("#tou-")) {
      window.scrollTo({ top: 0, behavior: "instant" });
    }
  }, [route]);

  let page;
  switch (route) {
    case "/dns":         page = <DNSPage/>;     break;
    case "/ping":        page = <PingPage/>;    break;
    case "/whois":       page = <WhoisPage/>;   break;
    case "/velocidade":  page = <SpeedPage/>;   break;
    case "/reverse":     page = <ReversePage/>; break;
    case "/privacidade":
    case "/cookies":     page = <PrivacyPage/>; break;
    case "/termos":      page = <TermsPage/>;   break;
    default:             page = <HomePage tweaks={tweaks}/>;
  }

  return (
    <>
      <Header route={route}/>
      <main key={route}>{page}</main>
      <Footer/>
      <CookieBanner/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual">
          <TweakColor label="Cor de destaque" value={tweaks.accent} onChange={v => setTweak("accent", v)}/>
          <TweakRadio label="Densidade" value={tweaks.density} onChange={v => setTweak("density", v)}
            options={[{ value: "compact", label: "Compacta" }, { value: "spacious", label: "Espaçosa" }]}/>
        </TweakSection>
        <TweakSection label="Monetização">
          <TweakToggle label="Mostrar espaços de anúncio" value={tweaks.showAds} onChange={v => setTweak("showAds", v)}/>
          <TweakToggle label="Mostrar card de VPN (afiliado)" value={tweaks.showVPN} onChange={v => setTweak("showVPN", v)}/>
        </TweakSection>
        <TweakSection label="Conteúdo">
          <TweakToggle label="Mostrar atalhos de ferramentas" value={tweaks.showQuickTools} onChange={v => setTweak("showQuickTools", v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);