"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Download, Users, TrendingUp, Clock } from "lucide-react"

interface PackagePreviewDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  packageData?: {
    name: string
    description: string
    users: number
    tags: string[]
  }
}

const MOCK_USERS = [
  { id: "U001", name: "张**", phone: "138****1234", rfmScore: 92, clvScore: 85, tags: ["高价值", "活跃"] },
  { id: "U002", name: "李**", phone: "139****5678", rfmScore: 88, clvScore: 79, tags: ["高价值", "VIP"] },
  { id: "U003", name: "王**", phone: "137****9012", rfmScore: 85, clvScore: 82, tags: ["高价值", "活跃"] },
  { id: "U004", name: "赵**", phone: "136****3456", rfmScore: 91, clvScore: 88, tags: ["高价值", "忠诚"] },
  { id: "U005", name: "刘**", phone: "135****7890", rfmScore: 87, clvScore: 76, tags: ["高价值"] },
]

export function PackagePreviewDialog({ open, onOpenChange, packageData }: PackagePreviewDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[700px]">
        <DialogHeader>
          <DialogTitle>流量包预览</DialogTitle>
        </DialogHeader>
        <div className="space-y-6">
          <div className="p-4 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl">
            <h3 className="font-semibold text-lg">{packageData?.name || "高价值用户包-S级"}</h3>
            <p className="text-sm text-gray-600 mt-1">{packageData?.description || "RFM评分S级的高价值用户"}</p>
            <div className="flex items-center gap-4 mt-3">
              <div className="flex items-center gap-1">
                <Users className="w-4 h-4 text-indigo-500" />
                <span className="text-sm font-medium">{(packageData?.users || 125800).toLocaleString()} 用户</span>
              </div>
              <div className="flex items-center gap-1">
                <TrendingUp className="w-4 h-4 text-green-500" />
                <span className="text-sm font-medium">平均价值 ¥2,580</span>
              </div>
              <div className="flex items-center gap-1">
                <Clock className="w-4 h-4 text-gray-500" />
                <span className="text-sm">更新于 2小时前</span>
              </div>
            </div>
          </div>

          <div>
            <h4 className="font-medium mb-3">用户样本（前5条）</h4>
            <div className="border rounded-lg overflow-hidden">
              <table className="w-full">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">用户ID</th>
                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">姓名</th>
                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">手机号</th>
                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">RFM</th>
                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">CLV</th>
                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">标签</th>
                  </tr>
                </thead>
                <tbody>
                  {MOCK_USERS.map((user) => (
                    <tr key={user.id} className="border-t">
                      <td className="py-3 px-4 text-sm font-mono">{user.id}</td>
                      <td className="py-3 px-4 text-sm">{user.name}</td>
                      <td className="py-3 px-4 text-sm">{user.phone}</td>
                      <td className="py-3 px-4 text-sm font-medium text-green-600">{user.rfmScore}</td>
                      <td className="py-3 px-4 text-sm font-medium text-blue-600">{user.clvScore}</td>
                      <td className="py-3 px-4">
                        <div className="flex gap-1">
                          {user.tags.map((tag) => (
                            <Badge key={tag} variant="outline" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          <div className="flex justify-end gap-2">
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              关闭
            </Button>
            <Button>
              <Download className="w-4 h-4 mr-2" />
              导出完整数据
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}