App.tsx

import "./global.css";

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 { AuthProvider } from "@/contexts/AuthContext";
import { ThemeProvider } from "next-themes";
import Index from "./pages/Index";
import NotFound from "./pages/NotFound";
import { useEffect } from "react";
import { GoogleOAuthProvider } from "@react-oauth/google";

// Capacitor imports
import { App as CapacitorApp } from "@capacitor/app";
import { StatusBar, Style } from "@capacitor/status-bar";
import { SplashScreen } from "@capacitor/splash-screen";
import { Keyboard } from "@capacitor/keyboard";
import ChangeModel from "./pages/ChangeModel";

// Extend Window interface for Capacitor
declare global {
  interface Window {
    Capacitor?: {
      isNativePlatform(): boolean;
    };
  }
}

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      staleTime: 5 * 60 * 1000, // 5 minutes
      refetchOnWindowFocus: false,
    },
  },
});

// Capacitor initialization hook
function useCapacitorInit() {
  useEffect(() => {
    const initCapacitor = async () => {
      try {
        // Hide splash screen after app loads
        await SplashScreen.hide();

        // Configure status bar
        if (window.Capacitor && window.Capacitor.isNativePlatform()) {
          await StatusBar.setStyle({ style: Style.Light });
          await StatusBar.setBackgroundColor({ color: "#78c896" });
        }

        // Handle keyboard events for better UX (only on native platforms)
        if (window.Capacitor && window.Capacitor.isNativePlatform()) {
          Keyboard.addListener("keyboardWillShow", () => {
            document.body.classList.add("keyboard-open");
          });

          Keyboard.addListener("keyboardWillHide", () => {
            document.body.classList.remove("keyboard-open");
          });
        }

        // Handle app state changes
        CapacitorApp.addListener("appStateChange", ({ isActive }) => {
          console.log("App state changed. Is active?", isActive);
        });

        // Handle back button on Android
        CapacitorApp.addListener("backButton", ({ canGoBack }) => {
          if (!canGoBack) {
            CapacitorApp.exitApp();
          } else {
            window.history.back();
          }
        });
      } catch (error) {
        console.log("Capacitor initialization error:", error);
      }
    };

    initCapacitor();
  }, []);
}

const App = () => {
  useCapacitorInit();

  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}>
            <TooltipProvider>
              <div className="mobile-app safe-area-all">
                <Toaster />
                <Sonner />
                <BrowserRouter>
                  <Routes>
                    <Route path="/" element={<Index />} />
                    <Route path="select" element={<ChangeModel />} />
                    {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
                    <Route path="*" element={<NotFound />} />
                  </Routes>
                </BrowserRouter>
              </div>
            </TooltipProvider>
          </GoogleOAuthProvider>
        </AuthProvider>
      </QueryClientProvider>
    </ThemeProvider>
  );
};

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