import {
  HeadContent,
  Link,
  Scripts,
  createRootRoute,
} from '@tanstack/react-router'

import { BasketLink } from '#/components/basket/BasketLink.tsx'
import { Footer } from '#/components/ui/Footer.tsx'
import { Logo } from '#/components/ui/Logo.tsx'
import { NotFound } from '#/components/ui/NotFound.tsx'
import BetterAuthHeader from '#/integrations/better-auth/header-user.tsx'
import { BasketProvider } from '#/lib/basket.tsx'
import { getBrand } from '#/server/brand.ts'

import '../styles/globals.scss'
import styles from './__root.module.scss'

const RootDocument = ({ children }: { children: React.ReactNode }) => {
  const { brand } = Route.useLoaderData()

  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <BasketProvider>
          <div
            className={styles.topBar}
            style={{ viewTransitionName: 'site-header' }}
          >
            <Link to="/" className={styles.brand}>
              <Logo name={brand.name} />
            </Link>
            <div className={styles.actions}>
              <BasketLink />
              <BetterAuthHeader />
            </div>
          </div>
          <div className={styles.content}>{children}</div>
          <Footer brandName={brand.name} />
        </BasketProvider>
        <Scripts />
      </body>
    </html>
  )
}

export const Route = createRootRoute({
  loader: async () => ({ brand: await getBrand() }),
  notFoundComponent: NotFound,
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'Ghost Kitchen',
      },
    ],
    links: [
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      {
        rel: 'preconnect',
        href: 'https://fonts.gstatic.com',
        crossOrigin: 'anonymous',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap',
      },
    ],
  }),
  shellComponent: RootDocument,
})