import TokenLiquidityStack from '@/components/wallet/TokenLiquidityStack'
import type { FundedWalletTokenRow } from '@/utils/walletFundedTokenListing'
import {
  formatFundedRowBalanceUsd,
  formatFundedRowUnitPrice,
} from '@/utils/walletFundedTokenListing'

type WalletFundedTokenListingProps = {
  rows: FundedWalletTokenRow[]
  walletAddress?: string | null
  loading?: boolean
  error?: string | null
}

export default function WalletFundedTokenListing({
  rows,
  walletAddress,
  loading = false,
  error = null,
}: WalletFundedTokenListingProps) {
  const erc20Count = rows.filter((row) => row.kind === 'erc20').length
  const hasNative = rows.some((row) => row.kind === 'native')

  return (
    <div className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50/40 p-4 dark:border-emerald-900/50 dark:bg-emerald-950/20">
      <div className="text-sm font-semibold text-gray-900 dark:text-white">Funded Chain 138 holdings</div>
      <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Native ETH appears first with the canonical ETH logo. ERC-20 rows use explorer market-batch pricing (unit price,
        balance USD, cash pool liquidity). MetaMask may still show &quot;-&quot; for custom tokens until upstream price
        providers list Chain 138 assets.
      </p>

      {walletAddress ? (
        <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
          Wallet {walletAddress.slice(0, 6)}…{walletAddress.slice(-4)} · {hasNative ? 'ETH + ' : ''}
          {erc20Count} ERC-20{erc20Count === 1 ? '' : 's'} with balance
        </p>
      ) : null}

      {loading ? (
        <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">Loading on-chain balances and market prices…</p>
      ) : null}
      {error ? <p className="mt-3 text-sm text-red-700 dark:text-red-300">{error}</p> : null}

      {!loading && rows.length === 0 && !error ? (
        <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">
          No funded catalog tokens found yet. Connect MetaMask and refresh this list.
        </p>
      ) : null}

      {rows.length > 0 ? (
        <div className="mt-4 overflow-x-auto">
          <table className="min-w-full text-left text-sm">
            <thead>
              <tr className="border-b border-emerald-200/80 text-xs uppercase tracking-wide text-gray-500 dark:border-emerald-900/60 dark:text-gray-400">
                <th className="px-2 py-2 font-semibold">Token</th>
                <th className="px-2 py-2 font-semibold">Balance</th>
                <th className="px-2 py-2 font-semibold">Unit price</th>
                <th className="px-2 py-2 font-semibold">Balance USD</th>
                <th className="px-2 py-2 font-semibold">Cash &amp; reserve</th>
                <th className="px-2 py-2 font-semibold">MetaMask</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr
                  key={row.kind === 'native' ? 'native-eth' : row.address!}
                  className="border-b border-emerald-100/80 dark:border-emerald-900/40"
                >
                  <td className="px-2 py-3">
                    <div className="flex items-center gap-3">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={row.logoURI}
                        alt=""
                        width={32}
                        height={32}
                        className="h-8 w-8 rounded-full border border-gray-200 bg-white object-contain dark:border-gray-700"
                      />
                      <div>
                        <div className="font-semibold text-gray-900 dark:text-white">
                          {row.symbol}
                          {row.kind === 'native' ? (
                            <span className="ml-2 text-xs font-normal text-emerald-700 dark:text-emerald-300">
                              native
                            </span>
                          ) : null}
                        </div>
                        <div className="text-xs text-gray-500 dark:text-gray-400">{row.name}</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-2 py-3 font-medium text-gray-900 dark:text-white">{row.balanceLabel}</td>
                  <td className="px-2 py-3 text-gray-700 dark:text-gray-300">{formatFundedRowUnitPrice(row)}</td>
                  <td className="px-2 py-3 text-gray-700 dark:text-gray-300">{formatFundedRowBalanceUsd(row)}</td>
                  <td className="px-2 py-3 text-gray-700 dark:text-gray-300">
                    <TokenLiquidityStack market={row} />
                  </td>
                  <td className="px-2 py-3 text-xs text-gray-600 dark:text-gray-400">
                    {row.kind === 'native' ? 'Automatic on Chain 138' : 'EIP-747 add'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : null}
    </div>
  )
}
