"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
} from "recharts"
import { Download, FileDown, Tag, User, CheckCircle, Clock } from "lucide-react"

export function TaskResults() {
  // 模拟数据
  const tagDistributionData = [
    { name: "京东活跃用户", value: 5840 },
    { name: "电商偏好", value: 4250 },
    { name: "高消费用户", value: 1850 },
    { name: "品质生活", value: 2100 },
    { name: "数码爱好者", value: 1450 },
  ]

  const userActionData = [
    { name: "登录成功", value: 8125 },
    { name: "浏览商品", value: 6540 },
    { name: "加入购物车", value: 3250 },
    { name: "完成购买", value: 1850 },
    { name: "评价商品", value: 980 },
  ]

  const timeDistributionData = [
    { name: "0-5分钟", count: 2450 },
    { name: "5-10分钟", count: 3650 },
    { name: "10-20分钟", count: 2850 },
    { name: "20-30分钟", count: 1950 },
    { name: "30+分钟", count: 1600 },
  ]

  const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"]

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>任务结果分析</CardTitle>
        <Button variant="outline" size="sm">
          <FileDown className="mr-2 h-4 w-4" />
          导出报告
        </Button>
      </CardHeader>
      <CardContent className="space-y-6">
        <div>
          <h3 className="text-lg font-medium">京东活跃用户标记</h3>
          <div className="flex items-center space-x-2 mt-1">
            <Badge className="bg-green-100 text-green-800">已完成</Badge>
            <span className="text-sm text-muted-foreground">完成时间: 2023-07-15 16:15:30</span>
          </div>
        </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">12,380</span>
              <span className="text-sm text-muted-foreground ml-2">99.0%</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">8,450</span>
              <span className="text-sm text-muted-foreground ml-2">67.6%</span>
            </div>
          </div>
          <div className="bg-gray-50 p-4 rounded-lg">
            <div className="flex items-center space-x-2">
              <Clock className="h-5 w-5 text-orange-500" />
              <span className="text-sm font-medium">执行时间</span>
            </div>
            <div className="mt-2">
              <span className="text-2xl font-bold">1h 45m</span>
            </div>
          </div>
        </div>

        <Tabs defaultValue="overview" className="space-y-4">
          <TabsList>
            <TabsTrigger value="overview">结果概览</TabsTrigger>
            <TabsTrigger value="tags">标签分析</TabsTrigger>
            <TabsTrigger value="users">用户分析</TabsTrigger>
            <TabsTrigger value="details">详细数据</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h4 className="text-sm font-medium mb-4">标签分布</h4>
                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={tagDistributionData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                      >
                        {tagDistributionData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
              </div>
              <div>
                <h4 className="text-sm font-medium mb-4">用户行为分布</h4>
                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                      data={userActionData}
                      margin={{
                        top: 5,
                        right: 30,
                        left: 20,
                        bottom: 5,
                      }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="name" />
                      <YAxis />
                      <Tooltip />
                      <Legend />
                      <Bar dataKey="value" fill="#8884d8" />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </div>
            </div>
            <div>
              <h4 className="text-sm font-medium mb-4">用户停留时间分布</h4>
              <div className="h-80">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart
                    data={timeDistributionData}
                    margin={{
                      top: 5,
                      right: 30,
                      left: 20,
                      bottom: 5,
                    }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="name" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Bar dataKey="count" fill="#82ca9d" />
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="tags" className="space-y-4">
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>标签名称</TableHead>
                    <TableHead>用户数量</TableHead>
                    <TableHead>占比</TableHead>
                    <TableHead>标签分类</TableHead>
                    <TableHead>创建时间</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow>
                    <TableCell className="font-medium">京东活跃用户</TableCell>
                    <TableCell>5,840</TableCell>
                    <TableCell>46.7%</TableCell>
                    <TableCell>行为特征</TableCell>
                    <TableCell>2023-07-15 15:30:25</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="font-medium">电商偏好</TableCell>
                    <TableCell>4,250</TableCell>
                    <TableCell>34.0%</TableCell>
                    <TableCell>偏好特征</TableCell>
                    <TableCell>2023-07-15 15:35:10</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="font-medium">高消费用户</TableCell>
                    <TableCell>1,850</TableCell>
                    <TableCell>14.8%</TableCell>
                    <TableCell>价值特征</TableCell>
                    <TableCell>2023-07-15 15:40:30</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="font-medium">品质生活</TableCell>
                    <TableCell>2,100</TableCell>
                    <TableCell>16.8%</TableCell>
                    <TableCell>偏好特征</TableCell>
                    <TableCell>2023-07-15 15:45:15</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="font-medium">数码爱好者</TableCell>
                    <TableCell>1,450</TableCell>
                    <TableCell>11.6%</TableCell>
                    <TableCell>偏好特征</TableCell>
                    <TableCell>2023-07-15 15:50:05</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </TabsContent>

          <TabsContent value="users" className="space-y-4">
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>用户分类</TableHead>
                    <TableHead>数量</TableHead>
                    <TableHead>占比</TableHead>
                    <TableHead>平均停留时间</TableHead>
                    <TableHead>平均交互次数</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow>
                    <TableCell className="font-medium">活跃购买用户</TableCell>
                    <TableCell>3,250</TableCell>
                    <TableCell>26.0%</TableCell>
                    <TableCell>25分钟</TableCell>
                    <TableCell>12.5</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="font-medium">浏览未购买用户</TableCell>
                    <TableCell>4,850</TableCell>
                    <TableCell>38.8%</TableCell>
                    <TableCell>15分钟</TableCell>
                    <TableCell>8.2</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="font-medium">短时访问用户</TableCell>
                    <TableCell>2,450</TableCell>
                    <TableCell>19.6%</TableCell>
                    <TableCell>3分钟</TableCell>
                    <TableCell>2.1</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="font-medium">登录未浏览用户</TableCell>
                    <TableCell>1,830</TableCell>
                    <TableCell>14.6%</TableCell>
                    <TableCell>1分钟</TableCell>
                    <TableCell>0.5</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="font-medium">登录失败用户</TableCell>
                    <TableCell>120</TableCell>
                    <TableCell>1.0%</TableCell>
                    <TableCell>-</TableCell>
                    <TableCell>-</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </TabsContent>

          <TabsContent value="details" className="space-y-4">
            <div className="flex justify-end mb-4">
              <Button variant="outline" size="sm">
                <Download className="mr-2 h-4 w-4" />
                导出详细数据
              </Button>
            </div>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>用户ID</TableHead>
                    <TableHead>处理时间</TableHead>
                    <TableHead>状态</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>18分钟</TableCell>
                    <TableCell>9</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>25分钟</TableCell>
                    <TableCell>15</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>
                    <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>32分钟</TableCell>
                    <TableCell>12</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>28分钟</TableCell>
                    <TableCell>18</TableCell>
                    <TableCell>登录成功, 消费金额高</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}