'use client';

import { useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { PageHeader } from '@/components/layout/page-header';
import {
  useC2cBotStatus,
  useEnableC2cBot,
  useDisableC2cBot,
  useC2cBotOrders,
} from '@/features/c2c-bot/hooks/use-c2c-bot';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} 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 { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import {
  RefreshCw,
  Wallet,
  BarChart3,
  Copy,
  Check,
  ChevronLeft,
  ChevronRight,
  AlertCircle,
  CheckCircle2,
  Zap,
} from 'lucide-react';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

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

function truncateAddress(addr: string | null | undefined, chars: number = 8) {
  if (!addr) return '-';
  if (addr.length <= chars * 2 + 2) return addr;
  return `${addr.slice(0, chars + 2)}...${addr.slice(-chars)}`;
}

export default function C2cBotPage() {
  const [orderPage, setOrderPage] = useState(1);
  const [copied, setCopied] = useState(false);
  const pageSize = 20;

  const { data: status, isLoading: statusLoading, refetch } = useC2cBotStatus();
  const { data: ordersData, isLoading: ordersLoading } = useC2cBotOrders(orderPage, pageSize);
  const enableMutation = useEnableC2cBot();
  const disableMutation = useDisableC2cBot();

  const totalPages = ordersData ? Math.ceil(ordersData.total / pageSize) : 0;

  const handleToggle = (checked: boolean) => {
    if (checked) {
      enableMutation.mutate();
    } else {
      disableMutation.mutate();
    }
  };

  const handleCopyAddress = () => {
    if (status?.hotWallet?.address) {
      navigator.clipboard.writeText(status.hotWallet.address);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  if (statusLoading) {
    return (
      <div className="space-y-6">
        <PageHeader title="C2C Bot 管理" description="管理 C2C 自动购买机器人" />
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Skeleton className="h-48" />
          <Skeleton className="h-48" />
          <Skeleton className="h-48" />
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <PageHeader title="C2C Bot 管理" description="管理 C2C 自动购买机器人" />
        <Button variant="outline" size="sm" onClick={() => refetch()}>
          <RefreshCw className="h-4 w-4 mr-2" />
          刷新
        </Button>
      </div>

      {/* 状态卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Bot 开关 */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-base flex items-center gap-2">
              <Zap className="h-5 w-5" />
              Bot 状态
            </CardTitle>
            <CardDescription>自动购买用户卖单</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">运行状态</span>
              <div className="flex items-center gap-3">
                {status?.enabled ? (
                  <Badge className="bg-green-500">运行中</Badge>
                ) : (
                  <Badge variant="secondary">已停止</Badge>
                )}
                <Switch
                  checked={status?.enabled ?? false}
                  onCheckedChange={handleToggle}
                  disabled={enableMutation.isPending || disableMutation.isPending}
                />
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">区块链服务</span>
              {status?.blockchainAvailable ? (
                <div className="flex items-center gap-1 text-green-600">
                  <CheckCircle2 className="h-4 w-4" />
                  <span className="text-sm">可用</span>
                </div>
              ) : (
                <div className="flex items-center gap-1 text-red-500">
                  <AlertCircle className="h-4 w-4" />
                  <span className="text-sm">不可用</span>
                </div>
              )}
            </div>
            <div className="text-xs text-muted-foreground bg-muted p-2 rounded">
              Bot 每 10 秒扫描一次待处理卖单，自动转账 dUSDT 完成购买
            </div>
          </CardContent>
        </Card>

        {/* 热钱包 */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-base flex items-center gap-2">
              <Wallet className="h-5 w-5" />
              热钱包
            </CardTitle>
            <CardDescription>Bot 使用的 dUSDT 钱包</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <p className="text-sm text-muted-foreground">dUSDT 余额</p>
              <p className="text-2xl font-bold">
                {formatNumber(status?.hotWallet?.balance, 4)}
              </p>
            </div>
            {status?.hotWallet?.address ? (
              <>
                <div>
                  <p className="text-sm text-muted-foreground mb-1">钱包地址 (Kava EVM)</p>
                  <div className="flex items-center gap-2">
                    <code className="flex-1 text-xs bg-muted p-2 rounded break-all">
                      {status.hotWallet.address}
                    </code>
                    <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={handleCopyAddress}>
                      {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
                    </Button>
                  </div>
                </div>
                <div className="flex justify-center">
                  <div className="p-3 bg-white rounded-lg">
                    <QRCodeSVG value={status.hotWallet.address} size={120} />
                  </div>
                </div>
                <div className="text-xs text-yellow-600 bg-yellow-50 p-2 rounded">
                  <AlertCircle className="h-3 w-3 inline mr-1" />
                  向此地址转入 dUSDT (Kava链) 即可为 Bot 充值
                </div>
              </>
            ) : (
              <div className="text-sm text-muted-foreground">热钱包未配置</div>
            )}
          </CardContent>
        </Card>

        {/* 统计 */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-base flex items-center gap-2">
              <BarChart3 className="h-5 w-5" />
              统计
            </CardTitle>
            <CardDescription>Bot 自动购买统计</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-muted-foreground">总成交订单</p>
                <p className="text-2xl font-bold">
                  {status?.stats?.totalBotOrders ?? 0}
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">总成交金额</p>
                <p className="text-2xl font-bold">
                  {formatNumber(status?.stats?.totalBotAmount, 4)}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 订单历史 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            Bot 订单历史
            {ordersData && (
              <Badge variant="secondary" className="text-xs">
                共 {ordersData.total} 条
              </Badge>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          {ordersLoading ? (
            <div className="p-6 space-y-3">
              <Skeleton className="h-8 w-full" />
              <Skeleton className="h-8 w-full" />
              <Skeleton className="h-8 w-full" />
            </div>
          ) : ordersData && ordersData.data.length > 0 ? (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>订单号</TableHead>
                  <TableHead>卖家</TableHead>
                  <TableHead className="text-right">金额</TableHead>
                  <TableHead className="text-right">数量</TableHead>
                  <TableHead>Kava 地址</TableHead>
                  <TableHead>TxHash</TableHead>
                  <TableHead>完成时间</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {ordersData.data.map((order) => (
                  <TableRow key={order.orderNo}>
                    <TableCell className="font-mono text-xs">
                      {order.orderNo}
                    </TableCell>
                    <TableCell>
                      <div className="text-sm">
                        {order.makerNickname || order.makerPhone || order.makerAccountSequence}
                      </div>
                    </TableCell>
                    <TableCell className="text-right font-mono">
                      {formatNumber(order.totalAmount, 4)}
                    </TableCell>
                    <TableCell className="text-right font-mono">
                      {formatNumber(order.quantity, 4)}
                    </TableCell>
                    <TableCell className="font-mono text-xs">
                      {truncateAddress(order.sellerKavaAddress, 6)}
                    </TableCell>
                    <TableCell className="font-mono text-xs">
                      {order.paymentTxHash ? (
                        <span className="text-blue-600" title={order.paymentTxHash}>
                          {truncateAddress(order.paymentTxHash, 6)}
                        </span>
                      ) : (
                        '-'
                      )}
                    </TableCell>
                    <TableCell className="text-sm">
                      {order.completedAt
                        ? format(new Date(order.completedAt), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN })
                        : '-'}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          ) : (
            <div className="p-8 text-center text-muted-foreground">
              暂无 Bot 订单记录
            </div>
          )}

          {/* 分页 */}
          {totalPages > 1 && (
            <div className="flex items-center justify-center gap-2 py-4">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setOrderPage((p) => Math.max(1, p - 1))}
                disabled={orderPage <= 1}
              >
                <ChevronLeft className="h-4 w-4" />
                上一页
              </Button>
              <span className="text-sm text-muted-foreground px-4">
                第 {orderPage} / {totalPages} 页
              </span>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setOrderPage((p) => Math.min(totalPages, p + 1))}
                disabled={orderPage >= totalPages}
              >
                下一页
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}