import "../styles/globals.css"
import "@rainbow-me/rainbowkit/styles.css"

import Head from "next/head"
import { useEffect, useState } from "react"
import { useRouter } from "next/router"
import { WagmiProvider } from "wagmi"
import type { AppProps } from "next/app"
import { darkTheme, RainbowKitProvider } from "@rainbow-me/rainbowkit"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"

import { ToastContainer } from "@/components/shared/components"
import { ThemeProviderContext } from "@/providers/themeProvider"
import { baseWagmiConfig, swellWagmiConfig } from "../wagmi"
import PosthogProvider from "@/providers/PosthogProvider"
import { PAGES } from "@/components/shared/constants"

const client = new QueryClient()

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter()
  const FAVICON_URL = "/favicon.png"
  const THEME_COLOR = "#000000"
  const BRAHMA_LOGO_URL = "/brahma-logo.png"
  const BRAHMA_LOGO_192_URL = "/brahma-logo-192x192.png"

  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    setIsMounted(true)
  }, [])

  if (!isMounted) return null // Prevents layout shift

  // const URL = "https://earn.brahma.fi"

  // if (typeof window !== "undefined" && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
  //   // checks that we are client-side
  //   posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
  //     api_host: `${URL}/ingest`,
  //     persistence_name: ".brahma.fi", // Enables cross-subdomain tracking
  //     persistence: "cookie", // Ensures tracking is consistent across pages
  //     person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
  //     xhr_headers: {
  //       "Access-Control-Allow-Origin": "https://eu.i.posthog.com",
  //       "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
  //       "Access-Control-Allow-Headers": "Content-Type",
  //     },
  //     loaded: (posthog) => {
  //       if (process.env.NODE_ENV === "development") posthog.debug() // debug mode in development
  //     },
  //   })
  // }

  const wagmiConfig =
    router.pathname === "/" ||
    router.pathname.startsWith(PAGES.MORPHO_OPTIMIZER) ||
    router.pathname.startsWith(PAGES.SURGE_PURGE)
      ? baseWagmiConfig
      : swellWagmiConfig

  return (
    <>
      <Head>
        <meta name="theme-color" content={THEME_COLOR} />
        <link rel="shortcut icon" href={FAVICON_URL} />
        {/* Icons */}
        <link rel="mask-icon" href={BRAHMA_LOGO_URL} color="#5bbad5" />
        <link rel="apple-touch-icon" sizes="1024x1024" href={BRAHMA_LOGO_URL} />
        <link rel="apple-touch-icon" href={BRAHMA_LOGO_URL} />
        <link
          rel="apple-touch-icon"
          sizes="192x192"
          href={BRAHMA_LOGO_192_URL}
        />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href={BRAHMA_LOGO_192_URL}
        />
        <link
          rel="apple-touch-icon"
          sizes="167x167"
          href={BRAHMA_LOGO_192_URL}
        />
      </Head>
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={client}>
          <RainbowKitProvider theme={darkTheme()}>
            <PosthogProvider>
              <ThemeProviderContext>
                <div className="fade-in">
                  <ToastContainer />
                  <Component {...pageProps} />
                </div>
              </ThemeProviderContext>
            </PosthogProvider>
          </RainbowKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    </>
  )
}

export default MyApp
