import { createRootRoute, HeadContent, Outlet, Scripts } from "@tanstack/react-router";
import { Toaster } from "sonner";
import { PreviewHostBridge } from "@/components/preview-host-bridge";
import { MediaProvider, themeVars } from "@/components/site/look";
import { getPreferredLocale, getSiteLook } from "@/lib/clinic/api";
import { isRtl } from "@/lib/clinic/locale";
import { AuthProvider } from "@/lib/auth/provider";
import { I18nProvider } from "@/lib/i18n/context";
import appCss from "../styles.css?url";

export const Route = createRootRoute({
  loader: async () => {
    const locale = await getPreferredLocale();
    const look = await getSiteLook();
    return { locale, look };
  },
  head: () => ({
    meta: [
      { charSet: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { title: "Aurelia Medical Privé" },
      { name: "description", content: "Fictional private dermatology house. Demonstration only." },
      { name: "theme-color", content: "#183735" },
    ],
    links: [
      { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
      { rel: "stylesheet", href: appCss },
      { rel: "manifest", href: "/__grok/manifest.webmanifest" },
      { rel: "apple-touch-icon", href: "/__grok/icon-180.png" },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500&family=Noto+Sans+SC:wght@400;500&family=Vazirmatn:wght@400;500;600;700&display=swap",
      },
    ],
  }),
  component: Root,
});

function Root() {
  const { locale, look } = Route.useLoaderData();
  return (
    <html lang={locale} dir={isRtl(locale) ? "rtl" : "ltr"} className="antialiased" style={themeVars(look.theme)} suppressHydrationWarning>
      <head>
        <HeadContent />
        {look.fontUrl ? <style>{`@font-face{font-family:Doran;src:url("${look.fontUrl}") format("woff2");font-weight:100 900;font-display:swap}`}</style> : null}
      </head>
      <body>
        <PreviewHostBridge />
        <AuthProvider>
          <MediaProvider media={look.media}>
            <I18nProvider initial={locale} copy={look.copy}>
              <Outlet />
              <Toaster position="top-center" />
            </I18nProvider>
          </MediaProvider>
        </AuthProvider>
        <Scripts />
      </body>
    </html>
  );
}