import type {Metadata, Viewport} from 'next';
import {Sora, Inter} from 'next/font/google';
import './globals.css';
import {getServerSession} from '@/features/auth/services/serverSession';
import {Providers} from './providers';

const sora = Sora({
  subsets: ['latin'],
  variable: '--font-sora',
  display: 'swap',
});

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
});

/**
 * Icons and the web manifest are NOT declared here. They come from the app-dir
 * file conventions — favicon.ico, icon.png, apple-icon.png and manifest.ts,
 * all siblings of this file — which Next hashes and emits the <link> tags for.
 * Adding an `icons` key would shadow those with unversioned paths.
 */
export const metadata: Metadata = {
  applicationName: 'Loyaly.ai Merchant OS',
  title: {
    default: 'Loyaly.ai Merchant OS',
    template: '%s · Loyaly.ai',
  },
  description:
    'Footfall, campaign and LYT redemption analytics for Loyaly merchants.',
  appleWebApp: {
    capable: true,
    title: 'Loyaly',
    // The mark sits on black in apple-icon.png; match it so the notch area
    // does not seam against the canvas when installed.
    statusBarStyle: 'black-translucent',
  },
};

export const viewport: Viewport = {
  colorScheme: 'dark',
  themeColor: '#000000',
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  /**
   * Resolved on the server so the client provider starts already knowing who
   * it is. Without the seed, every full page load would paint a guard spinner
   * while the browser asked `/api/auth/session` a question the server had
   * already answered in this very request.
   */
  const session = await getServerSession();

  return (
    // The theme attributes are server-rendered so the @scope rules in
    // loyaly.css match on the very first byte — no flash from stock defaults.
    <html
      lang="en"
      data-theme="dark"
      data-astryx-theme="loyaly"
      className={`${sora.variable} ${inter.variable}`}
      suppressHydrationWarning
    >
      <body>
        <Providers initialSession={session}>{children}</Providers>
      </body>
    </html>
  );
}
