'use client';

import { useState } from 'react';
import { useBatchMiningRecords } from '../hooks/use-users';
import { formatDecimal, formatPercent } from '@/lib/utils/format';
import { formatDateTime } from '@/lib/utils/date';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { ChevronLeft, ChevronRight, Gift } from 'lucide-react';

interface BatchMiningRecordsListProps {
  accountSequence: string;
}

export function BatchMiningRecordsList({ accountSequence }: BatchMiningRecordsListProps) {
  const [page, setPage] = useState(1);
  const pageSize = 20;

  const { data, isLoading } = useBatchMiningRecords(accountSequence, { page, pageSize });

  return (
    <Card>
      {/* 汇总信息 */}
      {data && data.total > 0 && (
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <Gift className="h-4 w-4 text-primary" />
            批量补发汇总
          </CardTitle>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-2">
            <div className="p-3 bg-muted rounded-lg">
              <p className="text-sm text-muted-foreground">阶段记录数</p>
              <p className="text-lg font-bold text-primary">{data.total}</p>
            </div>
            <div className="p-3 bg-green-50 dark:bg-green-950 rounded-lg">
              <p className="text-sm text-muted-foreground">补发总金额</p>
              <p className="text-lg font-bold text-green-600">{formatDecimal(data.totalAmount, 8)}</p>
            </div>
          </div>
        </CardHeader>
      )}
      <CardContent className="p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>阶段</TableHead>
              <TableHead>所属批次</TableHead>
              <TableHead className="text-right">阶段天数</TableHead>
              <TableHead className="text-right">用户算力</TableHead>
              <TableHead className="text-right">全网算力</TableHead>
              <TableHead className="text-right">算力占比</TableHead>
              <TableHead className="text-right">补发金额</TableHead>
              <TableHead>备注</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {isLoading ? (
              [...Array(5)].map((_, i) => (
                <TableRow key={i}>
                  {[...Array(8)].map((_, j) => (
                    <TableCell key={j}>
                      <Skeleton className="h-4 w-full" />
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : !data || data.records.length === 0 ? (
              <TableRow>
                <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
                  暂无批量补发记录
                </TableCell>
              </TableRow>
            ) : (
              data.records.map((record) => (
                <TableRow key={record.id}>
                  <TableCell className="font-mono font-medium">阶段 {record.phase}</TableCell>
                  <TableCell>批次 {record.batch}</TableCell>
                  <TableCell className="text-right">{record.daysInPhase} 天</TableCell>
                  <TableCell className="text-right font-mono text-sm">
                    {formatDecimal(record.userContribution, 2)}
                  </TableCell>
                  <TableCell className="text-right font-mono text-sm">
                    {formatDecimal(record.networkContribution, 2)}
                  </TableCell>
                  <TableCell className="text-right">
                    {formatPercent(record.contributionRatio)}
                  </TableCell>
                  <TableCell className="text-right font-mono text-primary font-medium">
                    +{formatDecimal(record.amount, 13)}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground max-w-[200px] truncate">
                    {record.remark || '-'}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>

        {data && data.totalPages > 1 && (
          <div className="flex items-center justify-between p-4 border-t">
            <p className="text-sm text-muted-foreground">
              共 {data.total} 条，第 {page} / {data.totalPages} 页
            </p>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm" onClick={() => setPage(page - 1)} disabled={page <= 1}>
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="sm" onClick={() => setPage(page + 1)} disabled={page >= data.totalPages}>
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
