import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";
import { PrivyProvider } from "@privy-io/react-auth";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { PrivyWagmiConnector } from '@privy-io/wagmi-connector';

import { mainnet, sepolia, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { infuraProvider } from 'wagmi/providers/infura';
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

// Configure chains and providers
const configureChainsConfig = configureChains(
  [mainnet, sepolia],
  [
    alchemyProvider({ apiKey: 'XrSV5mVhj-BIUnneNRm66ReQeuO19jJ-' }),
    infuraProvider({ apiKey: '25c9f1810f234c278a4f13736a897836' }),
    jsonRpcProvider({
      rpc: (chain) => {
        if (chain.id === mainnet.id) return { http: `https://mainnet.infura.io/v3/25c9f1810f234c278a4f13736a897836` };
        if (chain.id === sepolia.id) return { http: `https://sepolia.infura.io/v3/25c9f1810f234c278a4f13736a897836` };
        return null; // Replace with your fallback RPC if needed
      }
    })
  ]
);

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <link
          rel="preload"
          href="/fonts/AdelleSans-Regular.woff"
          as="font"
          crossOrigin=""
        />
        <link
          rel="preload"
          href="/fonts/AdelleSans-Regular.woff2"
          as="font"
          crossOrigin=""
        />
        <link
          rel="preload"
          href="/fonts/AdelleSans-Semibold.woff"
          as="font"
          crossOrigin=""
        />
        <link
          rel="preload"
          href="/fonts/AdelleSans-Semibold.woff2"
          as="font"
          crossOrigin=""
        />

        <link rel="icon" href="/favicons/favicon.ico" sizes="any" />
        <link rel="icon" href="/favicons/icon.svg" type="image/svg+xml" />
        <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
        <link rel="manifest" href="/favicons/manifest.json" />

        <title>Privy Auth Starter</title>
        <meta name="description" content="Privy Auth Starter" />
      </Head>
      <PrivyProvider
        appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || ""}
        config={{
          embeddedWallets: {
            createOnLogin: "all-users",
          },
        }}
      >
        <PrivyWagmiConnector wagmiChainsConfig={configureChainsConfig}>
          <Component {...pageProps} />
        </PrivyWagmiConnector>
      </PrivyProvider>
    </>
  );
}

export default MyApp;
