'use client';

import { useParams } from 'next/navigation';
import { PageHeader } from '@/components/layout/page-header';
import { useUserDetail } from '@/features/users/hooks/use-users';
import { formatDecimal, formatNumber } from '@/lib/utils/format';
import { formatDateTime } from '@/lib/utils/date';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Skeleton } from '@/components/ui/skeleton';
import { ContributionRecordsList } from '@/features/users/components/contribution-records-list';
import { MiningRecordsList } from '@/features/users/components/mining-records-list';
import { TradeOrdersList } from '@/features/users/components/trade-orders-list';

function UserDetailSkeleton() {
  return (
    <div className="space-y-6">
      <Card>
        <CardContent className="p-6">
          <div className="grid grid-cols-4 gap-6">
            {[...Array(8)].map((_, i) => (
              <div key={i}>
                <Skeleton className="h-4 w-20 mb-2" />
                <Skeleton className="h-6 w-32" />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export default function UserDetailPage() {
  const params = useParams();
  const accountSequence = params.accountSequence as string;
  const { data: user, isLoading } = useUserDetail(accountSequence);

  if (isLoading) {
    return (
      <div className="space-y-6">
        <PageHeader title="用户详情" backLink="/users" />
        <UserDetailSkeleton />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader title="用户详情" description={`账户序列: ${accountSequence}`} backLink="/users" />

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="text-lg">基本信息</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              <div>
                <p className="text-sm text-muted-foreground">账户序列</p>
                <p className="font-mono font-medium">{user?.accountSequence}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">昵称</p>
                <p className="font-medium">{user?.nickname || '-'}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">手机号</p>
                <p className="font-medium">{user?.phone}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">认种状态</p>
                <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>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">推荐人</p>
                <p className="font-mono font-medium">{user?.referrerAccountSequence || '-'}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">直推人数</p>
                <p className="font-medium">{formatNumber(user?.directReferralCount)}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">直推认种</p>
                <p className="font-medium">{formatNumber(user?.directReferralAdoptedCount)}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">注册时间</p>
                <p className="text-sm">{formatDateTime(user?.createdAt)}</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-lg">算力构成</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">个人算力</span>
              <span className="font-mono">{formatDecimal(user?.contributions?.personal, 4)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">系统运营</span>
              <span className="font-mono">{formatDecimal(user?.contributions?.systemOperation, 4)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">系统省级</span>
              <span className="font-mono">{formatDecimal(user?.contributions?.systemProvince, 4)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">系统市级</span>
              <span className="font-mono">{formatDecimal(user?.contributions?.systemCity, 4)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">团队层级</span>
              <span className="font-mono">{formatDecimal(user?.contributions?.teamLevel, 4)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">团队奖励</span>
              <span className="font-mono">{formatDecimal(user?.contributions?.teamBonus, 4)}</span>
            </div>
            <div className="flex justify-between pt-3 border-t font-medium">
              <span>有效算力</span>
              <span className="font-mono text-primary">{formatDecimal(user?.effectiveContribution, 4)}</span>
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card>
          <CardContent className="p-6 text-center">
            <p className="text-sm text-muted-foreground">挖矿余额</p>
            <p className="text-2xl font-bold font-mono text-primary">{formatDecimal(user?.miningBalance, 4)}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6 text-center">
            <p className="text-sm text-muted-foreground">交易余额</p>
            <p className="text-2xl font-bold font-mono text-blue-600">{formatDecimal(user?.tradingBalance, 4)}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6 text-center">
            <p className="text-sm text-muted-foreground">冻结余额</p>
            <p className="text-2xl font-bold font-mono text-orange-600">{formatDecimal(user?.frozenBalance, 4)}</p>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="contributions">
        <TabsList>
          <TabsTrigger value="contributions">算力记录</TabsTrigger>
          <TabsTrigger value="mining">挖矿记录</TabsTrigger>
          <TabsTrigger value="trading">交易订单</TabsTrigger>
        </TabsList>

        <TabsContent value="contributions" className="mt-4">
          <ContributionRecordsList accountSequence={accountSequence} />
        </TabsContent>

        <TabsContent value="mining" className="mt-4">
          <MiningRecordsList accountSequence={accountSequence} />
        </TabsContent>

        <TabsContent value="trading" className="mt-4">
          <TradeOrdersList accountSequence={accountSequence} />
        </TabsContent>
      </Tabs>
    </div>
  );
}
