"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, 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 { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Progress } from "@/components/ui/progress"
import { 
  Package, Plus, Download, Eye, Trash2, RefreshCw, 
  Users, Calendar, Tag, Filter, MoreHorizontal, Share2,
  CheckCircle2, Clock, AlertCircle
} from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const packages = [
  {
    id: "1",
    name: "高价值用户流量包",
    description: "CLV评分前20%的活跃用户",
    userCount: 15680,
    tags: ["高价值", "活跃用户"],
    status: "active",
    createdAt: "2024-01-10",
    lastUpdated: "2024-01-15",
    downloadCount: 23,
  },
  {
    id: "2",
    name: "潜力用户营销包",
    description: "近30天有浏览但未转化的用户",
    userCount: 8920,
    tags: ["潜力用户", "营销"],
    status: "active",
    createdAt: "2024-01-08",
    lastUpdated: "2024-01-14",
    downloadCount: 15,
  },
  {
    id: "3",
    name: "流失预警用户包",
    description: "预测30天内可能流失的用户",
    userCount: 3240,
    tags: ["流失预警", "挽回"],
    status: "updating",
    createdAt: "2024-01-05",
    lastUpdated: "2024-01-15",
    downloadCount: 8,
  },
]

export default function PackagesPage() {
  const [showCreateDialog, setShowCreateDialog] = useState(false)
  const [showPreviewDialog, setShowPreviewDialog] = useState(false)
  const [selectedPackage, setSelectedPackage] = useState<typeof packages[0] | null>(null)

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return <Badge className="bg-green-100 text-green-700">可用</Badge>
      case "updating":
        return <Badge className="bg-blue-100 text-blue-700">更新中</Badge>
      case "expired":
        return <Badge className="bg-gray-100 text-gray-700">已过期</Badge>
      default:
        return <Badge variant="secondary">未知</Badge>
    }
  }

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">流量包管理</h1>
          <p className="text-muted-foreground">创建和管理用户流量包，支持多维度筛选和导出</p>
        </div>
        <Button onClick={() => setShowCreateDialog(true)}>
          <Plus className="mr-2 h-4 w-4" />
          创建流量包
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">流量包总数</p>
                <p className="text-2xl font-bold">24</p>
              </div>
              <Package className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">覆盖用户</p>
                <p className="text-2xl font-bold">156.8K</p>
              </div>
              <Users className="h-8 w-8 text-green-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">本月下载</p>
                <p className="text-2xl font-bold">89</p>
              </div>
              <Download className="h-8 w-8 text-purple-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">活跃包</p>
                <p className="text-2xl font-bold">18</p>
              </div>
              <CheckCircle2 className="h-8 w-8 text-cyan-500" />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 流量包列表 */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>流量包列表</CardTitle>
              <CardDescription>管理所有已创建的用户流量包</CardDescription>
            </div>
            <div className="flex items-center gap-2">
              <Input placeholder="搜索流量包..." className="w-64" />
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>名称</TableHead>
                <TableHead>用户数</TableHead>
                <TableHead>标签</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>更新时间</TableHead>
                <TableHead>下载次数</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {packages.map((pkg) => (
                <TableRow key={pkg.id}>
                  <TableCell>
                    <div>
                      <p className="font-medium">{pkg.name}</p>
                      <p className="text-sm text-muted-foreground">{pkg.description}</p>
                    </div>
                  </TableCell>
                  <TableCell className="font-medium">{pkg.userCount.toLocaleString()}</TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      {pkg.tags.map((tag) => (
                        <Badge key={tag} variant="outline" className="text-xs">
                          {tag}
                        </Badge>
                      ))}
                    </div>
                  </TableCell>
                  <TableCell>{getStatusBadge(pkg.status)}</TableCell>
                  <TableCell className="text-muted-foreground">{pkg.lastUpdated}</TableCell>
                  <TableCell>{pkg.downloadCount}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      <Button 
                        variant="ghost" 
                        size="sm"
                        onClick={() => {
                          setSelectedPackage(pkg)
                          setShowPreviewDialog(true)
                        }}
                      >
                        <Eye className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="sm">
                        <Download className="h-4 w-4" />
                      </Button>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="sm">
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem>
                            <RefreshCw className="h-4 w-4 mr-2" />
                            刷新数据
                          </DropdownMenuItem>
                          <DropdownMenuItem>
                            <Share2 className="h-4 w-4 mr-2" />
                            分享
                          </DropdownMenuItem>
                          <DropdownMenuItem className="text-red-600">
                            <Trash2 className="h-4 w-4 mr-2" />
                            删除
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* 创建流量包弹窗 */}
      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>创建流量包</DialogTitle>
            <DialogDescription>通过设置筛选条件创建用户流量包</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>流量包名称</Label>
              <Input placeholder="输入流量包名称" />
            </div>
            <div className="space-y-2">
              <Label>描述</Label>
              <Input placeholder="输入流量包描述" />
            </div>
            <div className="space-y-2">
              <Label>筛选条件</Label>
              <Card className="p-4">
                <div className="space-y-4">
                  <div className="grid grid-cols-3 gap-4">
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="选择字段" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="clv_score">CLV评分</SelectItem>
                        <SelectItem value="rfm_level">RFM等级</SelectItem>
                        <SelectItem value="last_active">最后活跃</SelectItem>
                        <SelectItem value="purchase_count">购买次数</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="选择条件" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="gt">大于</SelectItem>
                        <SelectItem value="lt">小于</SelectItem>
                        <SelectItem value="eq">等于</SelectItem>
                        <SelectItem value="between">介于</SelectItem>
                      </SelectContent>
                    </Select>
                    <Input placeholder="输入值" />
                  </div>
                  <Button variant="outline" size="sm">
                    <Plus className="h-4 w-4 mr-1" />
                    添加条件
                  </Button>
                </div>
              </Card>
            </div>
            <div className="space-y-2">
              <Label>标签</Label>
              <Input placeholder="输入标签，用逗号分隔" />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
            <Button>
              <Eye className="mr-2 h-4 w-4" />
              预览结果
            </Button>
            <Button>创建</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 预览弹窗 */}
      <Dialog open={showPreviewDialog} onOpenChange={setShowPreviewDialog}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>流量包预览 - {selectedPackage?.name}</DialogTitle>
            <DialogDescription>{selectedPackage?.description}</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="grid grid-cols-3 gap-4">
              <Card className="p-4">
                <p className="text-sm text-muted-foreground">用户总数</p>
                <p className="text-2xl font-bold">{selectedPackage?.userCount.toLocaleString()}</p>
              </Card>
              <Card className="p-4">
                <p className="text-sm text-muted-foreground">平均CLV</p>
                <p className="text-2xl font-bold">¥2,580</p>
              </Card>
              <Card className="p-4">
                <p className="text-sm text-muted-foreground">活跃率</p>
                <p className="text-2xl font-bold">78.5%</p>
              </Card>
            </div>
            <Card>
              <CardHeader>
                <CardTitle className="text-base">用户样本</CardTitle>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>用户ID</TableHead>
                      <TableHead>CLV评分</TableHead>
                      <TableHead>RFM等级</TableHead>
                      <TableHead>最后活跃</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell>U****001</TableCell>
                      <TableCell>92</TableCell>
                      <TableCell>A</TableCell>
                      <TableCell>2024-01-15</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>U****002</TableCell>
                      <TableCell>88</TableCell>
                      <TableCell>A</TableCell>
                      <TableCell>2024-01-14</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>U****003</TableCell>
                      <TableCell>85</TableCell>
                      <TableCell>B</TableCell>
                      <TableCell>2024-01-15</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowPreviewDialog(false)}>关闭</Button>
            <Button>
              <Download className="mr-2 h-4 w-4" />
              导出数据
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}