"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Avatar } from "@/components/ui/avatar"
import { ArrowLeft, Edit, User, Activity, DollarSign, Clock, Phone, MessageCircle } from "lucide-react"
import { Progress } from "@/components/ui/progress"

// 模拟用户数据 - 详细版
const getUserDetail = (id: string) => {
  const baseUsers = [
    {
      id: "1",
      name: "张三",
      avatar: "/placeholder.svg?height=80&width=80",
      company: "科技有限公司",
      position: "技术总监",
      email: "zhangsan@example.com",
      phone: "13800138001",
      tags: ["高价值", "活跃用户", "技术决策者", "iPhone用户", "iOS 16.5", "MacBook Pro用户"],
      recency: 1, // 天数
      frequency: 24, // 次数/月
      monetary: 12500, // 元
      rfmScore: 93, // 0-100
      lastActivity: "2023-03-22T08:30:00",
      interactions: [
        { type: "咨询", count: 8, lastDate: "2023-03-22" },
        { type: "产品演示", count: 3, lastDate: "2023-03-15" },
        { type: "技术支持", count: 12, lastDate: "2023-03-20" },
        { type: "培训", count: 1, lastDate: "2023-02-10" },
      ],
      purchaseHistory: [
        { product: "企业版SaaS", date: "2023-01-15", amount: 8500 },
        { product: "技术支持服务", date: "2023-02-20", amount: 3000 },
        { product: "定制开发", date: "2023-03-10", amount: 1000 },
      ],
      wechatAccounts: [
        { id: "wx1", name: "张三的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "活跃"] },
        { id: "wx2", name: "张三工作号", avatar: "/placeholder.svg?height=40&width=40", tags: ["工作账号"] },
      ],
    },
    {
      id: "2",
      name: "李四",
      avatar: "/placeholder.svg?height=80&width=80",
      company: "服务科技公司",
      position: "市场总监",
      email: "lisi@example.com",
      phone: "13900139001",
      tags: ["中价值", "潜在客户", "市场负责人", "Android用户", "MIUI 14", "小米13用户"],
      recency: 5, // 天数
      frequency: 12, // 次数/月
      monetary: 6800, // 元
      rfmScore: 75, // 0-100
      lastActivity: "2023-03-18T10:15:00",
      interactions: [
        { type: "咨询", count: 5, lastDate: "2023-03-18" },
        { type: "产品演示", count: 2, lastDate: "2023-03-10" },
        { type: "市场合作", count: 4, lastDate: "2023-03-05" },
        { type: "方案讨论", count: 1, lastDate: "2023-02-25" },
      ],
      purchaseHistory: [
        { product: "标准版SaaS", date: "2023-02-10", amount: 4800 },
        { product: "增值服务", date: "2023-03-15", amount: 2000 },
      ],
      wechatAccounts: [
        { id: "wx3", name: "李四的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
      ],
    },
    {
      id: "3",
      name: "王五",
      avatar: "/placeholder.svg?height=80&width=80",
      company: "小型创业公司",
      position: "技术主管",
      email: "wangwu@example.com",
      phone: "13700137001",
      tags: ["低价值", "非活跃", "技术团队", "iPhone用户", "iOS 15.6", "iPad用户"],
      recency: 15, // 天数
      frequency: 5, // 次数/月
      monetary: 2200, // 元
      rfmScore: 48, // 0-100
      lastActivity: "2023-03-08T14:20:00",
      interactions: [
        { type: "咨询", count: 3, lastDate: "2023-03-08" },
        { type: "技术支持", count: 2, lastDate: "2023-02-20" },
      ],
      purchaseHistory: [{ product: "基础版SaaS", date: "2023-01-05", amount: 2200 }],
      wechatAccounts: [
        { id: "wx4", name: "王五的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "不活跃"] },
      ],
    },
    {
      id: "4",
      name: "赵六",
      avatar: "/placeholder.svg?height=80&width=80",
      company: "金融科技公司",
      position: "财务总监",
      email: "zhaoliu@example.com",
      phone: "13600136001",
      tags: ["高价值", "活跃用户", "财务决策者", "Android用户", "EMUI 12", "华为P50用户"],
      recency: 2, // 天数
      frequency: 18, // 次数/月
      monetary: 9600, // 元
      rfmScore: 85, // 0-100
      lastActivity: "2023-03-21T09:45:00",
      interactions: [
        { type: "咨询", count: 6, lastDate: "2023-03-21" },
        { type: "产品演示", count: 2, lastDate: "2023-03-15" },
        { type: "方案讨论", count: 8, lastDate: "2023-03-18" },
        { type: "培训", count: 2, lastDate: "2023-02-28" },
      ],
      purchaseHistory: [
        { product: "企业版SaaS", date: "2023-01-20", amount: 7500 },
        { product: "数据分析模块", date: "2023-02-15", amount: 2100 },
      ],
      wechatAccounts: [
        { id: "wx5", name: "赵六的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "活跃"] },
        { id: "wx6", name: "赵六小号", avatar: "/placeholder.svg?height=40&width=40", tags: ["辅助账号"] },
      ],
    },
    {
      id: "5",
      name: "钱七",
      avatar: "/placeholder.svg?height=80&width=80",
      company: "软件服务公司",
      position: "产品经理",
      email: "qianqi@example.com",
      phone: "13500135001",
      tags: ["中价值", "一般活跃", "产品经理", "iPhone用户", "iOS 16.2", "MacBook Air用户"],
      recency: 7, // 天数
      frequency: 10, // 次数/月
      monetary: 5400, // 元
      rfmScore: 68, // 0-100
      lastActivity: "2023-03-16T11:30:00",
      interactions: [
        { type: "咨询", count: 4, lastDate: "2023-03-16" },
        { type: "产品演示", count: 1, lastDate: "2023-03-05" },
        { type: "方案讨论", count: 3, lastDate: "2023-03-10" },
        { type: "需求沟通", count: 2, lastDate: "2023-02-25" },
      ],
      purchaseHistory: [
        { product: "标准版SaaS", date: "2023-02-05", amount: 4800 },
        { product: "增值服务", date: "2023-03-01", amount: 600 },
      ],
      wechatAccounts: [
        { id: "wx7", name: "钱七的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
      ],
    },
  ]

  return baseUsers.find((user) => user.id === id) || baseUsers[0]
}

// RFM评分卡组件
function RFMScoreCard({
  title,
  value,
  maxValue,
  icon,
  description,
  color,
}: {
  title: string
  value: number
  maxValue: number
  icon: React.ReactNode
  description: string
  color: string
}) {
  const percentage = (value / maxValue) * 100

  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex justify-between items-center">
          <CardTitle className="text-sm font-medium">{title}</CardTitle>
          {icon}
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">
          {value}
          {maxValue === 1 ? "" : ""}
        </div>
        <Progress value={percentage} className={`h-2 mt-2 ${color}`} />
      </CardContent>
    </Card>
  )
}

export default function UserPortraitDetail({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [user, setUser] = useState<any>(null)
  const [activeTab, setActiveTab] = useState("profile")

  useEffect(() => {
    // 获取用户详情
    const userDetail = getUserDetail(params.id)
    setUser(userDetail)
  }, [params.id])

  if (!user) {
    return <div className="container mx-auto py-8">加载中...</div>
  }

  // 获取RFM评分对应的背景颜色类
  const getRfmScoreBgClass = (score: number) => {
    if (score >= 81) return "bg-green-100"
    if (score >= 51) return "bg-yellow-100"
    return "bg-red-100"
  }

  // 获取RFM评分对应的文本颜色类
  const getRfmScoreTextClass = (score: number) => {
    if (score >= 81) return "text-green-800"
    if (score >= 51) return "text-yellow-800"
    return "text-red-800"
  }

  // 格式化日期
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
  }

  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex items-center gap-2">
        <Button variant="ghost" size="icon" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <h1 className="text-2xl font-bold tracking-tight">用户画像详情</h1>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="profile">基本信息</TabsTrigger>
          <TabsTrigger value="rfm">RFM估值分析</TabsTrigger>
          <TabsTrigger value="wechat">微信账号</TabsTrigger>
        </TabsList>

        <TabsContent value="profile" className="space-y-6 pt-4">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-1 space-y-6">
              <Card>
                <CardHeader className="text-center">
                  <div className="flex justify-center mb-2">
                    <Avatar className="h-24 w-24">
                      <img src={user.avatar || "/placeholder.svg"} alt={user.name} />
                    </Avatar>
                  </div>
                  <CardTitle>{user.name}</CardTitle>
                  <CardDescription>
                    {user.company} · {user.position}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center gap-2">
                    <User className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm">{user.email}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Phone className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm">{user.phone}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Activity className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm">最近活动：{formatDate(user.lastActivity)}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <MessageCircle className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm">关联微信：{user.wechatAccounts.length}个</span>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button className="w-full">
                    <Edit className="mr-2 h-4 w-4" />
                    编辑用户信息
                  </Button>
                </CardFooter>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>用户标签</CardTitle>
                  <CardDescription>用户的特征标签</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {user.tags.map((tag: string, index: number) => (
                      <Badge key={index} variant="secondary">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>互动记录</CardTitle>
                  <CardDescription>用户最近的互动情况</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {user.interactions.map((interaction: any, index: number) => (
                    <div key={index} className="flex justify-between items-center pb-2 border-b">
                      <div>
                        <p className="font-medium">{interaction.type}</p>
                        <p className="text-xs text-muted-foreground">最近：{interaction.lastDate}</p>
                      </div>
                      <Badge variant="outline">{interaction.count}次</Badge>
                    </div>
                  ))}
                </CardContent>
              </Card>
            </div>

            <div className="lg:col-span-2 space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>购买历史</CardTitle>
                  <CardDescription>用户的产品购买记录</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="rounded-md border">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead>
                        <tr>
                          <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            产品
                          </th>
                          <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            日期
                          </th>
                          <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            金额
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {user.purchaseHistory.map((purchase: any, index: number) => (
                          <tr key={index}>
                            <td className="px-4 py-4 whitespace-nowrap">{purchase.product}</td>
                            <td className="px-4 py-4 whitespace-nowrap">{purchase.date}</td>
                            <td className="px-4 py-4 whitespace-nowrap text-right">
                              ¥{purchase.amount.toLocaleString()}
                            </td>
                          </tr>
                        ))}
                        <tr className="bg-gray-50">
                          <td className="px-4 py-4 whitespace-nowrap font-medium" colSpan={2}>
                            总计
                          </td>
                          <td className="px-4 py-4 whitespace-nowrap text-right font-bold">
                            ¥
                            {user.purchaseHistory
                              .reduce((total: number, purchase: any) => total + purchase.amount, 0)
                              .toLocaleString()}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>用户行为分析</CardTitle>
                  <CardDescription>基于用户行为数据的分析</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <h3 className="text-sm font-medium">行为特征</h3>
                    <div className="p-3 rounded-md bg-blue-50">
                      <p className="text-sm text-blue-800">
                        {user.rfmScore >= 81
                          ? "该用户是高度活跃的价值客户，对产品功能有深入了解，经常与团队互动并提供反馈。"
                          : user.rfmScore >= 51
                            ? "该用户展现出持续的参与意愿，使用核心功能，但尚未充分利用产品的全部价值。"
                            : "该用户参与度较低，使用频率不高，需要主动引导以提升产品使用价值。"}
                      </p>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <h3 className="text-sm font-medium">建议行动</h3>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="border rounded-md p-3">
                        <p className="text-sm font-medium">短期行动</p>
                        <ul className="mt-2 space-y-1">
                          {user.rfmScore >= 81 ? (
                            <>
                              <li className="text-xs">• 提供专属客户成功经理</li>
                              <li className="text-xs">• 邀请参与产品路线图讨论</li>
                              <li className="text-xs">• 考虑提供战略合作机会</li>
                            </>
                          ) : user.rfmScore >= 51 ? (
                            <>
                              <li className="text-xs">• 安排深度产品培训</li>
                              <li className="text-xs">• 定期分享使用最佳实践</li>
                              <li className="text-xs">• 提供个性化的功能推荐</li>
                            </>
                          ) : (
                            <>
                              <li className="text-xs">• 提供入门指南和基础培训</li>
                              <li className="text-xs">• 发送使用提醒和简单教程</li>
                              <li className="text-xs">• 收集反馈了解痛点</li>
                            </>
                          )}
                        </ul>
                      </div>
                      <div className="border rounded-md p-3">
                        <p className="text-sm font-medium">长期策略</p>
                        <ul className="mt-2 space-y-1">
                          {user.rfmScore >= 81 ? (
                            <>
                              <li className="text-xs">• 建立战略合作伙伴关系</li>
                              <li className="text-xs">• 开发定制化解决方案</li>
                              <li className="text-xs">• 邀请参与早期测试计划</li>
                            </>
                          ) : user.rfmScore >= 51 ? (
                            <>
                              <li className="text-xs">• 发展为高价值客户</li>
                              <li className="text-xs">• 提供升级路径和方案</li>
                              <li className="text-xs">• 增加产品使用深度</li>
                            </>
                          ) : (
                            <>
                              <li className="text-xs">• 培养参与度提升频率</li>
                              <li className="text-xs">• 提供简化版功能体验</li>
                              <li className="text-xs">• 定期回访了解需求变化</li>
                            </>
                          )}
                        </ul>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="rfm" className="space-y-6 pt-4">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <div>
                  <CardTitle>RFM估值模型分析</CardTitle>
                  <CardDescription>综合用户价值评估</CardDescription>
                </div>
                <div className={`px-4 py-2 rounded-full ${getRfmScoreBgClass(user.rfmScore)}`}>
                  <span className={`text-lg font-bold ${getRfmScoreTextClass(user.rfmScore)}`}>{user.rfmScore}</span>
                  <span className={`text-sm ml-1 ${getRfmScoreTextClass(user.rfmScore)}`}>/ 100</span>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <RFMScoreCard
                  title="R - 最近度"
                  value={user.recency}
                  maxValue={30}
                  icon={<Clock className="h-4 w-4 text-blue-500" />}
                  description="最近一次互动的天数"
                  color="bg-blue-500"
                />
                <RFMScoreCard
                  title="F - 频率"
                  value={user.frequency}
                  maxValue={30}
                  icon={<Activity className="h-4 w-4 text-purple-500" />}
                  description="每月互动次数"
                  color="bg-purple-500"
                />
                <RFMScoreCard
                  title="M - 金额"
                  value={user.monetary}
                  maxValue={15000}
                  icon={<DollarSign className="h-4 w-4 text-green-500" />}
                  description="消费金额(元)"
                  color="bg-green-500"
                />
              </div>

              <div className="mt-6 space-y-4">
                <h3 className="text-lg font-medium">RFM分析解读</h3>

                <div className="space-y-4">
                  <div className="p-4 border rounded-md">
                    <h4 className="font-medium mb-2">R值分析 - 最近度</h4>
                    <p className="text-sm text-gray-600">
                      {user.recency <= 3
                        ? "用户近期有活动，保持高度活跃。"
                        : user.recency <= 10
                          ? "用户最近活动频率适中，需要保持关注。"
                          : "用户较长时间未活动，存在流失风险。"}
                    </p>
                    <div className="mt-2">
                      <div className="flex justify-between text-xs text-gray-500 mb-1">
                        <span>高风险</span>
                        <span>低风险</span>
                      </div>
                      <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
                        <div
                          className="h-full bg-blue-500 rounded-full"
                          style={{ width: `${100 - (user.recency / 30) * 100}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>

                  <div className="p-4 border rounded-md">
                    <h4 className="font-medium mb-2">F值分析 - 频率</h4>
                    <p className="text-sm text-gray-600">
                      {user.frequency >= 20
                        ? "用户互动频率非常高，是核心用户。"
                        : user.frequency >= 10
                          ? "用户互动频率良好，有较强的参与度。"
                          : "用户互动频率较低，需要提升参与度。"}
                    </p>
                    <div className="mt-2">
                      <div className="flex justify-between text-xs text-gray-500 mb-1">
                        <span>低频率</span>
                        <span>高频率</span>
                      </div>
                      <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
                        <div
                          className="h-full bg-purple-500 rounded-full"
                          style={{ width: `${(user.frequency / 30) * 100}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>

                  <div className="p-4 border rounded-md">
                    <h4 className="font-medium mb-2">M值分析 - 金额</h4>
                    <p className="text-sm text-gray-600">
                      {user.monetary >= 10000
                        ? "用户消费金额高，是高价值客户。"
                        : user.monetary >= 5000
                          ? "用户消费金额中等，有提升空间。"
                          : "用户消费金额较低，需要刺激消费。"}
                    </p>
                    <div className="mt-2">
                      <div className="flex justify-between text-xs text-gray-500 mb-1">
                        <span>低消费</span>
                        <span>高消费</span>
                      </div>
                      <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
                        <div
                          className="h-full bg-green-500 rounded-full"
                          style={{ width: `${(user.monetary / 15000) * 100}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="p-4 border rounded-md bg-gray-50 mt-4">
                  <h4 className="font-medium mb-2">用户分群结果</h4>
                  <div className="flex items-center gap-2">
                    <Badge className={getRfmScoreBgClass(user.rfmScore)}>
                      <span className={getRfmScoreTextClass(user.rfmScore)}>
                        {user.rfmScore >= 81 ? "高价值用户" : user.rfmScore >= 51 ? "中价值用户" : "低价值用户"}
                      </span>
                    </Badge>
                    <span className="text-sm text-gray-600">
                      {user.rfmScore >= 81
                        ? "需要重点维护的核心客户"
                        : user.rfmScore >= 51
                          ? "有发展潜力的成长客户"
                          : "需要激活的沉睡客户"}
                    </span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>价值提升策略</CardTitle>
              <CardDescription>基于RFM模型的用户价值提升建议</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="p-4 border rounded-md">
                    <h4 className="font-medium mb-2">营销策略建议</h4>
                    <ul className="space-y-2">
                      {user.rfmScore >= 81 ? (
                        <>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-green-500 mt-0.5">•</span>
                            <span>提供专属VIP服务和优先支持</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-green-500 mt-0.5">•</span>
                            <span>邀请参与新产品测试和反馈</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-green-500 mt-0.5">•</span>
                            <span>提供专属定制化解决方案</span>
                          </li>
                        </>
                      ) : user.rfmScore >= 51 ? (
                        <>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-yellow-500 mt-0.5">•</span>
                            <span>提供产品升级优惠和增值服务</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-yellow-500 mt-0.5">•</span>
                            <span>定期分享使用技巧和最佳实践</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-yellow-500 mt-0.5">•</span>
                            <span>提供个性化的功能推荐</span>
                          </li>
                        </>
                      ) : (
                        <>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-red-500 mt-0.5">•</span>
                            <span>提供限时优惠和特别促销</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-red-500 mt-0.5">•</span>
                            <span>发送使用提醒和简单教程</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-red-500 mt-0.5">•</span>
                            <span>提供基础培训和入门指导</span>
                          </li>
                        </>
                      )}
                    </ul>
                  </div>

                  <div className="p-4 border rounded-md">
                    <h4 className="font-medium mb-2">价值提升路径</h4>
                    <ul className="space-y-2">
                      {user.rfmScore >= 81 ? (
                        <>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-green-500 mt-0.5">•</span>
                            <span>发展战略合作伙伴关系</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-green-500 mt-0.5">•</span>
                            <span>探索更多业务合作机会</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-green-500 mt-0.5">•</span>
                            <span>建立长期稳定的合作模式</span>
                          </li>
                        </>
                      ) : user.rfmScore >= 51 ? (
                        <>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-yellow-500 mt-0.5">•</span>
                            <span>提高产品使用深度和广度</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-yellow-500 mt-0.5">•</span>
                            <span>增加用户互动频率和质量</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-yellow-500 mt-0.5">•</span>
                            <span>引导用户尝试高级功能</span>
                          </li>
                        </>
                      ) : (
                        <>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-red-500 mt-0.5">•</span>
                            <span>重新激活用户兴趣和参与度</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-red-500 mt-0.5">•</span>
                            <span>提供简化版功能体验</span>
                          </li>
                          <li className="text-sm flex items-start gap-2">
                            <span className="text-red-500 mt-0.5">•</span>
                            <span>了解用户需求变化和痛点</span>
                          </li>
                        </>
                      )}
                    </ul>
                  </div>
                </div>

                <div className="p-4 border rounded-md mt-4">
                  <h4 className="font-medium mb-2">预期效果</h4>
                  <p className="text-sm text-gray-600">
                    {user.rfmScore >= 81
                      ? "通过深化合作关系，预计可以提升客户忠诚度，增加高价值服务的采购，并发展为长期战略合作伙伴。"
                      : user.rfmScore >= 51
                        ? "通过提升产品使用深度和增值服务，预计可以提高客户满意度，增加产品使用频率，逐步提升客户价值。"
                        : "通过重新激活用户兴趣，预计可以提高用户活跃度，减少流失风险，逐步引导用户成为活跃客户。"}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="wechat" className="space-y-6 pt-4">
          <Card>
            <CardHeader>
              <CardTitle>关联微信账号</CardTitle>
              <CardDescription>用户关联的微信账号列表</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {user.wechatAccounts.map((account: any) => (
                  <div key={account.id} className="flex items-center justify-between p-4 border rounded-md">
                    <div className="flex items-center gap-4">
                      <Avatar className="h-12 w-12">
                        <img src={account.avatar || "/placeholder.svg"} alt={account.name} />
                      </Avatar>
                      <div>
                        <p className="font-medium">{account.name}</p>
                        <div className="flex gap-1 mt-1">
                          {account.tags.map((tag: string, index: number) => (
                            <Badge key={index} variant="secondary" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    </div>
                    <Button variant="outline" size="sm">
                      查看详情
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
            <CardFooter>
              <Button variant="outline" className="w-full">
                <MessageCircle className="mr-2 h-4 w-4" />
                添加关联微信账号
              </Button>
            </CardFooter>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>微信互动历史</CardTitle>
              <CardDescription>用户通过微信的互动记录</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead>
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        微信账号
                      </th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        互动类型
                      </th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        时间
                      </th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        内容
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {/* 模拟数据 */}
                    <tr>
                      <td className="px-4 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="flex-shrink-0 h-8 w-8 mr-2">
                            <img
                              className="h-8 w-8 rounded-full"
                              src={user.wechatAccounts[0]?.avatar || "/placeholder.svg"}
                              alt=""
                            />
                          </div>
                          <div className="text-sm font-medium text-gray-900">{user.wechatAccounts[0]?.name}</div>
                        </div>
                      </td>
                      <td className="px-4 py-4 whitespace-nowrap">
                        <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                          消息
                        </span>
                      </td>
                      <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-18 14:30</td>
                      <td className="px-4 py-4 text-sm text-gray-500">咨询产品功能和价格</td>
                    </tr>
                    <tr>
                      <td className="px-4 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="flex-shrink-0 h-8 w-8 mr-2">
                            <img
                              className="h-8 w-8 rounded-full"
                              src={user.wechatAccounts[0]?.avatar || "/placeholder.svg"}
                              alt=""
                            />
                          </div>
                          <div className="text-sm font-medium text-gray-900">{user.wechatAccounts[0]?.name}</div>
                        </div>
                      </td>
                      <td className="px-4 py-4 whitespace-nowrap">
                        <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                          朋友圈
                        </span>
                      </td>
                      <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-15 09:45</td>
                      <td className="px-4 py-4 text-sm text-gray-500">点赞公司发布的新产品介绍</td>
                    </tr>
                    {user.wechatAccounts.length > 1 && (
                      <tr>
                        <td className="px-4 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <div className="flex-shrink-0 h-8 w-8 mr-2">
                              <img
                                className="h-8 w-8 rounded-full"
                                src={user.wechatAccounts[1]?.avatar || "/placeholder.svg"}
                                alt=""
                              />
                            </div>
                            <div className="text-sm font-medium text-gray-900">{user.wechatAccounts[1]?.name}</div>
                          </div>
                        </td>
                        <td className="px-4 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                            群聊
                          </span>
                        </td>
                        <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-10 16:20</td>
                        <td className="px-4 py-4 text-sm text-gray-500">在技术交流群中分享使用经验</td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
