/* app.jsx — root component, client + role + page state, tweaks.

   Language is derived from client.market_code (br → pt, intl → en) and is
   not user-toggleable: an admin changes the market in the Configurações
   page, and the dashboard re-renders in the new language. */

const { useState: useStateA, useEffect: useEffA, useMemo: useMemoA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "clientType": "ecom",
  "showLogin": false,
  "page": "overview",
  "role": "admin"
}/*EDITMODE-END*/;

function MakaliApp() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const clientType = tweaks.clientType;
  const showLogin = tweaks.showLogin;
  const role = tweaks.role || "admin";
  const [page, setPage] = useStateA(tweaks.page || "overview");
  const [range, setRange] = useStateA(1);            // 0=7d, 1=30d, 2=90d, 3=custom
  const [mobileNavOpen, setMobileNavOpen] = useStateA(false);
  // Incrementing this triggers a refetch on every page that subscribes via
  // usePlatformData — used by the TopBar sync button.
  const [syncTick, setSyncTick] = useStateA(0);

  // Date range derived from the index, passed to every platform page so its
  // Supabase query filters by .gte('date', from).lte('date', to).
  const dateRange = useMemoA(() => dateRangeFromIndex(range), [range]);

  const D = window.MK_DATA;

  /* Live, editable copy of the active client record. Settings edits flow
     here so the sidebar, login screen, and platform pages all reflect them
     immediately. Switching client type swaps which record we're editing. */
  const [clientOverrides, setClientOverrides] = useStateA(() => ({
    ecom: {}, lead: {}
  }));
  const client = useMemoA(() => {
    const base = D.CLIENT_PROFILE[clientType];
    const ov = clientOverrides[clientType] || {};
    return {
      ...base,
      ...ov,
      platforms: { ...base.platforms, ...(ov.platforms || {}) },
      users: { ...base.users, ...(ov.users || {}) }
    };
  }, [clientType, clientOverrides]);
  const updateClient = (edits) => setClientOverrides(prev => ({
    ...prev,
    [clientType]: { ...(prev[clientType] || {}), ...edits }
  }));

  /* Language is driven entirely by the client's market_code. */
  const lang = client.market_code === "intl" ? "en" : "pt";
  useEffA(() => { window.__mkLang = lang; }, [lang]);

  /* If the page the user is on is no longer available (platform disabled,
     client-type swap, role downgrade), redirect to overview. */
  const availablePages = useMemoA(() => {
    const platformIds = visiblePlatformItems(client, lang).map(p => p.id);
    const ids = new Set(["overview", ...platformIds]);
    if (role === "admin") ids.add("settings");
    return ids;
  }, [client, lang, role]);

  useEffA(() => {
    if (!availablePages.has(page)) setPage("overview");
  }, [availablePages, page]);

  const rangeKeys = ["top.last7", "top.last30", "top.last90", "top.custom"];
  const crumb = {
    overview:  t("nav.overview",  lang),
    meta:      t("nav.meta",      lang),
    google:    t("nav.google",    lang),
    tiktok:    t("nav.tiktok",    lang),
    analytics: t("nav.analytics", lang),
    shopify:   t("nav.shopify",   lang),
    settings:  t("nav.settings",  lang)
  }[page] || "";

  // For Login: set the blurred bg
  useEffA(() => {
    document.documentElement.style.setProperty(
      "--login-bg",
      `url("assets/brand-gradient.jpg")`
    );
  }, []);

  if (showLogin) {
    return (
      <>
        <LoginPage
          lang={lang}
          client={client}
          onLogin={(loggedInRole) => {
            setTweak({ showLogin: false, role: loggedInRole });
          }}
        />
        <MakaliTweaks tweaks={tweaks} setTweak={setTweak} lang={lang}/>
      </>
    );
  }

  return (
    <div className="app" data-screen-label={"01 " + (page.charAt(0).toUpperCase() + page.slice(1))}>
      <Sidebar
        active={page}
        onNavigate={setPage}
        client={client}
        lang={lang}
        role={role}
        onLogout={() => setTweak("showLogin", true)}
        mobileOpen={mobileNavOpen}
        onMobileClose={() => setMobileNavOpen(false)}
      />
      {mobileNavOpen && (
        <div className="mobile-backdrop" onClick={() => setMobileNavOpen(false)}/>
      )}
      <div className="main">
        <TopBar
          crumb={crumb}
          lang={lang}
          range={rangeKeys[range]}
          onRange={setRange}
          onMenuClick={() => setMobileNavOpen(true)}
          onSync={() => setSyncTick(t => t + 1)}
        />

        {page === "overview"  && <OverviewPage  lang={lang} client={client}/>}
        {page === "meta"      && <MetaPage      lang={lang} client={client} dateRange={dateRange} syncTick={syncTick}/>}
        {page === "google"    && <GooglePage    lang={lang} client={client} dateRange={dateRange} syncTick={syncTick}/>}
        {page === "tiktok"    && <TiktokPage    lang={lang} client={client} dateRange={dateRange} syncTick={syncTick}/>}
        {page === "analytics" && <AnalyticsPage lang={lang} client={client} dateRange={dateRange} syncTick={syncTick}/>}
        {page === "shopify" && client.type === "ecom" && <ShopifyPage lang={lang} client={client} dateRange={dateRange} syncTick={syncTick}/>}
        {page === "settings" && role === "admin" && (
          <SettingsPage lang={lang} client={client} onUpdate={updateClient}/>
        )}
      </div>

      <MakaliTweaks tweaks={tweaks} setTweak={setTweak} lang={lang}/>
    </div>
  );
}

/* ===================================================================
   TWEAKS PANEL — design-tool overlay. Language toggle removed; market
   in Configurações drives language. Role tweak lets a designer flip
   between the client and admin views without re-logging in.
   =================================================================== */
function MakaliTweaks({ tweaks, setTweak, lang }) {
  return (
    <TweaksPanel>
      <TweakSection label={lang === "pt" ? "Função" : "Role"}/>
      <TweakRadio
        label={lang === "pt" ? "Logado como" : "Logged in as"}
        value={tweaks.role || "admin"}
        options={["client", "admin"]}
        onChange={(v) => setTweak("role", v)}
      />

      <TweakSection label={lang === "pt" ? "Tipo de cliente" : "Client type"}/>
      <TweakRadio
        label={lang === "pt" ? "Modelo" : "Model"}
        value={tweaks.clientType}
        options={["ecom", "lead"]}
        onChange={(v) => setTweak("clientType", v)}
      />

      <TweakSection label={lang === "pt" ? "Telas" : "Screens"}/>
      <TweakButton label={lang === "pt" ? "Mostrar login" : "Show login screen"}
        onClick={() => setTweak("showLogin", true)}/>
    </TweaksPanel>
  );
}

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