'use client';

import type { Metadata } from 'next';
import NextError from 'next/error';
import { Geist, Geist_Mono } from 'next/font/google';
import '@/styles/globals.css';
import {
  ConvexClientProvider,
  ThemeProvider,
  TVModeProvider,
} from '@/components/providers';
import * as Sentry from '@sentry/nextjs';
import { generateMetadata } from '@/lib/metadata';
import PlausibleProvider from 'next-plausible';
import Header from '@/components/layout/header';
import { useEffect } from 'react';
import { Button, Toaster } from '@/components/ui';

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
});
const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
});
const metadata: Metadata = generateMetadata();
metadata.title = `Error | Tech Tracker`;
export { metadata };

type GlobalErrorProps = {
  error: Error & { digest?: string };
  reset?: () => void;
};

const GlobalError = ({ error, reset = undefined }: GlobalErrorProps) => {
  useEffect(() => {
    Sentry.captureException(error);
  }, [error]);
  return (
    <PlausibleProvider
      domain='techtracker.gbrown.org'
      customDomain='https://plausible.gbrown.org'
    >
      <html lang='en' suppressHydrationWarning>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          <ThemeProvider
            attribute='class'
            defaultTheme='system'
            enableSystem
            disableTransitionOnChange
          >
            <ConvexClientProvider>
              <TVModeProvider>
                <Header />
                <main className='min-h-[90vh] flex flex-col items-center'>
                  <NextError statusCode={0} />
                  {reset !== undefined && (
                    <Button onClick={() => reset()}>Try Again</Button>
                  )}
                  <Toaster />
                </main>
              </TVModeProvider>
            </ConvexClientProvider>
          </ThemeProvider>
        </body>
      </html>
    </PlausibleProvider>
  );
};
export default GlobalError;
