import React from 'react';
import type { Metadata, Viewport } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import './globals.css';
import { getAppMode } from '@/lib/mode';
import { AlphaNav } from '@/components/alpha/AlphaNav';
import AlphaBanner from '@/components/alpha/AlphaBanner';
import AlphaFooter from '@/components/alpha/AlphaFooter';
import { AuthProvider } from '@/lib/auth/AuthContext';
import NotificationProvider from '@/components/notifications/NotificationProvider';
import DevToolbar from '@/components/dev/DevToolbar';
import { ServiceProvider } from '@/lib/services/ServiceProvider';

export const dynamic = 'force-dynamic';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  viewportFit: 'cover',
};

export const metadata: Metadata = {
  title: 'GridPilot - iRacing League Racing Platform',
  description: 'The dedicated home for serious iRacing leagues. Automatic results, standings, team racing, and professional race control.',
  themeColor: '#0a0a0a',
  appleWebApp: {
    capable: true,
    statusBarStyle: 'black-translucent',
  },
  openGraph: {
    title: 'GridPilot - iRacing League Racing Platform',
    description: 'Structure over chaos. The professional platform for iRacing league racing.',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'GridPilot - iRacing League Racing Platform',
    description: 'Structure over chaos. The professional platform for iRacing league racing.',
  },
  icons: {
    icon: '/favicon.svg',
  },
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const mode = getAppMode();
  
  if (mode === 'alpha') {
    //const session = await authService.getCurrentSession();
    const session = null;

    return (
      <html lang="en" className="scroll-smooth overflow-x-hidden">
        <head>
          <meta name="mobile-web-app-capable" content="yes" />
        </head>
        <body className="antialiased overflow-x-hidden min-h-screen bg-deep-graphite flex flex-col">
          <ServiceProvider>
            <AuthProvider initialSession={session}>
              <NotificationProvider>
                <AlphaNav />
                <AlphaBanner />
                <main className="flex-1 max-w-7xl mx-auto px-6 py-8 w-full">
                  {children}
                </main>
                <AlphaFooter />
                <DevToolbar />
              </NotificationProvider>
            </AuthProvider>
          </ServiceProvider>
        </body>
      </html>
    );
  }
  
  return (
    <html lang="en" className="scroll-smooth overflow-x-hidden">
      <head>
        <meta name="mobile-web-app-capable" content="yes" />
      </head>
      <body className="antialiased overflow-x-hidden">
        <header className="fixed top-0 left-0 right-0 z-50 bg-deep-graphite/80 backdrop-blur-sm border-b border-white/5">
          <div className="max-w-7xl mx-auto px-6 py-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <Link href="/" className="inline-flex items-center">
                  <Image
                    src="/images/logos/wordmark-rectangle-dark.svg"
                    alt="GridPilot"
                    width={160}
                    height={30}
                    className="h-6 w-auto md:h-8"
                    priority
                  />
                </Link>
                <p className="hidden sm:block text-sm text-gray-400 font-light">
                  Making league racing less chaotic
                </p>
              </div>
            </div>
          </div>
        </header>
        <div className="pt-16">
          {children}
        </div>
      </body>
    </html>
  );
}