/**
 * Thirdweb Wallets (v5) integration demo.
 * Shows ConnectButton with in-app wallet (email, social, passkey) + external wallets.
 * See: https://portal.thirdweb.com/wallets, docs/04-configuration/THIRDWEB_WALLETS_INTEGRATION.md
 */
import { createThirdwebClient, defineChain } from 'thirdweb'
import { ThirdwebProvider, ConnectButton, useActiveAccount, useWalletBalance } from 'thirdweb/react'
import { inAppWallet } from 'thirdweb/wallets'
import {
  defaultFrontendChain,
  defaultFrontendChainId,
  defaultFrontendExplorerUrl,
  chainRpcUrls,
} from '../config/networks'

const clientId = import.meta.env.VITE_THIRDWEB_CLIENT_ID || '542981292d51ec610388ba8985f027d7'
const client = createThirdwebClient({ clientId })
const defaultThirdwebChain = defineChain({
  id: defaultFrontendChain.id,
  name: defaultFrontendChain.name,
  rpc: chainRpcUrls[defaultFrontendChainId] || defaultFrontendExplorerUrl,
  nativeCurrency: {
    name: defaultFrontendChain.nativeCurrency.name,
    symbol: defaultFrontendChain.nativeCurrency.symbol,
    decimals: defaultFrontendChain.nativeCurrency.decimals,
  },
})

const wallets = [
  inAppWallet({
    auth: {
      options: ['email', 'google', 'apple', 'passkey'],
    },
    metadata: {
      name: 'DBIS Bridge',
      image: {
        src: `${defaultFrontendExplorerUrl}/favicon.ico`,
        width: 32,
        height: 32,
      },
    },
  }),
]

function WalletsDemoContent() {
  const account = useActiveAccount()
  const { data: balance, isLoading: balanceLoading } = useWalletBalance({
    client,
    chain: defaultThirdwebChain,
    address: account?.address,
  })

  return (
    <div className="max-w-2xl mx-auto p-6 space-y-8">
      <div>
        <h1 className="text-2xl font-bold text-white mb-2">Thirdweb Wallets</h1>
        <p className="text-[#A0A0A0] text-sm">
          Connect with email, Google, Apple, passkey, or an external wallet (MetaMask, WalletConnect, etc.) on {defaultFrontendChain.name}.
        </p>
      </div>

      <div className="flex flex-col items-center gap-6 p-6 bg-[#252830] rounded-xl border border-white/10">
        <ConnectButton
          client={client}
          chain={defaultThirdwebChain}
          wallets={wallets}
          theme="dark"
          connectButton={{
            label: 'Connect wallet',
            style: {
              backgroundColor: '#0d9488',
              color: 'white',
              borderRadius: '0.75rem',
              padding: '0.75rem 1.5rem',
            },
          }}
        />
        {account && (
          <div className="w-full space-y-2 text-sm">
            <p className="text-[#A0A0A0]">
              Address: <span className="font-mono text-white">{account.address}</span>
            </p>
            {balanceLoading ? (
              <p className="text-[#A0A0A0]">Loading balance…</p>
            ) : balance ? (
              <p className="text-[#A0A0A0]">
                Balance ({defaultFrontendChain.name}):{' '}
                <span className="text-white">
                  {balance.displayValue} {balance.symbol}
                </span>
              </p>
            ) : null}
          </div>
        )}
      </div>

      <div className="text-sm text-[#A0A0A0] space-y-2">
        <p>
          This page uses thirdweb SDK v5 and the{' '}
          <a
            href="https://portal.thirdweb.com/wallets"
            target="_blank"
            rel="noopener noreferrer"
            className="text-teal-400 hover:underline"
          >
            thirdweb Wallets
          </a>{' '}
          flow. The main Bridge still uses the existing connect (wagmi + external wallets). Full app
          integration is documented in <code className="text-white/80">docs/04-configuration/THIRDWEB_WALLETS_INTEGRATION.md</code>.
        </p>
      </div>
    </div>
  )
}

export default function WalletsDemoPage() {
  return (
    <ThirdwebProvider>
      <WalletsDemoContent />
    </ThirdwebProvider>
  )
}
