'use client';

import { Card, CardContent } from '@/components/ui/card';
import { formatDecimal } from '@/lib/utils/format';
import { getAccountDisplayInfo, type SystemAccount } from '@/types/system-account';
import { getRegionDisplayName } from '@/lib/constants/region-codes';
import { Coins, Flame, ShoppingCart, Building2, Wallet, Landmark, Box } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

const iconMap = {
  coins: Coins,
  flame: Flame,
  'shopping-cart': ShoppingCart,
  building: Building2,
  wallet: Wallet,
  landmark: Landmark,
  box: Box,
};

interface AccountCardProps {
  account: SystemAccount;
}

export function AccountCard({ account }: AccountCardProps) {
  const displayInfo = getAccountDisplayInfo(account.accountType);
  const Icon = iconMap[displayInfo.icon] || Building2;

  // Use contributionBalance if available (synced), otherwise totalContribution (local)
  const balance = account.contributionBalance || account.totalContribution || '0';

  // 使用前端区域代码映射获取显示名称
  const displayName = account.regionCode
    ? getRegionDisplayName(account.regionCode, account.accountType)
    : (account.name || displayInfo.label);

  return (
    <Card className="hover:shadow-md transition-shadow">
      <CardContent className="p-6">
        <div className="flex items-start justify-between">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <p className="text-sm font-medium text-muted-foreground truncate">
                {displayName}
              </p>
              {account.source === 'synced' && (
                <Badge variant="outline" className="text-xs shrink-0">
                  已同步
                </Badge>
              )}
            </div>
            <p className="text-2xl font-bold font-mono mt-1">
              {formatDecimal(balance, 8)}
            </p>
            <p className="text-xs text-muted-foreground mt-2 line-clamp-2">
              {account.description || displayInfo.description}
            </p>
            {account.contributionNeverExpires && (
              <Badge variant="secondary" className="mt-2 text-xs">
                永不过期
              </Badge>
            )}
          </div>
          <div className={`p-3 rounded-lg ${displayInfo.bgColor} shrink-0 ml-4`}>
            <Icon className={`h-6 w-6 ${displayInfo.color}`} />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
