import { StrictMode, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { lazyComReload } from "./lib/lazyComReload";
import { QueryClientProvider } from "@tanstack/react-query";
import "./index.css";
import "./styles/login.css";
import "./styles/pdv.css";
import { inicializarTema, C } from "./lib/theme";
import { instalarCaixaAlta } from "./lib/caixaAlta";
import { queryClient } from "./lib/queryClient";
import { inicializarSentry, SentryErrorBoundary, FallbackErro } from "./lib/sentry";
import { blindarDomContraTradutores } from "./lib/blindagemDom";
import IndicadorRede from "./components/IndicadorRede";
// PWA: atualizacao silenciosa ADIADA — a versao nova baixa e fica esperando;
// o vigia aplica sozinho no primeiro momento seguro (sem modal aberto, sem
// campo em edicao, usuario ocioso). Sem banner e sem decisao do usuario.
import { iniciarAtualizacaoSegura } from "./lib/atualizacaoSegura";

// Blindagem contra tradutores/extensoes que mutam o DOM e quebram o React
// (NotFoundError em removeChild/insertBefore). Antes de qualquer render.
blindarDomContraTradutores();

// App da atendente: a rota ?mobile=pdv-volante tem identidade PWA PROPRIA
// (manifest com id/start_url na propria rota) — o Chrome instala um app
// "PDV Volante" separado do sistema principal, que abre direto nos pedidos.
// A troca do <link rel=manifest> precisa acontecer no boot, antes de o
// navegador avaliar a instalabilidade da pagina.
try {
  if (new URLSearchParams(window.location.search).get("mobile") === "pdv-volante") {
    document.querySelector('link[rel="manifest"]')?.setAttribute("href", "/manifest-volante.webmanifest");
  }
} catch { /* sem manifest proprio, instala como o app principal */ }

iniciarAtualizacaoSegura();

// Monitoramento de erros: roda antes do render para capturar falhas de
// inicializacao. No-op sem VITE_SENTRY_DSN (dev/build de teste).
inicializarSentry();

// Lazy split entre os 2 apps. Como o roteamento e decidido sincronicamente
// pelo path, so um dos chunks e baixado no carregamento inicial.
const App = lazyComReload(() => import("./App"));
const AdminMasterApp = lazyComReload(() => import("./AdminMasterApp"));
// Tela do Cliente (CFD): janela standalone aberta no 2o monitor.
const CustomerDisplayWindow = lazyComReload(() => import("./CustomerDisplayWindow"));

// Hidrata o tema ANTES do render para evitar flash do tema padrao.
inicializarTema();

// Padronizacao: toda digitacao vira CAIXA ALTA (com excecoes de email/senha/
// tokens — ver lib/caixaAlta.ts). Instalado uma unica vez, vale p/ o app todo.
instalarCaixaAlta();

// ETAPA 10 multi-tenant: roteamento path-based ENTRE 2 apps separados.
// Quando a URL contem /admin-master, carregamos a UI exclusiva do
// desenvolvedor do sistema (login proprio + lista de empresas). O resto
// (qualquer outro path) carrega o app normal.
const isAdminMaster = window.location.pathname.startsWith("/admin-master");
// Tela do Cliente: rota dedicada, renderizada SEM a casca do app (sem
// IndicadorRede) — o monitor do cliente fica limpo/fullscreen.
const isClienteDisplay = window.location.pathname.startsWith("/cliente");

const root = document.getElementById("root");
if (!root) throw new Error("Elemento #root nao encontrado no DOM");

function TelaCarregando() {
  return (
    <div style={{
      background: C.bg, minHeight: "100vh", display: "flex",
      alignItems: "center", justifyContent: "center",
      color: C.muted, fontFamily: "'Segoe UI', sans-serif",
    }}>
      Carregando...
    </div>
  );
}

createRoot(root).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <SentryErrorBoundary fallback={<FallbackErro />}>
        {isClienteDisplay ? (
          <Suspense fallback={<TelaCarregando />}>
            <CustomerDisplayWindow />
          </Suspense>
        ) : (
          <>
            <IndicadorRede />
            <Suspense fallback={<TelaCarregando />}>
              {isAdminMaster ? <AdminMasterApp /> : <App />}
            </Suspense>
          </>
        )}
      </SentryErrorBoundary>
    </QueryClientProvider>
  </StrictMode>,
);