users/app/tag-tasks/page.tsx

"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, Plus, Filter, Calendar, CheckCircle2, XCircle, PlayCircle } from "lucide-react"
import { TaskList } from "@/components/tag-tasks/task-list"

export default function TagTasksPage() {
  const [activeTab, setActiveTab] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")

  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">用户标签任务</h1>
        <div className="flex space-x-2">
          <Button variant="outline">
            <Calendar className="mr-2 h-4 w-4" />
            任务日历
          </Button>
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            创建任务
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">总任务数</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">128</div>
            <p className="text-xs text-muted-foreground mt-1">本月新增 24 个任务</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">运行中任务</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <PlayCircle className="h-5 w-5 text-blue-500 mr-2" />
              <div className="text-2xl font-bold">12</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">预计完成时间 2小时后</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">已完成任务</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <CheckCircle2 className="h-5 w-5 text-green-500 mr-2" />
              <div className="text-2xl font-bold">98</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">成功率 96.2%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">失败任务</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <XCircle className="h-5 w-5 text-red-500 mr-2" />
              <div className="text-2xl font-bold">18</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">失败率 3.8%</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>标签任务管理</CardTitle>
          <CardDescription>创建和管理基于用户标签的自定义任务，自动化用户标签生成</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
            <div className="flex justify-between items-center">
              <TabsList>
                <TabsTrigger value="all">全部任务</TabsTrigger>
                <TabsTrigger value="running">运行中</TabsTrigger>
                <TabsTrigger value="completed">已完成</TabsTrigger>
                <TabsTrigger value="failed">失败</TabsTrigger>
                <TabsTrigger value="scheduled">已计划</TabsTrigger>
              </TabsList>
              <div className="flex space-x-2">
                <div className="relative w-64">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="搜索任务..."
                    className="pl-8"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                <Button variant="outline" size="icon">
                  <Filter className="h-4 w-4" />
                </Button>
              </div>
            </div>

            <TabsContent value="all" className="space-y-4">
              <TaskList status="all" searchQuery={searchQuery} />
            </TabsContent>

            <TabsContent value="running" className="space-y-4">
              <TaskList status="running" searchQuery={searchQuery} />
            </TabsContent>

            <TabsContent value="completed" className="space-y-4">
              <TaskList status="completed" searchQuery={searchQuery} />
            </TabsContent>

            <TabsContent value="failed" className="space-y-4">
              <TaskList status="failed" searchQuery={searchQuery} />
            </TabsContent>

            <TabsContent value="scheduled" className="space-y-4">
              <TaskList status="scheduled" searchQuery={searchQuery} />
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}