import { createRootRoute, Outlet } from "@tanstack/react-router";
import { AppSidebar } from "../components/AppSidebar";
import { SiteHeader } from "../components/SiteHeader";
import { PWAInstallPrompt, PWAUpdatePrompt } from "../components/PWAPrompts";
import { usePWA } from "../hooks/usePWA";
import { useVersionCheck } from "../hooks/useVersionCheck";
import { SidebarInset, SidebarProvider } from "../components/ui/sidebar";

function RootLayout() {
  const { updateAvailable, updateSW, forceReload } = usePWA();
  
  // Check for version mismatches and force reload if needed
  useVersionCheck(forceReload);

  const handlePWAInstall = () => {
    console.log("PWA installed successfully");
  };

  const handlePWAUpdate = async () => {
    try {
      await updateSW();
      console.log("PWA updated successfully");
    } catch (error) {
      console.error("Error updating PWA:", error);
    }
  };

  return (
    <SidebarProvider
      style={
        {
          "--sidebar-width": "16rem",
          "--header-height": "4rem",
        } as React.CSSProperties
      }
    >
      <AppSidebar />
      <SidebarInset>
        <SiteHeader />
        <main className="flex-1 p-6 min-w-0">
          <Outlet />
        </main>
      </SidebarInset>

      {/* PWA Prompts */}
      <PWAInstallPrompt onInstall={handlePWAInstall} />
      <PWAUpdatePrompt
        updateAvailable={updateAvailable}
        onUpdate={handlePWAUpdate}
      />
    </SidebarProvider>
  );
}

export const Route = createRootRoute({
  component: RootLayout,
});