'use client';

import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet, sepolia, base, arbitrum } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { PropsWithChildren, useEffect, useState } from 'react';

const metadata = {
  name: 'MortgageFi',
  description: 'Decentralized Mortgage Lending Platform',
  url: 'https://mortgagefi.app',
  icons: ['https://mortgagefi.app/logo.png']
};

// Prefer custom RPCs to avoid public-provider rate limits (429)
const baseRpc = process.env.NEXT_PUBLIC_RPC_BASE;
const arbitrumRpc = process.env.NEXT_PUBLIC_RPC_ARBITRUM;

const config = createConfig({
  chains: [base, arbitrum, mainnet, sepolia],
  transports: {
    [base.id]: baseRpc ? http(baseRpc, { batch: true, retryCount: 2, retryDelay: 250 }) : http(undefined, { batch: true, retryCount: 2, retryDelay: 250 }),
    [arbitrum.id]: arbitrumRpc ? http(arbitrumRpc, { batch: true, retryCount: 2, retryDelay: 250 }) : http(undefined, { batch: true, retryCount: 2, retryDelay: 250 }),
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  ssr: true,
});

const queryClient = new QueryClient();

export function Web3Provider({ children }: PropsWithChildren) {
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {mounted && children}
      </QueryClientProvider>
    </WagmiProvider>
  );
}