"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import {
  Package,
  ArrowLeft,
  Plus,
  Download,
  Trash2,
  RefreshCw,
  Search,
  Filter,
  Clock,
  CheckCircle2,
  Eye,
  Copy,
  MoreHorizontal,
} from "lucide-react"
import Link from "next/link"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { CreatePackageDialog } from "@/components/dialogs/create-package-dialog"
import { PackagePreviewDialog } from "@/components/dialogs/package-preview-dialog"

const packages = [
  {
    id: 1,
    name: "高价值用户包-S级",
    description: "RFM评分S级的高价值用户",
    users: 125800,
    status: "active",
    createdAt: "2024-12-10",
    updatedAt: "2小时前",
    downloads: 23,
    tags: ["高价值", "S级", "活跃"],
  },
  {
    id: 2,
    name: "流失预警用户包",
    description: "流失风险值大于80的用户",
    users: 23400,
    status: "active",
    createdAt: "2024-12-11",
    updatedAt: "1小时前",
    downloads: 15,
    tags: ["流失风险", "预警"],
  },
  {
    id: 3,
    name: "潜力转化用户包",
    description: "转化概率大于60%的潜力用户",
    users: 89000,
    status: "active",
    createdAt: "2024-12-08",
    updatedAt: "30分钟前",
    downloads: 45,
    tags: ["潜力用户", "转化"],
  },
  {
    id: 4,
    name: "沉默用户唤醒包",
    description: "30天内未活跃的沉默用户",
    users: 156000,
    status: "generating",
    createdAt: "2024-12-12",
    updatedAt: "生成中",
    downloads: 0,
    tags: ["沉默用户", "唤醒"],
  },
  {
    id: 5,
    name: "新用户引导包",
    description: "7天内注册的新用户",
    users: 12580,
    status: "active",
    createdAt: "2024-12-05",
    updatedAt: "4小时前",
    downloads: 18,
    tags: ["新用户", "引导"],
  },
]

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

  const handlePreview = (pkg: (typeof packages)[0]) => {
    setSelectedPackage(pkg)
    setShowPreviewDialog(true)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50/30 p-6">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* 页面标题 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/data-asset">
              <Button variant="ghost" size="icon" className="rounded-full">
                <ArrowLeft className="w-5 h-5" />
              </Button>
            </Link>
            <div>
              <h1 className="text-2xl font-bold text-slate-800">流量包管理</h1>
              <p className="text-slate-500 mt-1">创建、管理和导出用户流量包</p>
            </div>
          </div>
          <Button
            className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700"
            onClick={() => setShowCreateDialog(true)}
          >
            <Plus className="w-4 h-4 mr-2" />
            创建流量包
          </Button>
        </div>

        {/* 筛选工具栏 */}
        <Card className="bg-white/70 backdrop-blur border-slate-200/60">
          <CardContent className="p-4">
            <div className="flex items-center gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <Input
                  placeholder="搜索流量包名称或标签..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-9"
                />
              </div>
              <Button variant="outline">
                <Filter className="w-4 h-4 mr-2" />
                筛选
              </Button>
              <Button variant="outline">
                <RefreshCw className="w-4 h-4 mr-2" />
                刷新
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* 流量包列表 */}
        <div className="grid grid-cols-1 gap-4">
          {packages.map((pkg) => (
            <Card key={pkg.id} className="bg-white/70 backdrop-blur border-slate-200/60 hover:shadow-md transition-all">
              <CardContent className="p-5">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
                      <Package className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <h3 className="font-semibold text-slate-800">{pkg.name}</h3>
                        {pkg.status === "active" ? (
                          <Badge className="bg-emerald-100 text-emerald-700">
                            <CheckCircle2 className="w-3 h-3 mr-1" />
                            可用
                          </Badge>
                        ) : (
                          <Badge className="bg-blue-100 text-blue-700">
                            <RefreshCw className="w-3 h-3 mr-1 animate-spin" />
                            生成中
                          </Badge>
                        )}
                      </div>
                      <p className="text-sm text-slate-500 mt-0.5">{pkg.description}</p>
                      <div className="flex items-center gap-2 mt-2">
                        {pkg.tags.map((tag, i) => (
                          <Badge key={i} variant="outline" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </div>

                  <div className="flex items-center gap-8">
                    <div className="text-center">
                      <p className="text-2xl font-bold text-slate-800">{pkg.users.toLocaleString()}</p>
                      <p className="text-xs text-slate-500">用户数</p>
                    </div>
                    <div className="text-center">
                      <p className="text-lg font-semibold text-slate-700">{pkg.downloads}</p>
                      <p className="text-xs text-slate-500">下载次数</p>
                    </div>
                    <div className="text-right">
                      <p className="text-sm text-slate-600 flex items-center gap-1">
                        <Clock className="w-3 h-3" />
                        {pkg.updatedAt}
                      </p>
                      <p className="text-xs text-slate-400">创建于 {pkg.createdAt}</p>
                    </div>

                    <div className="flex items-center gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        disabled={pkg.status !== "active"}
                        onClick={() => handlePreview(pkg)}
                      >
                        <Eye className="w-4 h-4 mr-1" />
                        预览
                      </Button>
                      <Button variant="outline" size="sm" disabled={pkg.status !== "active"}>
                        <Download className="w-4 h-4 mr-1" />
                        导出
                      </Button>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="sm">
                            <MoreHorizontal className="w-4 h-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem>
                            <Copy className="w-4 h-4 mr-2" />
                            复制
                          </DropdownMenuItem>
                          <DropdownMenuItem>
                            <RefreshCw className="w-4 h-4 mr-2" />
                            更新
                          </DropdownMenuItem>
                          <DropdownMenuItem className="text-red-600">
                            <Trash2 className="w-4 h-4 mr-2" />
                            删除
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <CreatePackageDialog open={showCreateDialog} onOpenChange={setShowCreateDialog} />
      <PackagePreviewDialog
        open={showPreviewDialog}
        onOpenChange={setShowPreviewDialog}
        packageData={
          selectedPackage
            ? {
                name: selectedPackage.name,
                description: selectedPackage.description,
                users: selectedPackage.users,
                tags: selectedPackage.tags,
              }
            : undefined
        }
      />
    </div>
  )
}