'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import { formatDecimal, formatNumber } from '@/lib/utils/format';
import type { SystemAccountsSummary } from '@/types/system-account';
import { Database, Coins, Activity, RefreshCcw } from 'lucide-react';

interface SummaryCardsProps {
  summary: SystemAccountsSummary | undefined;
  isLoading?: boolean;
}

export function SummaryCards({ summary, isLoading = false }: SummaryCardsProps) {
  if (isLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {[...Array(4)].map((_, i) => (
          <Card key={i}>
            <CardContent className="p-6">
              <Skeleton className="h-20 w-full" />
            </CardContent>
          </Card>
        ))}
      </div>
    );
  }

  if (!summary) {
    return null;
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {/* System Accounts Count */}
      <Card>
        <CardContent className="p-6">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-sm text-muted-foreground">本地账户</p>
              <p className="text-2xl font-bold mt-1">{summary.systemAccounts.count}</p>
              <p className="text-xs text-muted-foreground mt-2">
                总算力: {formatDecimal(summary.systemAccounts.totalContribution, 8)}
              </p>
            </div>
            <div className="p-3 rounded-lg bg-blue-50">
              <Database className="h-6 w-6 text-blue-600" />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Synced Contributions */}
      <Card>
        <CardContent className="p-6">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-sm text-muted-foreground">同步算力</p>
              <p className="text-2xl font-bold mt-1">{summary.syncedContributions.count}</p>
              <p className="text-xs text-muted-foreground mt-2">
                总余额: {formatDecimal(summary.syncedContributions.totalBalance, 8)}
              </p>
            </div>
            <div className="p-3 rounded-lg bg-green-50">
              <RefreshCcw className="h-6 w-6 text-green-600" />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Mining Config */}
      <Card>
        <CardContent className="p-6">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-sm text-muted-foreground flex items-center gap-2">
                挖矿配置
                {summary.miningConfig?.isActive && (
                  <Badge variant="default" className="text-xs">
                    运行中
                  </Badge>
                )}
              </p>
              {summary.miningConfig ? (
                <>
                  <p className="text-2xl font-bold mt-1">
                    第 {summary.miningConfig.currentEra} 纪
                  </p>
                  <p className="text-xs text-muted-foreground mt-2">
                    剩余分发: {formatDecimal(summary.miningConfig.remainingDistribution, 8)}
                  </p>
                </>
              ) : (
                <p className="text-sm text-muted-foreground mt-2">未配置</p>
              )}
            </div>
            <div className="p-3 rounded-lg bg-purple-50">
              <Activity className="h-6 w-6 text-purple-600" />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Circulation Pool */}
      <Card>
        <CardContent className="p-6">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-sm text-muted-foreground">流通池</p>
              {summary.circulationPool ? (
                <>
                  <p className="text-2xl font-bold mt-1">
                    {formatDecimal(summary.circulationPool.totalShares, 8)}
                  </p>
                  <p className="text-xs text-muted-foreground mt-2">
                    总金额: {formatDecimal(summary.circulationPool.totalCash, 8)} USDT
                  </p>
                </>
              ) : (
                <p className="text-sm text-muted-foreground mt-2">未初始化</p>
              )}
            </div>
            <div className="p-3 rounded-lg bg-amber-50">
              <Coins className="h-6 w-6 text-amber-600" />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
