/* app.jsx — root component.

   Authentication: the dashboard is gated behind page-login.jsx. A valid
   credential check populates a session in sessionStorage (NOT
   localStorage), so closing the tab — or opening an incognito window or a
   different browser — clears the session and forces a fresh login. The
   tweaks panel can no longer flip role or bypass the login screen; those
   were design-tool shortcuts that became a security hole.

   Language: derived from client.market_code (br → pt, intl → en); the
   client edits market in Configurações, the dashboard re-renders. */

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

/* ===================================================================
   Auth — sessionStorage-backed
   =================================================================== */

const SESSION_KEY = 'makali.auth';

function loadSession() {
  if (typeof sessionStorage === 'undefined') return null;
  try {
    const raw = sessionStorage.getItem(SESSION_KEY);
    if (!raw) return null;
    const s = JSON.parse(raw);
    if (s && (s.role === 'client' || s.role === 'admin')) return s;
  } catch (_) { /* ignore corrupt payload */ }
  return null;
}

function saveSession(session) {
  try { sessionStorage.setItem(SESSION_KEY, JSON.stringify(session)); }
  catch (_) { /* private mode / quota — caller still sees the in-memory state */ }
}

function clearSession() {
  try { sessionStorage.removeItem(SESSION_KEY); } catch (_) {}
}

/* ===================================================================
   Tweaks — DESIGN-TOOL state only. Auth lives outside this object so it
   can't be flipped from the panel.
   =================================================================== */

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

/* ===================================================================
   MakaliApp
   =================================================================== */

function MakaliApp() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const clientType = tweaks.clientType;

  // Auth — hydrated from sessionStorage on first render
  const [session, setSession] = useStateA(() => loadSession());
  const role = session ? session.role : null;

  const [page, setPage] = useStateA(tweaks.page || "overview");
  const [range, setRange] = useStateA(1);            // 0=7d, 1=30d, 2=90d, 3=custom
  const [customRange, setCustomRange] = useStateA({ from: null, to: null });
  const [mobileNavOpen, setMobileNavOpen] = useStateA(false);
  const [syncTick, setSyncTick] = useStateA(0);

  const dateRange = useMemoA(() => dateRangeFromIndex(range, customRange), [range, customRange]);

  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]);

  /* Page visibility — gated by which platforms the client has + role. */
  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] || "";

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

  /* ===== Auth handlers ===== */
  const login = (loggedInRole) => {
    const next = { role: loggedInRole, at: Date.now() };
    saveSession(next);
    setSession(next);
  };
  const logout = () => {
    clearSession();
    setSession(null);
    setMobileNavOpen(false);
  };

  /* ===== AUTH GATE — render login until a valid session exists ===== */
  if (!session) {
    return (
      <>
        <LoginPage
          lang={lang}
          client={client}
          onLogin={login}
        />
        <MakaliTweaks tweaks={tweaks} setTweak={setTweak} lang={lang}/>
      </>
    );
  }

  /* ===== Authenticated dashboard ===== */
  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={logout}
        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}
          customRange={customRange}
          onCustomRange={(from, to) => { setCustomRange({ from, to }); setRange(3); }}
          onMenuClick={() => setMobileNavOpen(true)}
          onSync={() => setSyncTick(t => t + 1)}
        />

        {page === "overview"  && <OverviewPage  lang={lang} client={client} dateRange={dateRange} syncTick={syncTick}/>}
        {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. Role / show-login bypasses were
   removed; they were security holes. The only remaining toggle is the
   client type, kept for design exploration across our two seed clients.
   =================================================================== */
function MakaliTweaks({ tweaks, setTweak, lang }) {
  return (
    <TweaksPanel>
      <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)}
      />
    </TweaksPanel>
  );
}

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