"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Users, Search, Tag, TrendingUp, Filter, UserCircle, Mail, Phone, MapPin, Calendar, Activity, Target } from 'lucide-react'
import { Avatar, AvatarFallback } from "@/components/ui/avatar"

export default function UserPortrait() {
  const [searchQuery, setSearchQuery] = useState("")

  // 用户群体分布
  const userSegments = [
    { name: "高价值用户", count: 128456700, percentage: 3.0, avgValue: 580, color: "purple" },
    { name: "活跃用户", count: 1285670000, percentage: 30.0, avgValue: 280, color: "blue" },
    { name: "沉默用户", count: 1714283500, percentage: 40.0, avgValue: 85, color: "yellow" },
    { name: "流失预警", count: 857134000, percentage: 20.0, avgValue: 45, color: "orange" },
    { name: "新增用户", count: 300125800, percentage: 7.0, avgValue: 120, color: "green" },
  ]

  // 标签分类统计
  const tagCategories = [
    { name: "基础属性", count: 485, usage: 4285670000, coverage: 100 },
    { name: "行为标签", count: 328, usage: 3256780000, coverage: 76 },
    { name: "兴趣偏好", count: 256, usage: 2570000000, coverage: 60 },
    { name: "消费能力", count: 89, usage: 1714283500, coverage: 40 },
    { name: "自定义标签", count: 100, usage: 857134000, coverage: 20 },
  ]

  // 最近用户示例
  const recentUsers = [
    {
      id: "U001285",
      name: "张**",
      phone: "138****5678",
      level: "S",
      tags: ["高净值", "美妆爱好者", "VIP客户"],
      value: 5800,
      lastActive: "2小时前",
    },
    {
      id: "U002456",
      name: "李**",
      phone: "186****1234",
      level: "A",
      tags: ["活跃用户", "教育培训", "复购客户"],
      value: 3200,
      lastActive: "5小时前",
    },
    {
      id: "U003789",
      name: "王**",
      phone: "159****9876",
      level: "B",
      tags: ["潜力用户", "电商购物", "新客户"],
      value: 1800,
      lastActive: "1天前",
    },
    {
      id: "U004123",
      name: "赵**",
      phone: "177****5432",
      level: "C",
      tags: ["普通用户", "低频互动"],
      value: 850,
      lastActive: "3天前",
    },
  ]

  const formatNumber = (num: number): string => {
    if (num >= 1000000000) return `${(num / 1000000000).toFixed(1)}B`
    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`
    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`
    return num.toString()
  }

  const getLevelColor = (level: string) => {
    const colors = {
      S: "border-purple-500/50 text-purple-400 bg-purple-500/10",
      A: "border-blue-500/50 text-blue-400 bg-blue-500/10",
      B: "border-green-500/50 text-green-400 bg-green-500/10",
      C: "border-yellow-500/50 text-yellow-400 bg-yellow-500/10",
      D: "border-gray-500/50 text-gray-400 bg-gray-500/10",
    }
    return colors[level as keyof typeof colors] || colors.D
  }

  const getSegmentColor = (color: string) => {
    const colors = {
      purple: "from-purple-500/20 to-purple-900/20 border-purple-500/30",
      blue: "from-blue-500/20 to-blue-900/20 border-blue-500/30",
      green: "from-green-500/20 to-green-900/20 border-green-500/30",
      yellow: "from-yellow-500/20 to-yellow-900/20 border-yellow-500/30",
      orange: "from-orange-500/20 to-orange-900/20 border-orange-500/30",
    }
    return colors[color as keyof typeof colors]
  }

  return (
    <div className="min-h-screen bg-black text-white p-6">
      {/* Header */}
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-4xl font-bold mb-2">用户画像</h1>
          <p className="text-gray-400">用户管理、标签体系与群体分析</p>
        </div>
        <div className="flex items-center gap-4">
          <Button variant="outline" className="bg-white/5 border-white/10 hover:bg-white/10">
            <Filter className="w-4 h-4 mr-2" />
            高级筛选
          </Button>
          <Button className="bg-gradient-to-r from-blue-500 to-purple-500">
            <Target className="w-4 h-4 mr-2" />
            创建用户群
          </Button>
        </div>
      </div>

      <Tabs defaultValue="segments" className="space-y-6">
        <TabsList className="bg-white/5 border border-white/10">
          <TabsTrigger value="segments">用户群体</TabsTrigger>
          <TabsTrigger value="tags">标签体系</TabsTrigger>
          <TabsTrigger value="users">用户列表</TabsTrigger>
        </TabsList>

        {/* 用户群体分布 */}
        <TabsContent value="segments" className="space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
            {userSegments.map((segment, index) => (
              <Card key={index} className={`bg-gradient-to-br ${getSegmentColor(segment.color)}`}>
                <CardHeader className="pb-3">
                  <CardTitle className="text-white text-lg">{segment.name}</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <div className="text-3xl font-bold text-white">{formatNumber(segment.count)}</div>
                    <div className="text-sm text-gray-300">占比 {segment.percentage}%</div>
                    <div className="pt-2 border-t border-white/20">
                      <div className="text-xs text-gray-300 mb-1">人均价值</div>
                      <div className="text-lg font-semibold text-white">¥{segment.avgValue}</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* 用户增长趋势 */}
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle className="text-white flex items-center gap-2">
                <TrendingUp className="w-5 h-5" />
                用户增长趋势
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-64 flex items-center justify-center text-gray-400">
                用户增长趋势图表区域
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 标签体系 */}
        <TabsContent value="tags" className="space-y-6">
          <div className="grid grid-cols-1 gap-4">
            {tagCategories.map((category, index) => (
              <Card key={index} className="bg-white/5 border-white/10">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
                        <Tag className="w-6 h-6" />
                      </div>
                      <div>
                        <h3 className="text-lg font-semibold text-white">{category.name}</h3>
                        <p className="text-sm text-gray-400">{category.count} 个标签</p>
                      </div>
                    </div>
                    <Badge variant="outline" className="border-blue-500/50 text-blue-400">
                      覆盖率 {category.coverage}%
                    </Badge>
                  </div>
                  <div className="grid grid-cols-3 gap-4 text-sm">
                    <div>
                      <div className="text-gray-400 mb-1">标签数量</div>
                      <div className="text-xl font-bold text-white">{category.count}</div>
                    </div>
                    <div>
                      <div className="text-gray-400 mb-1">使用用户</div>
                      <div className="text-xl font-bold text-white">{formatNumber(category.usage)}</div>
                    </div>
                    <div>
                      <div className="text-gray-400 mb-1">覆盖率</div>
                      <div className="text-xl font-bold text-green-400">{category.coverage}%</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>

        {/* 用户列表 */}
        <TabsContent value="users" className="space-y-6">
          {/* 搜索栏 */}
          <div className="flex items-center gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
              <Input
                placeholder="搜索用户手机号、姓名、标签..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 bg-white/5 border-white/10"
              />
            </div>
            <Button variant="outline" className="bg-white/5 border-white/10 hover:bg-white/10">
              <Filter className="w-4 h-4 mr-2" />
              筛选
            </Button>
          </div>

          {/* 用户卡片列表 */}
          <div className="grid grid-cols-1 gap-4">
            {recentUsers.map((user) => (
              <Card key={user.id} className="bg-white/5 border-white/10 hover:bg-white/10 transition-colors cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-4">
                      <Avatar className="w-12 h-12">
                        <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-500">
                          {user.name[0]}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="flex items-center gap-3 mb-1">
                          <span className="text-lg font-semibold text-white">{user.name}</span>
                          <Badge variant="outline" className={getLevelColor(user.level)}>
                            {user.level}级
                          </Badge>
                        </div>
                        <div className="flex items-center gap-4 text-sm text-gray-400">
                          <div className="flex items-center gap-1">
                            <Phone className="w-3 h-3" />
                            {user.phone}
                          </div>
                          <div className="flex items-center gap-1">
                            <Activity className="w-3 h-3" />
                            {user.lastActive}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm text-gray-400 mb-1">用户价值</div>
                      <div className="text-2xl font-bold text-green-400">¥{user.value}</div>
                    </div>
                  </div>
                  <div className="mt-4 flex items-center gap-2">
                    {user.tags.map((tag, index) => (
                      <Badge key={index} variant="outline" className="border-blue-500/30 text-blue-400">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}