"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Pause, AlertCircle, CheckCircle, RefreshCw, Tag, User } from "lucide-react"

export function TaskExecution() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>任务执行状态</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h3 className="text-lg font-medium">京东活跃用户标记</h3>
            <p className="text-sm text-muted-foreground">识别在京东平台活跃的用户并打上相应标签</p>
          </div>
          <div className="flex space-x-2">
            <Button variant="outline" size="sm">
              <Pause className="mr-2 h-4 w-4" />
              暂停
            </Button>
            <Button size="sm">
              <RefreshCw className="mr-2 h-4 w-4" />
              刷新状态
            </Button>
          </div>
        </div>

        <div className="space-y-2">
          <div className="flex justify-between items-center">
            <div className="flex items-center">
              <Badge className="bg-blue-100 text-blue-800 mr-2">运行中</Badge>
              <span className="text-sm text-muted-foreground">预计剩余时间: 45分钟</span>
            </div>
            <span className="text-sm font-medium">65%</span>
          </div>
          <Progress value={65} className="h-2" />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div className="bg-gray-50 p-4 rounded-lg">
            <div className="flex items-center space-x-2">
              <User className="h-5 w-5 text-blue-500" />
              <span className="text-sm font-medium">目标用户</span>
            </div>
            <div className="mt-2">
              <span className="text-2xl font-bold">12,500</span>
            </div>
          </div>
          <div className="bg-gray-50 p-4 rounded-lg">
            <div className="flex items-center space-x-2">
              <CheckCircle className="h-5 w-5 text-green-500" />
              <span className="text-sm font-medium">已处理</span>
            </div>
            <div className="mt-2">
              <span className="text-2xl font-bold">8,125</span>
            </div>
          </div>
          <div className="bg-gray-50 p-4 rounded-lg">
            <div className="flex items-center space-x-2">
              <Tag className="h-5 w-5 text-purple-500" />
              <span className="text-sm font-medium">已打标签</span>
            </div>
            <div className="mt-2">
              <span className="text-2xl font-bold">5,840</span>
            </div>
          </div>
          <div className="bg-gray-50 p-4 rounded-lg">
            <div className="flex items-center space-x-2">
              <AlertCircle className="h-5 w-5 text-red-500" />
              <span className="text-sm font-medium">失败数</span>
            </div>
            <div className="mt-2">
              <span className="text-2xl font-bold">120</span>
            </div>
          </div>
        </div>

        <Tabs defaultValue="logs" className="space-y-4">
          <TabsList>
            <TabsTrigger value="logs">执行日志</TabsTrigger>
            <TabsTrigger value="users">用户处理</TabsTrigger>
            <TabsTrigger value="errors">错误记录</TabsTrigger>
          </TabsList>

          <TabsContent value="logs" className="space-y-4">
            <div className="bg-black text-green-400 p-4 rounded-md font-mono text-sm h-60 overflow-y-auto">
              <div>[2023-07-15 14:30:15] 任务开始执行</div>
              <div>[2023-07-15 14:30:16] 正在加载目标用户列表...</div>
              <div>[2023-07-15 14:30:20] 已加载 12,500 个目标用户</div>
              <div>[2023-07-15 14:30:25] 开始处理用户批次 #1 (1000 users)</div>
              <div>[2023-07-15 14:35:10] 批次 #1 处理完成: 成功 950, 失败 50</div>
              <div>[2023-07-15 14:35:15] 开始处理用户批次 #2 (1000 users)</div>
              <div>[2023-07-15 14:40:05] 批次 #2 处理完成: 成功 980, 失败 20</div>
              <div>[2023-07-15 14:40:10] 开始处理用户批次 #3 (1000 users)</div>
              <div>[2023-07-15 14:45:00] 批次 #3 处理完成: 成功 990, 失败 10</div>
              <div>[2023-07-15 14:45:05] 开始处理用户批次 #4 (1000 users)</div>
              <div>[2023-07-15 14:50:00] 批次 #4 处理完成: 成功 995, 失败 5</div>
              <div>[2023-07-15 14:50:05] 开始处理用户批次 #5 (1000 users)</div>
              <div>[2023-07-15 14:55:00] 批次 #5 处理完成: 成功 985, 失败 15</div>
              <div>[2023-07-15 14:55:05] 开始处理用户批次 #6 (1000 users)</div>
              <div>[2023-07-15 15:00:00] 批次 #6 处理完成: 成功 975, 失败 25</div>
              <div>[2023-07-15 15:00:05] 开始处理用户批次 #7 (1000 users)</div>
              <div>[2023-07-15 15:05:00] 批次 #7 处理完成: 成功 990, 失败 10</div>
              <div>[2023-07-15 15:05:05] 开始处理用户批次 #8 (1000 users)</div>
              <div>[2023-07-15 15:10:00] 批次 #8 处理完成: 成功 975, 失败 25</div>
              <div>[2023-07-15 15:10:05] 已处理 8000 个用户, 剩余 4500 个用户</div>
              <div>[2023-07-15 15:10:10] 开始处理用户批次 #9 (1000 users)</div>
            </div>
          </TabsContent>

          <TabsContent value="users" className="space-y-4">
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>用户ID</TableHead>
                    <TableHead>处理时间</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>添加标签</TableHead>
                    <TableHead>详情</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow>
                    <TableCell>user_12345</TableCell>
                    <TableCell>2023-07-15 14:32:15</TableCell>
                    <TableCell>
                      <Badge className="bg-green-100 text-green-800">成功</Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        <Badge variant="outline" className="flex items-center gap-1">
                          <Tag className="h-3 w-3" />
                          京东活跃用户
                        </Badge>
                      </div>
                    </TableCell>
                    <TableCell>登录成功, 近30天活跃度高</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>user_12346</TableCell>
                    <TableCell>2023-07-15 14:32:18</TableCell>
                    <TableCell>
                      <Badge className="bg-green-100 text-green-800">成功</Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        <Badge variant="outline" className="flex items-center gap-1">
                          <Tag className="h-3 w-3" />
                          京东活跃用户
                        </Badge>
                        <Badge variant="outline" className="flex items-center gap-1">
                          <Tag className="h-3 w-3" />
                          电商偏好
                        </Badge>
                      </div>
                    </TableCell>
                    <TableCell>登录成功, 购买频率高</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>user_12347</TableCell>
                    <TableCell>2023-07-15 14:32:20</TableCell>
                    <TableCell>
                      <Badge className="bg-red-100 text-red-800">失败</Badge>
                    </TableCell>
                    <TableCell>-</TableCell>
                    <TableCell>登录失败, 账号异常</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>user_12348</TableCell>
                    <TableCell>2023-07-15 14:32:25</TableCell>
                    <TableCell>
                      <Badge className="bg-green-100 text-green-800">成功</Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        <Badge variant="outline" className="flex items-center gap-1">
                          <Tag className="h-3 w-3" />
                          京东活跃用户
                        </Badge>
                      </div>
                    </TableCell>
                    <TableCell>登录成功, 浏览时间长</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>user_12349</TableCell>
                    <TableCell>2023-07-15 14:32:30</TableCell>
                    <TableCell>
                      <Badge className="bg-green-100 text-green-800">成功</Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        <Badge variant="outline" className="flex items-center gap-1">
                          <Tag className="h-3 w-3" />
                          京东活跃用户
                        </Badge>
                        <Badge variant="outline" className="flex items-center gap-1">
                          <Tag className="h-3 w-3" />
                          高消费用户
                        </Badge>
                      </div>
                    </TableCell>
                    <TableCell>登录成功, 消费金额高</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </TabsContent>

          <TabsContent value="errors" className="space-y-4">
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>错误ID</TableHead>
                    <TableHead>时间</TableHead>
                    <TableHead>用户ID</TableHead>
                    <TableHead>错误类型</TableHead>
                    <TableHead>错误详情</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow>
                    <TableCell>err_001</TableCell>
                    <TableCell>2023-07-15 14:32:20</TableCell>
                    <TableCell>user_12347</TableCell>
                    <TableCell>登录失败</TableCell>
                    <TableCell>账号异常, 可能被锁定</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>err_002</TableCell>
                    <TableCell>2023-07-15 14:33:15</TableCell>
                    <TableCell>user_12356</TableCell>
                    <TableCell>网络错误</TableCell>
                    <TableCell>连接超时, 请求失败</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>err_003</TableCell>
                    <TableCell>2023-07-15 14:35:05</TableCell>
                    <TableCell>user_12378</TableCell>
                    <TableCell>数据错误</TableCell>
                    <TableCell>用户数据格式不正确</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>err_004</TableCell>
                    <TableCell>2023-07-15 14:38:30</TableCell>
                    <TableCell>user_12390</TableCell>
                    <TableCell>权限错误</TableCell>
                    <TableCell>无权访问用户数据</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>err_005</TableCell>
                    <TableCell>2023-07-15 14:42:10</TableCell>
                    <TableCell>user_12405</TableCell>
                    <TableCell>API限流</TableCell>
                    <TableCell>请求频率超过限制</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}