import type { Metadata } from 'next';
import '@/styles/globals.css';
import { Geist } from 'next/font/google';
import { cn } from '@/lib/utils';
import { ThemeProvider } from '@/components/context/theme';
import { AuthProvider } from '@/components/context/auth';
import Navigation from '@/components/default/navigation';
import Footer from '@/components/default/footer';
import { Toaster } from '@/components/ui';
import * as Sentry from '@sentry/nextjs';

export const generateMetadata = (): Metadata => {
  return {
    title: {
      template: '%s | T3 Template',
      default: 'T3 Template with Supabase',
    },
    description: 'Created by Gib with T3!',
    applicationName: 'T3 Template',
    keywords:
      'T3 Template, Next.js, Supabase, Tailwind, TypeScript, React, T3, Gib, Theo',
    authors: [{ name: 'Gib', url: 'https://gbrown.org' }],
    creator: 'Gib Brown',
    publisher: 'Gib Brown',
    formatDetection: {
      email: false,
      address: false,
      telephone: false,
    },
    robots: {
      index: true,
      follow: true,
      nocache: false,
      googleBot: {
        index: true,
        follow: true,
        noimageindex: false,
        'max-video-preview': -1,
        'max-image-preview': 'large',
        'max-snippet': -1,
      },
    },
    icons: {
      icon: [
        { url: '/favicon.ico', type: 'image/x-icon', sizes: 'any' },
        { url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16' },
        { url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32' },
        { url: '/favicon.png', type: 'image/png', sizes: '96x96' },
        {
          url: '/favicon.ico',
          type: 'image/x-icon',
          sizes: 'any',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/favicon-16x16.png',
          type: 'image/png',
          sizes: '16x16',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/favicon-32x32.png',
          type: 'image/png',
          sizes: '32x32',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/favicon-96x96.png',
          type: 'image/png',
          sizes: '96x96',
          media: '(prefers-color-scheme: dark)',
        },

        { url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36' },
        { url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48' },
        { url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
        { url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96' },
        {
          url: '/appicon/icon-144x144.png',
          type: 'image/png',
          sizes: '144x144',
        },
        { url: '/appicon/icon.png', type: 'image/png', sizes: '192x192' },
        {
          url: '/appicon/icon-36x36.png',
          type: 'image/png',
          sizes: '36x36',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon-48x48.png',
          type: 'image/png',
          sizes: '48x48',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon-72x72.png',
          type: 'image/png',
          sizes: '72x72',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon-96x96.png',
          type: 'image/png',
          sizes: '96x96',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon-144x144.png',
          type: 'image/png',
          sizes: '144x144',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon.png',
          type: 'image/png',
          sizes: '192x192',
          media: '(prefers-color-scheme: dark)',
        },
      ],
      shortcut: [
        { url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36' },
        { url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48' },
        { url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
        { url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96' },
        {
          url: '/appicon/icon-144x144.png',
          type: 'image/png',
          sizes: '144x144',
        },
        { url: '/appicon/icon.png', type: 'image/png', sizes: '192x192' },
        {
          url: '/appicon/icon-36x36.png',
          type: 'image/png',
          sizes: '36x36',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon-48x48.png',
          type: 'image/png',
          sizes: '48x48',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon-72x72.png',
          type: 'image/png',
          sizes: '72x72',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon-96x96.png',
          type: 'image/png',
          sizes: '96x96',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon-144x144.png',
          type: 'image/png',
          sizes: '144x144',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: '/appicon/icon.png',
          type: 'image/png',
          sizes: '192x192',
          media: '(prefers-color-scheme: dark)',
        },
      ],
      apple: [
        { url: 'appicon/icon-57x57.png', type: 'image/png', sizes: '57x57' },
        { url: 'appicon/icon-60x60.png', type: 'image/png', sizes: '60x60' },
        { url: 'appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
        { url: 'appicon/icon-76x76.png', type: 'image/png', sizes: '76x76' },
        {
          url: 'appicon/icon-114x114.png',
          type: 'image/png',
          sizes: '114x114',
        },
        {
          url: 'appicon/icon-120x120.png',
          type: 'image/png',
          sizes: '120x120',
        },
        {
          url: 'appicon/icon-144x144.png',
          type: 'image/png',
          sizes: '144x144',
        },
        {
          url: 'appicon/icon-152x152.png',
          type: 'image/png',
          sizes: '152x152',
        },
        {
          url: 'appicon/icon-180x180.png',
          type: 'image/png',
          sizes: '180x180',
        },
        { url: 'appicon/icon.png', type: 'image/png', sizes: '192x192' },
        {
          url: 'appicon/icon-57x57.png',
          type: 'image/png',
          sizes: '57x57',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: 'appicon/icon-60x60.png',
          type: 'image/png',
          sizes: '60x60',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: 'appicon/icon-72x72.png',
          type: 'image/png',
          sizes: '72x72',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: 'appicon/icon-76x76.png',
          type: 'image/png',
          sizes: '76x76',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: 'appicon/icon-114x114.png',
          type: 'image/png',
          sizes: '114x114',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: 'appicon/icon-120x120.png',
          type: 'image/png',
          sizes: '120x120',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: 'appicon/icon-144x144.png',
          type: 'image/png',
          sizes: '144x144',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: 'appicon/icon-152x152.png',
          type: 'image/png',
          sizes: '152x152',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: 'appicon/icon-180x180.png',
          type: 'image/png',
          sizes: '180x180',
          media: '(prefers-color-scheme: dark)',
        },
        {
          url: 'appicon/icon.png',
          type: 'image/png',
          sizes: '192x192',
          media: '(prefers-color-scheme: dark)',
        },
      ],
      other: [
        {
          rel: 'apple-touch-icon-precomposed',
          url: '/appicon/icon-precomposed.png',
          type: 'image/png',
          sizes: '180x180',
        },
      ],
    },
    other: {
      ...Sentry.getTraceData(),
    },
    twitter: {
      card: 'app',
      title: 'T3 Template',
      description: 'Created by Gib with T3!',
      siteId: '',
      creator: '@cs_gib',
      creatorId: '',
      images: {
        url: 'https://git.gbrown.org/gib/T3-Template/raw/main/public/icons/apple/icon.png',
        alt: 'T3 Template',
      },
      app: {
        name: 'T3 Template',
        id: {
          iphone: '',
          ipad: '',
          googleplay: '',
        },
        url: {
          iphone: '',
          ipad: '',
          googleplay: '',
        },
      },
    },
    verification: {
      google: 'google',
      yandex: 'yandex',
      yahoo: 'yahoo',
    },
    itunes: {
      appId: '',
      appArgument: '',
    },
    appleWebApp: {
      title: 'T3 Template',
      statusBarStyle: 'black-translucent',
      startupImage: [
        '/icons/apple/splash-768x1004.png',
        {
          url: '/icons/apple/splash-1536x2008.png',
          media: '(device-width: 768px) and (device-height: 1024px)',
        },
      ],
    },
    appLinks: {
      ios: {
        url: 'https://t3-template.gbrown.org/ios',
        app_store_id: 't3_template',
      },
      android: {
        package: 'org.gbrown.android/t3-template',
        app_name: 'app_t3_template',
      },
      web: {
        url: 'https://t3-template.gbrown.org/web',
        should_fallback: true,
      },
    },
    facebook: {
      appId: '',
    },
    pinterest: {
      richPin: true,
    },
    category: 'technology',
  };
};

const geist = Geist({
  subsets: ['latin'],
  variable: '--font-geist-sans',
});

const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
  return (
    <html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
      <body
        className={cn('bg-background text-foreground font-sans antialiased')}
      >
        <ThemeProvider
          attribute='class'
          defaultTheme='system'
          enableSystem
          disableTransitionOnChange
        >
          <AuthProvider>
            <main className='min-h-screen flex flex-col items-center'>
              <div className='flex-1 w-full flex flex-col gap-20 items-center'>
                <Navigation />
                <div
                  className='flex flex-col gap-20 max-w-5xl
                    p-5 w-full items-center'
                >
                  {children}
                </div>
              </div>
              <Footer />
            </main>
            <Toaster />
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  );
};
export default RootLayout;