// Fortune VPN — LK router. HTML5 history API (без хэшей), flat URL.
// State лежит в state.js; здесь только роутинг, монтирование и auth-gate.

// ── URL routing (HTML5 history API) ────────────────────────────────────
const PARSE_PATH = () => {
  // /keys?code=XXX → "keys"
  const p = window.location.pathname.replace(/^\/+/, "").replace(/\/+$/, "");
  return p || "home";
};

window.navigate = (route) => {
  // Принимает route без слэша ("keys", "redeem"); внутренние клики.
  const clean = String(route || "").replace(/^\/+/, "");
  const url = "/" + clean;
  if (url !== window.location.pathname) {
    window.history.pushState({}, "", url);
    // history.pushState не триггерит popstate → диспатчим вручную
    window.dispatchEvent(new PopStateEvent("popstate"));
  }
};

function useRoute() {
  const [route, setRoute] = React.useState(PARSE_PATH());
  React.useEffect(() => {
    const onChange = () => setRoute(PARSE_PATH());
    window.addEventListener("popstate", onChange);
    return () => window.removeEventListener("popstate", onChange);
  }, []);
  return route;
}

// ── Auth gate ──────────────────────────────────────────────────────────
const AUTH_PUBLIC_ROUTES = new Set(["login", "code", "buy-start"]);

// ── Route → screen mapping ──────────────────────────────────────────────
function Screen({ route }) {
  if (route === "login")     return <Screen_Login />;
  if (route === "code")      return <Screen_Code />;
  if (route === "buy-start") return <Screen_BuyStart />;

  const s = window.appState;
  const hasAnyAccess = s.entitlement && s.entitlement.status === "active";

  if (route === "home" || route === "dashboard") {
    return hasAnyAccess ? <Screen_Dashboard scenario="active" /> : <Screen_NewUser />;
  }

  if (route === "keys")            return hasAnyAccess ? <Keys_Active /> : <Keys_Empty />;
  if (route === "keys-empty")      return <Keys_Empty />;
  if (route === "keys-checkout")   return <Keys_Checkout />;

  if (route === "redeem")   return <Screen_Redeem />;
  if (route === "referral") return <Screen_Referral />;
  if (route === "billing")  return <Screen_Billing />;
  if (route === "settings") return <Screen_Settings />;

  // Setup guides per client
  if (route === "setup-v2ray")   return <Screen_Setup_V2Ray />;
  if (route === "setup-incy")    return <Screen_Setup_Incy />;
  if (route === "setup-android") return <Screen_Setup_Android />;
  if (route === "setup-ios")     return <Screen_Setup_iOS />;

  return <Screen_Dashboard scenario="active" />;
}

// ── Modal overlay (driven by appState.modal) ────────────────────────────
function ModalOverlay() {
  const s = useAppState();
  if (!s.modal) return null;
  const Inner = {
    savelink:   window.Modal_SaveLink,
    regenerate: window.Modal_Regenerate,
    revoke:     window.Modal_Revoke,
    limit:      window.Modal_Limit,
    delete:     window.Modal_DeleteAccount,
    newslot:    window.Modal_NewSlot,
  }[s.modal];
  if (!Inner) return null;
  return <Inner />;
}

// ── Toast ───────────────────────────────────────────────────────────────
function ToastView() {
  const s = useAppState();
  if (!s.toast) return null;
  return (
    <div style={{
      position: "fixed", bottom: 24, right: 24, zIndex: 100,
      background: "var(--bg-2)", border: "1px solid var(--border-strong)",
      borderRadius: 12, padding: "12px 18px",
      color: "var(--ink)", fontSize: 14, fontWeight: 500,
      boxShadow: "0 20px 60px -20px rgba(0,0,0,.7)",
    }}>
      {s.toast}
    </div>
  );
}

function SessionBootScreen() {
  return (
    <div style={{
      minHeight: "100vh",
      display: "grid",
      placeItems: "center",
      background: "var(--bg)",
      color: "var(--muted)",
      fontSize: 14,
    }}>
      Проверяем сессию...
    </div>
  );
}

// ── Root App ────────────────────────────────────────────────────────────
function App() {
  const route = useRoute();
  const s = useAppState();

  // Apply palette tokens on mount.
  React.useEffect(() => {
    const p = {
      "--bg-1": "#0D111A",
      "--bg-2": "#10151F",
      "--accent": "#2E7DF5",
      "--accent-soft": "#5DA3FF",
      "--grad": "linear-gradient(135deg, #2E7DF5 0%, #2EA8FF 50%, #6BC8FF 100%)",
    };
    Object.entries(p).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, []);

  // ⌘B / Ctrl+B — toggle sidebar (как VS Code / Linear / Cursor).
  React.useEffect(() => {
    const onKey = (e) => {
      // Не реагируем, если юзер набирает в поле ввода (input, textarea, contenteditable).
      const t = e.target;
      const isInput = t && (
        t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable
      );
      if (isInput) return;
      const mod = e.metaKey || e.ctrlKey;
      if (mod && (e.key === "b" || e.key === "B")) {
        e.preventDefault();
        if (window.actions && window.actions.toggleSidebar) window.actions.toggleSidebar();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // Auth gate
  React.useEffect(() => {
    const checkoutReturnActive = !!(s.checkoutReturn && s.checkoutReturn.sessionId);
    const sessionPending = !!(s.session && (s.session.bootstrapping || !s.session.bootstrapped));
    if (sessionPending && !AUTH_PUBLIC_ROUTES.has(route)) return;
    if (!s.user.authenticated && !checkoutReturnActive && !AUTH_PUBLIC_ROUTES.has(route)) {
      window.navigate("login");
    }
    if (s.user.authenticated && route === "buy-start") {
      window.navigate("keys-checkout");
      return;
    }
    if (s.user.authenticated && (route === "login" || route === "buy-start")) {
      // Залогиненный юзер с лендинговой кнопки «Купить» сразу попадает в ЛК —
      // незачем повторно вводить email. Покупка Premium происходит внутри /keys.
      window.navigate("home");
    }
  }, [s.user.authenticated, s.session?.bootstrapping, s.session?.bootstrapped, route]);

  React.useEffect(() => {
    if (!s.user.authenticated && window.actions && window.actions.bootstrapSession && !(s.session && s.session.bootstrapped)) {
      window.actions.bootstrapSession();
    }
  }, [s.user.authenticated, s.session?.bootstrapped]);

  // Web checkout return: after payment provider redirects back to LK, sync the
  // checkout session once the user is authenticated.
  React.useEffect(() => {
    const checkout = s.checkoutReturn || {};
    if (!checkout.sessionId) return;
    if (checkout.status === "pending" || checkout.status === "login_required") {
      window.actions && window.actions.syncCheckoutReturn && window.actions.syncCheckoutReturn();
    }
  }, [s.user.authenticated, s.checkoutReturn?.sessionId, s.checkoutReturn?.status]);

  const sessionShouldBlockPublicAuth = route === "login" || route === "buy-start";
  const sessionChecking = !!(s.session?.bootstrapping || (!s.session?.bootstrapped && (!AUTH_PUBLIC_ROUTES.has(route) || sessionShouldBlockPublicAuth)));
  const shouldShowSessionBoot = sessionChecking && !s.session?.logoutPending && (!AUTH_PUBLIC_ROUTES.has(route) || route === "login" || route === "code" || route === "buy-start");

  return (
    <React.Fragment>
      {shouldShowSessionBoot ? <SessionBootScreen /> : <Screen route={route} />}
      <ModalOverlay />
      <ToastView />
    </React.Fragment>
  );
}

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