import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import '@rainbow-me/rainbowkit/styles.css';
import './index.css';

import { 
  RainbowKitProvider, 
  darkTheme,
  connectorsForWallets 
} from '@rainbow-me/rainbowkit';
import {
  metaMaskWallet,
  coinbaseWallet,
  walletConnectWallet,
  rainbowWallet,
  trustWallet,
  phantomWallet,
  rabbyWallet,
  zerionWallet,
  ledgerWallet,
  argentWallet,
  safeWallet,
  okxWallet,
  braveWallet,
  uniswapWallet,
} from '@rainbow-me/rainbowkit/wallets';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { base } from 'wagmi/chains';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

// WalletConnect Project ID from cloud.reown.com
const WALLETCONNECT_PROJECT_ID = 'f88126ff124b2a2587e2f6d04b9abce9';

// Configure wallet connectors - All 12 wallets in priority order
const connectors = connectorsForWallets(
  [
    {
      groupName: 'Connect Wallet',
      wallets: [
        // TOP 4 - Most Popular (mobile + desktop)
        rainbowWallet,
        walletConnectWallet,
        metaMaskWallet,
        coinbaseWallet,
        // MOBILE-FRIENDLY OPTIONS
        phantomWallet,
        rabbyWallet,
        trustWallet,
        zerionWallet,
        braveWallet,
        uniswapWallet,
        okxWallet,
        argentWallet,
        // DESKTOP-ONLY (won't show on mobile, that's OK)
        ledgerWallet,
        safeWallet,
      ],
    },
  ],
  {
    appName: 'Bored Agent Yacht Club',
    projectId: WALLETCONNECT_PROJECT_ID,
  }
);

// Wagmi configuration with explicit transports
const config = createConfig({
  connectors,
  chains: [base],
  transports: {
    [base.id]: http(),
  },
  ssr: false,
});

// QueryClient - NO auto-polling to prevent constant re-renders
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      refetchOnReconnect: false,
      retry: false,
      staleTime: Infinity,
    },
  },
});

// Custom RainbowKit theme
const customTheme = darkTheme({
  accentColor: '#00FFFF',
  accentColorForeground: '#000000',
  borderRadius: 'medium',
  fontStack: 'system',
  overlayBlur: 'small',
});

customTheme.colors.modalBackground = '#000000';
customTheme.colors.modalBorder = '#00FFFF';
customTheme.colors.modalText = '#00FFFF';
customTheme.colors.modalTextSecondary = '#00AAAA';
customTheme.fonts.body = '"Courier New", monospace';

// NO StrictMode - causes double renders
ReactDOM.createRoot(document.getElementById('root')).render(
  <WagmiProvider config={config}>
    <QueryClientProvider client={queryClient}>
      <RainbowKitProvider 
        theme={customTheme}
        initialChain={base}
      >
        <App />
      </RainbowKitProvider>
    </QueryClientProvider>
  </WagmiProvider>
);