import type { Metadata, Viewport } from 'next';
import type { ReactNode } from 'react';

import { getBranding, brandingCssVariables } from '@/server/branding';

import './globals.css';

export async function generateMetadata(): Promise<Metadata> {
  const branding = await getBranding();

  return {
    title: {
      default: `i-Learned — ${branding.shortName}`,
      template: `%s · i-Learned`,
    },
    description:
      'Integrated School Management System — admissions, enrollment, academic records and student services.',
    // The prototype must never be indexed: it serves records that, in a real
    // deployment, would be personal data.
    robots: { index: false, follow: false },
    applicationName: 'i-Learned',
  };
}

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  themeColor: '#0F5257',
};

export default async function RootLayout({
  children,
}: {
  children: ReactNode;
}): Promise<React.JSX.Element> {
  const branding = await getBranding();

  return (
    <html
      lang="en-PH"
      // Brand tokens are injected here rather than compiled into the
      // stylesheet, which is what makes /admin/branding take effect without a
      // rebuild.
      style={brandingCssVariables(branding) as React.CSSProperties}
      suppressHydrationWarning
    >
      <body className="min-h-dvh antialiased">
        <a href="#main-content" className="skip-link">
          Skip to main content
        </a>
        {children}
      </body>
    </html>
  );
}
