import type { AppProps } from 'next/app';
import Head from 'next/head';
import Script from 'next/script';
import Layout from '../components/Layout';
import { CartProvider } from '../context/CartContext';
import { CheckoutProvider } from '../context/CheckoutContext';
import { Toaster } from 'react-hot-toast';
import { SessionProvider } from 'next-auth/react';
import '../styles/globals.css';

export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  const GA_ID = process.env.NEXT_PUBLIC_GA_ID;

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=5, user-scalable=yes" />
      </Head>

      {GA_ID && (
        <>
          <Script
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
            strategy="afterInteractive"
          />
          <Script id="google-analytics" strategy="afterInteractive">
            {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${GA_ID}');
            `}
          </Script>
        </>
      )}

      <SessionProvider session={session}>
        <CartProvider>
          <CheckoutProvider>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </CheckoutProvider>
        </CartProvider>
      </SessionProvider>
      <Toaster
        position="top-right"
        reverseOrder={false}
        gutter={10}
        containerClassName="!top-20 sm:!top-24 !right-3 sm:!right-6 !z-[80]"
        toastOptions={{
          duration: 3200,
          style: {
            background: '#0a0a0a',
            color: '#f5f5f5',
            borderRadius: '12px',
            border: '1px solid #DDA20D',
            padding: '12px 16px',
            fontSize: '14px',
            boxShadow: '0 12px 40px rgba(0,0,0,0.45)',
          },
          success: {
            duration: 3200,
            iconTheme: {
              primary: '#DDA20D',
              secondary: '#0a0a0a',
            },
          },
          error: {
            duration: 4000,
            iconTheme: {
              primary: '#ef4444',
              secondary: '#0a0a0a',
            },
          },
        }}
      />
    </>
  );
}
