users/app/platform/ai-assistant/recommendation/page.tsx

"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Target, Users, TrendingUp, Zap, Download, RefreshCw, ArrowRight } from 'lucide-react'

export default function Recommendation() {
  const recommendedCampaigns = [
    {
      id: 1,
      title: '美妆新品推广',
      targetGroup: '高净值女性用户',
      userCount: 856780,
      expectedRevenue: 12850000,
      probability: 82,
      roi: 3.5,
      timeframe: '未来7天',
      actions: ['朋友圈广告', '私聊推送', '限时优惠'],
      priority: 'high'
    },
    {
      id: 2,
      title: '会员升级计划',
      targetGroup: '活跃普通会员',
      userCount: 1285670,
      expectedRevenue: 8560000,
      probability: 75,
      roi: 4.2,
      timeframe: '未来15天',
      actions: ['会员权益推广', '专属优惠', 'VIP体验券'],
      priority: 'high'
    },
    {
      id: 3,
      title: '沉默用户唤醒',
      targetGroup: '30天未活跃用户',
      userCount: 2856780,
      expectedRevenue: 5680000,
      probability: 58,
      roi: 2.8,
      timeframe: '未来30天',
      actions: ['优惠券发放', '新品预告', '个性化推荐'],
      priority: 'medium'
    },
    {
      id: 4,
      title: '交叉销售',
      targetGroup: '单品类购买用户',
      userCount: 1714283,
      expectedRevenue: 9280000,
      probability: 68,
      roi: 3.1,
      timeframe: '未来14天',
      actions: ['关联商品推荐', '搭配优惠', '场景营销'],
      priority: 'medium'
    },
  ]

  const recommendedSegments = [
    {
      name: '高转化潜力群体',
      count: 428567,
      conversion: 35.8,
      value: 580,
      characteristics: ['近期浏览频繁', '价格接受度高', '品牌认知强']
    },
    {
      name: '复购价值用户',
      count: 856780,
      conversion: 28.5,
      value: 420,
      characteristics: ['首购满意度高', '客单价适中', '活跃度稳定']
    },
    {
      name: '裂变传播节点',
      count: 285670,
      conversion: 22.3,
      value: 320,
      characteristics: ['社交影响力大', '分享意愿强', '粉丝基数高']
    },
  ]

  const contentRecommendations = [
    {
      type: '朋友圈内容',
      theme: '新品上市+限时优惠',
      targetUsers: 2856780,
      expectedEngagement: 18.5,
      bestTime: '20:00-22:00'
    },
    {
      type: '私聊话术',
      theme: '专属VIP权益介绍',
      targetUsers: 856780,
      expectedEngagement: 42.8,
      bestTime: '10:00-12:00'
    },
    {
      type: '社群活动',
      theme: '用户互动+抽奖',
      targetUsers: 1285670,
      expectedEngagement: 32.5,
      bestTime: '周末 15:00-17:00'
    },
  ]

  const getPriorityColor = (priority: string) => {
    return priority === 'high' ? 'border-red-500 text-red-600 bg-red-50' : 'border-yellow-500 text-yellow-600 bg-yellow-50'
  }

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-4xl font-bold text-gray-900 mb-2">精准推荐</h1>
          <p className="text-gray-600">AI智能推荐营销策略、目标用户群与内容方案</p>
        </div>
        <div className="flex items-center gap-4">
          <Button variant="outline">
            <RefreshCw className="w-4 h-4 mr-2" />
            刷新推荐
          </Button>
          <Button>
            <Download className="w-4 h-4 mr-2" />
            导出方案
          </Button>
        </div>
      </div>

      {/* 核心指标 */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
        <Card className="bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-gray-600">推荐方案数</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-purple-600">586</div>
            <div className="text-sm text-gray-600">本月生成</div>
          </CardContent>
        </Card>
        <Card className="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-gray-600">平均转化率</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-blue-600">18.5%</div>
            <Badge variant="outline" className="border-green-500 text-green-600 bg-green-50">+3.2%</Badge>
          </CardContent>
        </Card>
        <Card className="bg-gradient-to-br from-green-50 to-green-100 border-green-200">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-gray-600">预计收益</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-green-600">¥36.4M</div>
            <div className="text-sm text-gray-600">近期方案</div>
          </CardContent>
        </Card>
        <Card className="bg-gradient-to-br from-orange-50 to-orange-100 border-orange-200">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-gray-600">平均ROI</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-orange-600">3.4x</div>
            <div className="text-sm text-gray-600">投入产出比</div>
          </CardContent>
        </Card>
      </div>

      {/* 推荐营销方案 */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="text-gray-900 flex items-center gap-2">
            <Target className="w-5 h-5" />
            推荐营销方案
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {recommendedCampaigns.map((campaign) => (
              <div key={campaign.id} className="p-6 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-xl font-bold text-gray-900">{campaign.title}</h3>
                      <Badge variant="outline" className={getPriorityColor(campaign.priority)}>
                        {campaign.priority === 'high' ? '高优先级' : '中优先级'}
                      </Badge>
                      <Badge variant="outline" className="border-gray-300 text-gray-600">
                        {campaign.timeframe}
                      </Badge>
                    </div>
                    <p className="text-gray-600">目标群体: {campaign.targetGroup}</p>
                  </div>
                  <Button>
                    执行方案
                    <ArrowRight className="w-4 h-4 ml-2" />
                  </Button>
                </div>

                <div className="grid grid-cols-4 gap-6 mb-4">
                  <div>
                    <div className="text-sm text-gray-600 mb-1">目标用户数</div>
                    <div className="text-lg font-semibold text-gray-900">{campaign.userCount.toLocaleString()}</div>
                  </div>
                  <div>
                    <div className="text-sm text-gray-600 mb-1">预期收益</div>
                    <div className="text-lg font-semibold text-green-600">¥{(campaign.expectedRevenue / 10000).toFixed(1)}万</div>
                  </div>
                  <div>
                    <div className="text-sm text-gray-600 mb-1">成功概率</div>
                    <div className="text-lg font-semibold text-blue-600">{campaign.probability}%</div>
                  </div>
                  <div>
                    <div className="text-sm text-gray-600 mb-1">预期ROI</div>
                    <div className="text-lg font-semibold text-purple-600">{campaign.roi}x</div>
                  </div>
                </div>

                <div>
                  <div className="text-sm text-gray-600 mb-2">推荐动作</div>
                  <div className="flex flex-wrap gap-2">
                    {campaign.actions.map((action, index) => (
                      <Badge key={index} variant="outline" className="border-blue-300 text-blue-600 bg-blue-50">
                        <Zap className="w-3 h-3 mr-1" />
                        {action}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 推荐目标群体 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        {recommendedSegments.map((segment, index) => (
          <Card key={index}>
            <CardHeader>
              <CardTitle className="text-gray-900 text-lg">{segment.name}</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3 mb-4">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">用户数</span>
                  <span className="text-lg font-semibold text-gray-900">{segment.count.toLocaleString()}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">预期转化率</span>
                  <span className="text-lg font-semibold text-green-600">{segment.conversion}%</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">人均价值</span>
                  <span className="text-lg font-semibold text-blue-600">¥{segment.value}</span>
                </div>
              </div>
              <div className="pt-3 border-t border-gray-200">
                <div className="text-sm text-gray-600 mb-2">群体特征</div>
                <div className="flex flex-wrap gap-2">
                  {segment.characteristics.map((char, i) => (
                    <Badge key={i} variant="outline" className="border-gray-300 text-gray-700 text-xs">
                      {char}
                    </Badge>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 内容推荐 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-gray-900 flex items-center gap-2">
            <TrendingUp className="w-5 h-5" />
            内容推荐
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 gap-4">
            {contentRecommendations.map((content, index) => (
              <div key={index} className="p-4 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg border border-blue-200">
                <div className="flex items-center justify-between mb-3">
                  <div>
                    <h4 className="text-lg font-semibold text-gray-900 mb-1">{content.type}</h4>
                    <p className="text-gray-600">{content.theme}</p>
                  </div>
                  <Badge variant="outline" className="border-purple-500 text-purple-600 bg-purple-50">
                    最佳时间: {content.bestTime}
                  </Badge>
                </div>
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="text-gray-600">目标触达: </span>
                    <span className="font-semibold text-gray-900">{content.targetUsers.toLocaleString()} 人</span>
                  </div>
                  <div>
                    <span className="text-gray-600">预期互动率: </span>
                    <span className="font-semibold text-green-600">{content.expectedEngagement}%</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}