'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Badge } from '@/components/ui/badge';
import { Pickaxe, CheckCircle2, Pause } from 'lucide-react';
import { useMiningStatus } from '../hooks/use-mining';

export function MiningProgress() {
  const { data: miningStatus, isLoading } = useMiningStatus();

  const formatNumber = (value: string | undefined, decimals: number = 2) => {
    if (!value) return '0';
    const num = parseFloat(value);
    if (isNaN(num)) return '0';
    return num.toLocaleString(undefined, {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals,
    });
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg flex items-center gap-2">
            <Pickaxe className="h-5 w-5 text-green-500" />
            挖矿进度
          </CardTitle>
          {isLoading ? (
            <Skeleton className="h-6 w-16" />
          ) : miningStatus?.isActive ? (
            <Badge variant="default" className="flex items-center gap-1 bg-green-500">
              <CheckCircle2 className="h-3 w-3" />
              运行中
            </Badge>
          ) : (
            <Badge variant="secondary" className="flex items-center gap-1">
              <Pause className="h-3 w-3" />
              已停用
            </Badge>
          )}
        </div>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <Skeleton className="h-40 w-full" />
        ) : !miningStatus ? (
          <div className="text-center py-4 text-muted-foreground">
            <p>无法获取挖矿数据</p>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">挖矿进度</span>
                <span className="font-semibold">{formatNumber(miningStatus.miningProgress, 4)}%</span>
              </div>
              <div className="w-full bg-muted rounded-full h-3">
                <div
                  className="bg-green-500 h-3 rounded-full transition-all"
                  style={{ width: `${Math.min(parseFloat(miningStatus.miningProgress), 100)}%` }}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1">
                <p className="text-sm text-muted-foreground">已分配</p>
                <p className="font-semibold text-green-500">{formatNumber(miningStatus.totalDistributed, 8)}</p>
              </div>
              <div className="space-y-1">
                <p className="text-sm text-muted-foreground">剩余分配池</p>
                <p className="font-semibold">{formatNumber(miningStatus.remainingDistribution, 8)}</p>
              </div>
              <div className="space-y-1">
                <p className="text-sm text-muted-foreground">剩余分钟</p>
                <p className="font-semibold">{miningStatus.remainingMinutes?.toLocaleString()}</p>
              </div>
              <div className="space-y-1">
                <p className="text-sm text-muted-foreground">每分钟分配</p>
                <p className="font-semibold">{formatNumber(miningStatus.minuteDistribution, 8)}</p>
              </div>
            </div>
            {miningStatus.lastMiningMinute && (
              <p className="text-sm text-muted-foreground pt-2 border-t">
                最后分配: {new Date(miningStatus.lastMiningMinute).toLocaleString()}
              </p>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
