import "./global.css";

// Initialize fetch protection before any other imports
import "@/lib/fetch-protection";

// Debug: Check if JavaScript is running
console.log("App.tsx loaded successfully");

import { Toaster } from "@/components/ui/toaster";
import { createRoot } from "react-dom/client";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Index from "./pages/Index";
import NotFound from "./pages/NotFound";
import Terms from "./pages/Terms";
import Privacy from "./pages/Privacy";
import Cookies from "./pages/Cookies";
import Account from "./pages/Account";
import Orders from "./pages/Orders";
import OrderDetails from "./pages/OrderDetails";
import Support from "./pages/Support";
import AdminDashboard from "./pages/admin/Dashboard";
import AdminOrders from "./pages/admin/Orders";
import AdminPromoCode from "./pages/admin/PromoCode";
import AdminSettings from "./pages/admin/Settings";
import AdminUsers from "./pages/admin/Users";
import AdminAnalytics from "./pages/admin/Analytics";
import MakeAdmin from "./pages/admin/MakeAdmin";
import Payment from "./pages/Payment";
import { Layout } from "@/components/site/Layout";
import { NetworkErrorBanner } from "@/components/errors/NetworkErrorBanner";
import { NotificationPermission } from "@/components/notifications/NotificationPermission";
import { useEffect } from "react";
import { initAutoAnalyticsTracking } from "@/lib/auto-track";
import { AuthProvider } from "@/lib/auth-context";
import { initProductionSecurity } from "@/lib/security-utils";
import { useSEO } from "@/lib/seo-meta";

const queryClient = new QueryClient();

// SEO wrapper component that must be inside Router
const SEOWrapper = ({ children }: { children: React.ReactNode }) => {
  useSEO();
  return <>{children}</>;
};

const App = () => {
  useEffect(() => {
    try {
      initAutoAnalyticsTracking();
    } catch (error) {
      console.error("Analytics setup failed:", error);
    }

    try {
      const href = window.location.href;
      const url = new URL(href);
      const candidates = [
        url.searchParams.get("promocode"),
        url.searchParams.get("promo"),
        url.searchParams.get("code"),
      ];
      let promo = candidates.find(Boolean) as string | null;
      if (!promo) {
        const m = href.match(/(?:[?&#]|\/)promo(?:code)?=([^&#/]+)/i);
        if (m && m[1]) promo = decodeURIComponent(m[1].replace(/\+/g, " "));
      }
      if (promo) {
        sessionStorage.setItem("promo_pending", promo);
      }
    } catch (error) {
      console.error("Promo processing failed:", error);
    }

    try {
      if ("serviceWorker" in navigator && (import.meta as any).env?.PROD) {
        const v =
          typeof __BUILD_TIME__ !== "undefined"
            ? __BUILD_TIME__
            : Date.now().toString();
        navigator.serviceWorker
          .register(`/service-worker.js?v=${encodeURIComponent(v)}`)
          .catch(() => {});
      }
    } catch (error) {
      console.error("Service worker setup failed:", error);
    }

    // Initialize production security measures
    if (import.meta.env.PROD) {
      // Add production-mode class to body
      document.body.classList.add("production-mode");

      // Initialize comprehensive security utilities
      // Disabled to allow right-click and console logs in production
      // initProductionSecurity();

      // Show initial warning (will be cleared by security utils)
      console.log(
        "%c⚠️ STOP!",
        "color: red; font-size: 50px; font-weight: bold;",
      );
      console.log(
        "%cThis is a browser feature intended for developers. Content is protected by copyright.",
        "color: red; font-size: 16px;",
      );
      console.log(
        "%cIf someone told you to copy and paste something here, it is likely a scam.",
        "color: #333; font-size: 14px;",
      );
    }
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <AuthProvider>
          <Toaster />
          <Sonner />
          <NetworkErrorBanner />
          <NotificationPermission />
          <BrowserRouter>
            <SEOWrapper>
              <Routes>
                {/* Admin Routes - Outside main layout */}
                <Route path="/admin" element={<AdminDashboard />} />
                <Route path="/admin/orders" element={<AdminOrders />} />
                <Route path="/admin/promos" element={<AdminPromoCode />} />
                <Route path="/admin/settings" element={<AdminSettings />} />
                <Route path="/admin/users" element={<AdminUsers />} />
                <Route path="/admin/analytics" element={<AdminAnalytics />} />
                <Route path="/admin/make-admin" element={<MakeAdmin />} />

                {/* Main Site Routes - With main layout */}
                <Route element={<Layout />}>
                  <Route path="/" element={<Index />} />
                  <Route path="/account" element={<Account />} />
                  <Route path="/orders" element={<Orders />} />
                  <Route path="/orders/:orderId" element={<OrderDetails />} />
                  <Route path="/payment/:orderId?" element={<Payment />} />
                  <Route path="/support" element={<Support />} />
                  <Route path="/terms" element={<Terms />} />
                  <Route path="/privacy" element={<Privacy />} />
                  <Route path="/cookies" element={<Cookies />} />
                  <Route path="*" element={<NotFound />} />
                </Route>
              </Routes>
            </SEOWrapper>
          </BrowserRouter>
        </AuthProvider>
      </TooltipProvider>
    </QueryClientProvider>
  );
};

try {
  const container = document.getElementById("root");

  if (!container) {
    console.error("❌ CRITICAL: Root element not found!");
    document.body.innerHTML =
      "<h1>Error: Application failed to load. Root element missing.</h1>";
    throw new Error("Root element not found");
  }

  // Reuse existing root in dev/HMR to avoid duplicate createRoot warnings
  const existingRoot = (window as any).__app_root__;
  const root = existingRoot ?? createRoot(container);
  (window as any).__app_root__ = root;

  console.log("🚀 Rendering React App...");
  root.render(<App />);
  console.log("✅ React App rendered successfully");
} catch (error) {
  console.error("❌ Failed to initialize app:", error);
  const errorDiv = document.createElement("div");
  errorDiv.style.cssText =
    "padding: 20px; background: #fee; color: #c00; font-family: monospace;";
  errorDiv.innerHTML = `
    <h1>Application Failed to Load</h1>
    <p>Error: ${error instanceof Error ? error.message : String(error)}</p>
    <p>Please check the browser console for more details.</p>
  `;
  document.body.appendChild(errorDiv);
}