'use client'

import {
  buildCoinbaseWalletDappUrl,
  buildMetaMaskMobileDappUrl,
  isMobileBrowser,
  isWalletInAppBrowser,
  MOBILE_WALLET_BUTTON_CLASS,
} from '@/utils/walletProviderEnv'

type MobileWalletContextBannerProps = {
  hasProvider: boolean
}

export default function MobileWalletContextBanner({ hasProvider }: MobileWalletContextBannerProps) {
  if (typeof window === 'undefined') return null
  if (!isMobileBrowser() || isWalletInAppBrowser()) return null

  const pageUrl = window.location.href
  const metamaskUrl = buildMetaMaskMobileDappUrl(pageUrl)
  const coinbaseUrl = buildCoinbaseWalletDappUrl(pageUrl)

  return (
    <div className="rounded-lg border border-sky-200 bg-sky-50/80 p-4 dark:border-sky-900/50 dark:bg-sky-950/30">
      <div className="text-sm font-semibold text-gray-900 dark:text-white">Mobile wallet browser</div>
      <p className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">
        {hasProvider
          ? 'You are in a mobile browser with a wallet provider. Add-chain and add-token buttons work best one or two tokens at a time — use Continue when prompted. If a prompt does not appear, unlock your wallet and stay on this tab.'
          : 'Mobile Safari/Chrome do not expose a wallet extension. Open this page inside MetaMask or Coinbase Wallet, or connect with WalletConnect above, then use the add-chain and add-token buttons.'}
      </p>
      {!hasProvider ? (
        <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:flex-wrap">
          <a
            href={metamaskUrl}
            className={`inline-flex items-center justify-center rounded-lg bg-orange-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-orange-700 ${MOBILE_WALLET_BUTTON_CLASS}`}
          >
            Open in MetaMask
          </a>
          <a
            href={coinbaseUrl}
            className={`inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 ${MOBILE_WALLET_BUTTON_CLASS}`}
          >
            Open in Coinbase Wallet
          </a>
        </div>
      ) : null}
    </div>
  )
}
