"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 { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Users, UserPlus, Tags, Target, Activity, Plus, Edit, Search, Filter } from "lucide-react"
import { TooltipHelp } from "@/components/ui/tooltip-help"
import { TooltipProvider } from "@/components/ui/tooltip"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"

export default function UserPortraitPage() {
  const [selectedSegment, setSelectedSegment] = useState("all")
  const [isAddingUser, setIsAddingUser] = useState(false)
  const [isAddingTag, setIsAddingTag] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")

  // 用户数据
  const [users, setUsers] = useState([
    {
      id: "U001",
      name: "张三",
      phone: "13800138001",
      email: "zhangsan@example.com",
      tags: ["高价值", "活跃用户", "科技爱好者"],
      value: 12580,
      lastActive: "2小时前",
      source: "微信",
      registerDate: "2023-01-15",
    },
    {
      id: "U002",
      name: "李四",
      phone: "13800138002",
      email: "lisi@example.com",
      tags: ["潜在客户", "新用户", "价格敏感"],
      value: 3240,
      lastActive: "1天前",
      source: "抖音",
      registerDate: "2024-01-10",
    },
    {
      id: "U003",
      name: "王五",
      phone: "13800138003",
      email: "wangwu@example.com",
      tags: ["高价值", "忠实用户", "奢侈品偏好"],
      value: 25600,
      lastActive: "30分钟前",
      source: "小红书",
      registerDate: "2022-08-20",
    },
  ])

  // 标签分类数据
  const [tagCategories, setTagCategories] = useState([
    {
      id: "1",
      name: "用户价值",
      description: "基于用户消费能力和贡献度的分类",
      tags: [
        { name: "高价值用户", count: 2847, color: "red" },
        { name: "中价值用户", count: 12456, color: "blue" },
        { name: "低价值用户", count: 8234, color: "gray" },
        { name: "潜在价值用户", count: 5287, color: "yellow" },
      ],
    },
    {
      id: "2",
      name: "活跃度",
      description: "基于用户活跃程度和互动频率的分类",
      tags: [
        { name: "超级活跃", count: 1234, color: "green" },
        { name: "活跃用户", count: 8429, color: "blue" },
        { name: "一般活跃", count: 15678, color: "yellow" },
        { name: "不活跃", count: 3456, color: "gray" },
      ],
    },
    {
      id: "3",
      name: "消费行为",
      description: "基于用户购买习惯和消费偏好的分类",
      tags: [
        { name: "冲动消费", count: 4567, color: "red" },
        { name: "理性消费", count: 12345, color: "blue" },
        { name: "价格敏感", count: 8901, color: "yellow" },
        { name: "品质优先", count: 6789, color: "purple" },
        { name: "奢侈品偏好", count: 2345, color: "pink" },
      ],
    },
    {
      id: "4",
      name: "兴趣偏好",
      description: "基于用户兴趣爱好和内容偏好的分类",
      tags: [
        { name: "科技爱好者", count: 5678, color: "blue" },
        { name: "时尚达人", count: 7890, color: "pink" },
        { name: "旅游爱好者", count: 4321, color: "green" },
        { name: "美食家", count: 6543, color: "orange" },
        { name: "运动健身", count: 3210, color: "red" },
        { name: "文艺青年", count: 2109, color: "purple" },
      ],
    },
    {
      id: "5",
      name: "生命周期",
      description: "基于用户在平台的生命周期阶段分类",
      tags: [
        { name: "新用户", count: 8765, color: "green" },
        { name: "成长期用户", count: 12345, color: "blue" },
        { name: "成熟期用户", count: 15678, color: "purple" },
        { name: "衰退期用户", count: 4321, color: "yellow" },
        { name: "流失用户", count: 2109, color: "gray" },
      ],
    },
    {
      id: "6",
      name: "地域分布",
      description: "基于用户地理位置的分类",
      tags: [
        { name: "一线城市", count: 18765, color: "red" },
        { name: "二线城市", count: 15432, color: "blue" },
        { name: "三线城市", count: 9876, color: "green" },
        { name: "四线及以下", count: 5432, color: "gray" },
        { name: "海外用户", count: 1234, color: "purple" },
      ],
    },
    {
      id: "7",
      name: "设备偏好",
      description: "基于用户使用设备类型的分类",
      tags: [
        { name: "iOS用户", count: 16789, color: "blue" },
        { name: "Android用户", count: 23456, color: "green" },
        { name: "PC用户", count: 8765, color: "gray" },
        { name: "平板用户", count: 4321, color: "purple" },
      ],
    },
    {
      id: "8",
      name: "社交属性",
      description: "基于用户社交行为和影响力的分类",
      tags: [
        { name: "意见领袖", count: 1234, color: "red" },
        { name: "活跃分享者", count: 5678, color: "blue" },
        { name: "默默关注者", count: 18765, color: "gray" },
        { name: "社交新手", count: 8901, color: "green" },
      ],
    },
  ])

  const getTagColor = (color: string) => {
    const colors = {
      red: "bg-red-100 text-red-800",
      blue: "bg-blue-100 text-blue-800",
      green: "bg-green-100 text-green-800",
      yellow: "bg-yellow-100 text-yellow-800",
      purple: "bg-purple-100 text-purple-800",
      pink: "bg-pink-100 text-pink-800",
      orange: "bg-orange-100 text-orange-800",
      gray: "bg-gray-100 text-gray-800",
    }
    return colors[color as keyof typeof colors] || colors.gray
  }

  return (
    <TooltipProvider>
      <div className="container mx-auto p-6 space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold">用户画像</h1>
            <p className="text-muted-foreground mt-2">深度分析用户特征，精准定位目标群体</p>
          </div>
        </div>

        {/* 核心指标概览 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium flex items-center gap-2">
                总用户数
                <TooltipHelp content="系统中所有已识别和分析的用户总数，包括活跃和非活跃用户" />
              </CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">24,563</div>
              <p className="text-xs text-muted-foreground">
                <span className="text-green-600">+12.5%</span> 较上月
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium flex items-center gap-2">
                活跃用户
                <TooltipHelp content="近30天内有过互动行为的用户数量，包括点击、浏览、购买等行为" />
              </CardTitle>
              <Activity className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">18,429</div>
              <p className="text-xs text-muted-foreground">
                <span className="text-green-600">+8.2%</span> 较上月
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium flex items-center gap-2">
                用户分群
                <TooltipHelp content="基于用户行为和特征自动创建的用户群组数量，用于精准营销" />
              </CardTitle>
              <Target className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">156</div>
              <p className="text-xs text-muted-foreground">
                <span className="text-blue-600">+23</span> 新增分群
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium flex items-center gap-2">
                标签覆盖率
                <TooltipHelp content="已打标签用户占总用户的比例，反映用户画像的完整程度" />
              </CardTitle>
              <Tags className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">87.3%</div>
              <p className="text-xs text-muted-foreground">
                <span className="text-green-600">+2.1%</span> 较上月
              </p>
            </CardContent>
          </Card>
        </div>

        <Tabs defaultValue="users" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="users">用户管理</TabsTrigger>
            <TabsTrigger value="tags">标签管理</TabsTrigger>
          </TabsList>

          <TabsContent value="users" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  用户管理
                  <TooltipHelp content="管理真实用户信息，支持添加、编辑和查看用户详细资料" />
                </CardTitle>
                <CardDescription>管理和查看所有真实用户的详细信息</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-4 mb-6">
                  <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder="搜索用户..."
                      className="pl-8 max-w-sm"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                    />
                  </div>
                  <Select value={selectedSegment} onValueChange={setSelectedSegment}>
                    <SelectTrigger className="w-48">
                      <SelectValue placeholder="选择用户分群" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">全部用户</SelectItem>
                      <SelectItem value="high-value">高价值用户</SelectItem>
                      <SelectItem value="active">活跃用户</SelectItem>
                      <SelectItem value="potential">潜在用户</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button variant="outline" size="sm">
                    <Filter className="h-4 w-4 mr-2" />
                    筛选
                  </Button>
                  <Button onClick={() => setIsAddingUser(true)}>
                    <UserPlus className="h-4 w-4 mr-2" />
                    添加用户
                  </Button>
                </div>

                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>用户ID</TableHead>
                      <TableHead>姓名</TableHead>
                      <TableHead>联系方式</TableHead>
                      <TableHead>标签</TableHead>
                      <TableHead>用户价值</TableHead>
                      <TableHead>最后活跃</TableHead>
                      <TableHead>来源</TableHead>
                      <TableHead>操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {users.map((user) => (
                      <TableRow key={user.id}>
                        <TableCell className="font-medium">{user.id}</TableCell>
                        <TableCell>{user.name}</TableCell>
                        <TableCell>
                          <div className="text-sm">
                            <div>{user.phone}</div>
                            <div className="text-muted-foreground">{user.email}</div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex flex-wrap gap-1">
                            {user.tags.slice(0, 2).map((tag, index) => (
                              <Badge key={index} variant="secondary" className="text-xs">
                                {tag}
                              </Badge>
                            ))}
                            {user.tags.length > 2 && (
                              <Badge variant="outline" className="text-xs">
                                +{user.tags.length - 2}
                              </Badge>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>¥{user.value.toLocaleString()}</TableCell>
                        <TableCell>{user.lastActive}</TableCell>
                        <TableCell>
                          <Badge variant="outline">{user.source}</Badge>
                        </TableCell>
                        <TableCell>
                          <div className="flex space-x-2">
                            <Button variant="ghost" size="sm">
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="sm">
                              查看详情
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="tags" className="space-y-6">
            <Card>
              <CardHeader>
                <div className="flex justify-between items-center">
                  <div>
                    <CardTitle className="flex items-center gap-2">
                      标签管理
                      <TooltipHelp content="管理用户标签体系，包括标签创建、分类、规则设置和自动化打标" />
                    </CardTitle>
                    <CardDescription>创建和管理用户标签，实现精准用户画像</CardDescription>
                  </div>
                  <Button onClick={() => setIsAddingTag(true)}>
                    <Plus className="h-4 w-4 mr-2" />
                    新建标签
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  {tagCategories.map((category) => (
                    <Card key={category.id}>
                      <CardHeader className="pb-3">
                        <div className="flex justify-between items-center">
                          <div>
                            <CardTitle className="text-base">{category.name}</CardTitle>
                            <CardDescription>{category.description}</CardDescription>
                          </div>
                          <Badge variant="outline">{category.tags.length} 个标签</Badge>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                          {category.tags.map((tag, index) => (
                            <div
                              key={index}
                              className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50"
                            >
                              <div className="flex items-center gap-2">
                                <Badge className={getTagColor(tag.color)}>{tag.name}</Badge>
                              </div>
                              <div className="text-sm text-muted-foreground">{tag.count.toLocaleString()}</div>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

        {/* 添加用户对话框 */}
        <Dialog open={isAddingUser} onOpenChange={setIsAddingUser}>
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle>添加真实用户</DialogTitle>
              <DialogDescription>录入真实用户信息，完善用户画像数据</DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="user-name" className="text-right">
                  姓名
                </Label>
                <Input id="user-name" className="col-span-3" placeholder="请输入真实姓名" />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="user-phone" className="text-right">
                  手机号
                </Label>
                <Input id="user-phone" className="col-span-3" placeholder="请输入手机号码" />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="user-email" className="text-right">
                  邮箱
                </Label>
                <Input id="user-email" className="col-span-3" placeholder="请输入邮箱地址" />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="user-source" className="text-right">
                  来源渠道
                </Label>
                <Select>
                  <SelectTrigger id="user-source" className="col-span-3">
                    <SelectValue placeholder="选择用户来源" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="wechat">微信</SelectItem>
                    <SelectItem value="douyin">抖音</SelectItem>
                    <SelectItem value="xiaohongshu">小红书</SelectItem>
                    <SelectItem value="website">官网</SelectItem>
                    <SelectItem value="offline">线下</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="grid grid-cols-4 items-start gap-4">
                <Label htmlFor="user-tags" className="text-right pt-2">
                  用户标签
                </Label>
                <Textarea id="user-tags" className="col-span-3" placeholder="请输入用户标签，用逗号分隔" rows={3} />
              </div>
              <div className="grid grid-cols-4 items-start gap-4">
                <Label htmlFor="user-notes" className="text-right pt-2">
                  备注信息
                </Label>
                <Textarea id="user-notes" className="col-span-3" placeholder="用户备注信息" rows={3} />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddingUser(false)}>
                取消
              </Button>
              <Button onClick={() => setIsAddingUser(false)}>
                <UserPlus className="mr-2 h-4 w-4" />
                添加用户
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* 添加标签对话框 */}
        <Dialog open={isAddingTag} onOpenChange={setIsAddingTag}>
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle>新建标签</DialogTitle>
              <DialogDescription>创建新的用户标签，完善标签分类体系</DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="tag-category" className="text-right">
                  标签分类
                </Label>
                <Select>
                  <SelectTrigger id="tag-category" className="col-span-3">
                    <SelectValue placeholder="选择标签分类" />
                  </SelectTrigger>
                  <SelectContent>
                    {tagCategories.map((category) => (
                      <SelectItem key={category.id} value={category.id}>
                        {category.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="tag-name" className="text-right">
                  标签名称
                </Label>
                <Input id="tag-name" className="col-span-3" placeholder="请输入标签名称" />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="tag-color" className="text-right">
                  标签颜色
                </Label>
                <Select>
                  <SelectTrigger id="tag-color" className="col-span-3">
                    <SelectValue placeholder="选择标签颜色" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="red">红色</SelectItem>
                    <SelectItem value="blue">蓝色</SelectItem>
                    <SelectItem value="green">绿色</SelectItem>
                    <SelectItem value="yellow">黄色</SelectItem>
                    <SelectItem value="purple">紫色</SelectItem>
                    <SelectItem value="pink">粉色</SelectItem>
                    <SelectItem value="orange">橙色</SelectItem>
                    <SelectItem value="gray">灰色</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="grid grid-cols-4 items-start gap-4">
                <Label htmlFor="tag-description" className="text-right pt-2">
                  标签描述
                </Label>
                <Textarea id="tag-description" className="col-span-3" placeholder="标签描述信息" rows={3} />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <div className="text-right">
                  <Label htmlFor="auto-tag">自动打标</Label>
                </div>
                <div className="flex items-center space-x-2 col-span-3">
                  <Switch id="auto-tag" />
                  <Label htmlFor="auto-tag">启用自动打标规则</Label>
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddingTag(false)}>
                取消
              </Button>
              <Button onClick={() => setIsAddingTag(false)}>
                <Tags className="mr-2 h-4 w-4" />
                创建标签
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </TooltipProvider>
  )
}
