import "./globals.css";
import "swiper/swiper-bundle.css";
import "simplebar-react/dist/simplebar.min.css";
import { Metadata, Viewport } from "next";

import { ThemeProvider } from "@/context/ThemeContext";
import { NavigationProvider } from "@/context/NavigationContext";
import { AuthProvider } from "@/context/AuthContext";
import { OrganizationProvider } from "@/context/OrganizationContext";
import { Toaster } from "react-hot-toast";
import { buildCssVarsFromBranding } from "@/lib/branding";
import { PageLoadingIndicator } from "@/components/common/PageLoadingIndicator";
import { resolveOrganization } from "@/lib/organization.server";
import { resolveTenantBranding } from "@/lib/tenantPresentation.server";
import { PWAInstaller } from "@/components/common/PWAInstaller";

export async function generateMetadata(): Promise<Metadata> {
  const branding = await resolveTenantBranding();
  const fallbackTitle = "Tiar";
  const fallbackDescription = "Tiar";
  const fallbackIcon = "/images/favicon.ico";

  const displayName = branding.displayName || fallbackTitle;
  const title = `${displayName} - Charging App`;
  const description = displayName ? `${displayName} - Charging App` : fallbackDescription;
  const iconPath = branding.logoUrl || fallbackIcon;

  return {
    title,
    description,
    icons: {
      icon: iconPath,
      apple: iconPath,
    },
    manifest: "/api/manifest",
    appleWebApp: {
      capable: true,
      statusBarStyle: 'default',
      title: title,
    },
  };
}

export async function generateViewport(): Promise<Viewport> {
  const branding = await resolveTenantBranding();
  const fallbackThemeColor = "#0f172a";
  const themeColor = branding.primaryColor || fallbackThemeColor;

  return {
    themeColor,
  };
}

export const revalidate = 3600;

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const { organization, notFound } = await resolveOrganization();
  if (notFound) {
    return (
      <html lang="en" suppressHydrationWarning>
        <body className="font-outfit dark:bg-gray-900">
          <div className="min-h-screen flex items-center justify-center">
            <h1 className="text-3xl font-bold">Organization Not Found</h1>
          </div>
        </body>
      </html>
    );
  }
  const branding = await resolveTenantBranding();
  const cssVars = `:root{${buildCssVarsFromBranding(branding)}}`;
  const themeMode = branding.themeTokens?.mode === "dark" ? "dark" : "light";
  return (
    <html
      lang="en"
      data-tenant-branding="true"
      data-tenant-theme-mode={themeMode}
      suppressHydrationWarning
    >
      <head>
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <link rel="manifest" href="/api/manifest?v=3" crossOrigin="use-credentials" />
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                try {
                  var theme = localStorage.getItem('theme');
                  var tenantTheme = document.documentElement.dataset.tenantThemeMode;
                  var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                  var isDark = theme === 'dark' || (!theme && (tenantTheme === 'dark' || (!tenantTheme && prefersDark)));
                  if (isDark) {
                    document.documentElement.classList.add('dark');
                  } else {
                    document.documentElement.classList.remove('dark');
                  }
                } catch (e) {}
              })();
            `,
          }}
        />
        <style
          id="dynamic-branding"
          dangerouslySetInnerHTML={{ __html: cssVars }}
        />
      </head>
      <body>
        <PWAInstaller />

        <span
          id="dynamic-branding-logo"
          data-logo={branding.logoUrl || ""}
          hidden
        />
        <ThemeProvider>
          <Toaster
            position="top-center"
            reverseOrder={false}
            containerStyle={{ zIndex: 2147483647 }}
            toastOptions={{
              className: "bg-gray-800 text-white font-normal",
              style: {
                fontSize: "16px",
              },
            }}
          />
          <OrganizationProvider initialOrganization={organization}>
            <AuthProvider>
              <NavigationProvider>
                {/* Global page loading indicator */}
                <PageLoadingIndicator />
                {children}
              </NavigationProvider>
            </AuthProvider>
          </OrganizationProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}
