'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { PageHeader } from '@/components/layout/page-header';
import { useUsers } from '@/features/users/hooks/use-users';
import { formatDecimal, formatNumber } from '@/lib/utils/format';
import { formatDateTime } from '@/lib/utils/date';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Search, ChevronLeft, ChevronRight, Eye, Users, TreePine } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';

export default function UsersPage() {
  const [keyword, setKeyword] = useState('');
  const [searchKeyword, setSearchKeyword] = useState('');
  const [page, setPage] = useState(1);
  const pageSize = 20;

  const { data, isLoading, error } = useUsers({ page, pageSize, keyword: searchKeyword });

  const handleSearch = () => {
    setSearchKeyword(keyword);
    setPage(1);
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSearch();
    }
  };

  // 获取状态徽章样式
  const getStatusBadge = (status?: string, isOnline?: boolean) => {
    if (status === 'frozen') {
      return <Badge variant="destructive" className="text-xs">冻结</Badge>;
    }
    if (status === 'deactivated') {
      return <Badge variant="secondary" className="text-xs">停用</Badge>;
    }
    if (isOnline) {
      return <Badge className="bg-green-500 text-xs">在线</Badge>;
    }
    return null;
  };

  return (
    <div className="space-y-6">
      <PageHeader title="用户管理" description="查看和管理用户的算力、贡献值、认种等信息" />

      <Card>
        <CardContent className="p-4">
          <div className="flex gap-4">
            <div className="relative flex-1 max-w-sm">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="搜索账户序列、昵称、手机号..."
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                onKeyDown={handleKeyDown}
                className="pl-10"
              />
            </div>
            <Button onClick={handleSearch}>搜索</Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[60px]">头像</TableHead>
                  <TableHead>账户序列</TableHead>
                  <TableHead>昵称</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead className="text-center">认种状态</TableHead>
                  <TableHead className="text-right">个人认种</TableHead>
                  <TableHead className="text-right">团队认种</TableHead>
                  <TableHead className="text-right">有效算力</TableHead>
                  <TableHead className="text-right">挖矿余额</TableHead>
                  <TableHead>推荐人</TableHead>
                  <TableHead>注册时间</TableHead>
                  <TableHead className="w-[80px]">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading ? (
                  [...Array(10)].map((_, i) => (
                    <TableRow key={i}>
                      {[...Array(12)].map((_, j) => (
                        <TableCell key={j}>
                          <Skeleton className="h-4 w-full" />
                        </TableCell>
                      ))}
                    </TableRow>
                  ))
                ) : error ? (
                  <TableRow>
                    <TableCell colSpan={12} className="text-center py-8 text-red-500">
                      加载失败: {(error as Error)?.message || '请稍后重试'}
                    </TableCell>
                  </TableRow>
                ) : !data?.items || data.items.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={12} className="text-center py-8 text-muted-foreground">
                      暂无数据
                    </TableCell>
                  </TableRow>
                ) : (
                  data.items.map((user) => (
                    <TableRow key={user.accountSequence}>
                      {/* 头像 */}
                      <TableCell>
                        <div className="relative">
                          <Avatar className="h-8 w-8">
                            <AvatarImage src={user.avatar || undefined} alt={user.nickname || ''} />
                            <AvatarFallback className="text-xs">
                              {user.nickname?.charAt(0) || 'U'}
                            </AvatarFallback>
                          </Avatar>
                          {user.isOnline && (
                            <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white" />
                          )}
                        </div>
                      </TableCell>
                      {/* 账户序列 */}
                      <TableCell className="font-mono text-sm">{user.accountSequence}</TableCell>
                      {/* 昵称 */}
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <span className="max-w-[120px] truncate">{user.nickname || '-'}</span>
                          {getStatusBadge(user.status, user.isOnline)}
                        </div>
                      </TableCell>
                      {/* 手机号 */}
                      <TableCell className="text-sm">{user.phoneNumberMasked || user.phone}</TableCell>
                      {/* 认种状态 */}
                      <TableCell className="text-center">
                        <span
                          className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
                            user.hasAdopted ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
                          }`}
                        >
                          {user.hasAdopted ? '已认种' : '未认种'}
                        </span>
                      </TableCell>
                      {/* 个人认种 */}
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-1">
                          <TreePine className="h-3 w-3 text-green-600" />
                          <span className="font-mono text-sm">
                            {formatNumber(user.personalAdoptions ?? 0)}
                            {(user.personalAdoptionOrders ?? 0) > 0 && (
                              <span className="text-muted-foreground ml-1">
                                ({user.personalAdoptionOrders}单)
                              </span>
                            )}
                          </span>
                        </div>
                      </TableCell>
                      {/* 团队认种 */}
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-1">
                          <Users className="h-3 w-3 text-blue-600" />
                          <span className="font-mono text-sm">
                            {formatNumber(user.teamAdoptions ?? 0)}
                            {(user.teamAdoptionOrders ?? 0) > 0 && (
                              <span className="text-muted-foreground ml-1">
                                ({user.teamAdoptionOrders}单)
                              </span>
                            )}
                          </span>
                        </div>
                      </TableCell>
                      {/* 有效算力 */}
                      <TableCell className="text-right font-mono text-sm text-primary font-medium">
                        {formatDecimal(user.effectiveContribution, 4)}
                      </TableCell>
                      {/* 挖矿余额 */}
                      <TableCell className="text-right font-mono text-sm">
                        {formatDecimal(user.miningBalance, 4)}
                      </TableCell>
                      {/* 推荐人 */}
                      <TableCell className="font-mono text-sm text-muted-foreground">
                        {user.referrerId || '-'}
                      </TableCell>
                      {/* 注册时间 */}
                      <TableCell className="text-sm text-muted-foreground">
                        {formatDateTime(user.createdAt)}
                      </TableCell>
                      {/* 操作 */}
                      <TableCell>
                        <Link href={`/users/${user.accountSequence}`}>
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <Eye className="h-4 w-4" />
                          </Button>
                        </Link>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>

          {data?.items && data.totalPages > 1 && (
            <div className="flex items-center justify-between p-4 border-t">
              <p className="text-sm text-muted-foreground">
                共 {formatNumber(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>
    </div>
  );
}