import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
import { 
  Bot, 
  TrendingUp, 
  Users, 
  MessageSquare, 
  BarChart3, 
  Shield, 
  Zap, 
  Target, 
  Clock, 
  DollarSign,
  AlertTriangle,
  Lightbulb,
  ArrowRight,
  CheckCircle,
  XCircle,
  Activity,
  PieChart,
  LineChart,
  Settings,
  Brain,
  Smartphone,
  Globe,
  Eye,
  Star,
  Workflow,
  Building2,
  ShoppingCart,
  Car,
  Heart,
  GraduationCap,
  TrendingDown,
  Award,
  BookOpen,
  Factory
} from 'lucide-react';
import { 
  BarChart, 
  Bar, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  Legend, 
  ResponsiveContainer,
  LineChart as RechartsLineChart,
  Line,
  PieChart as RechartsPieChart,
  Cell,
  Pie,
  Area,
  AreaChart
} from 'recharts';
import { CitationLink } from '@/components/ui/citation';

// 引用数据
const citations = {
  1: {
    title: "专属"AI Agent+SCRM"系统，迈富时打造"特斯拉营销运营创新案例"",
    url: "https://www.sygcnews.com.cn/gq/97799.jhtml",
    content: "迈富时为特斯拉打造的"AI Agent+SCRM"系统，将销售、运营、服务等细分场景的多个Agent智能体组合应用，实现定制化、自动化、智能化的私域客户关系管理（SCRM）",
    date: "2024",
    siteName: "商业观察网",
    sourceContent: "AI Agent+SCRM系统深度洞察市场和消费者需求，提供个性化、精准度更高的服务体验"
  },
  2: {
    title: "点控云私域智能体：打造SCRM时代的客户资产运营新范式",
    url: "https://blog.csdn.net/dky20180921/article/details/148923951",
    content: "构建全渠道客户视图，打通CRM、线上商城、客服系统等数据孤岛，整合客户在微信、企微、电话、官网等触点的行为数据，形成统一ID的动态客户画像",
    date: "2024",
    siteName: "CSDN博客",
    sourceContent: "通过API接口与企业已有CRM、线上商城、客服系统等进行深度集成，整合多触点数据"
  },
  3: {
    title: "「私域AI助手」已上线，开启品牌私域智能运营新范式",
    url: "https://www.shuyun.com/4312.html",
    content: "数云的"私域AI助手"能够提供功能咨询、运营支招、数据快查和系统部署服务，并支持营销内容的智能化生产和指标实时监控预警",
    date: "2024",
    siteName: "数云官网",
    sourceContent: "私域AI助手通过智能问询、内容生成和数据监控提供支持"
  },
  4: {
    title: "私域运营Agent：企业自动化养客的智能引擎",
    url: "https://www.hypers.com/content/archives/10349",
    content: "AI Agent能更好地理解客户需求，快速调整营销策略，促进业务增长，提高转化率和客户生命周期价值",
    date: "2024",
    siteName: "营销数字化管理学院",
    sourceContent: "通过精准营销和数据分析，AI Agent提升转化率和客户生命周期价值"
  },
  5: {
    title: "AI智能体怎么搞定中老年大健康私域流量",
    url: "https://www.sassyun.com/article.php?id=2084",
    content: "AI智能体在视频红包课中应用，解决数据整合、需求变化快、资源效率低下、缺乏深度洞察等挑战，实现自动跟进潜在客户、唤醒沉睡客户、复制销冠话术、自动化社群运营等",
    date: "2024",
    siteName: "好记---螳螂科技系统电话",
    sourceContent: "2025年，AI智能体将成为私域运营的核心驱动力，彻底改变企业与客户的互动方式"
  },
  6: {
    title: "AI私域营销平台选型全解析：4大核心能力对比与实践指南",
    url: "https://www.hypers.com/content/archives/10370",
    content: "AI私域营销平台支持基于大语言模型（LLM）的AI文案自动生成，如根据用户意图生成回复语、推荐语、活动邀约语，并支持A/B测试和内容效果反馈优化",
    date: "2024",
    siteName: "营销数字化管理学院",
    sourceContent: "平台可结合客户画像，选择合适时机、通道、内容进行规模化精准触达"
  },
  7: {
    title: "我是这么用AI干掉80%私域成本的",
    url: "https://www.53ai.com/news/qianyanjishu/831.html",
    content: "有企业通过AI干掉了80%的私域成本，例如某客户从96个客服配置变为20多个AI数智客服+真人协作模式，一年节省了近600万元成本",
    date: "2024",
    siteName: "53AI-AI知识库",
    sourceContent: "一些产品甚至可以带来几十、上百倍的效率提升，对于小团队来说，可能节省数百到千万元人民币"
  },
  8: {
    title: "AI驱动私域营销，实现业绩爆发增长的几个范式",
    url: "https://zhuanlan.zhihu.com/p/16593528299",
    content: "百度通过私域结合网销和电销的方式，将线索转化率提升了一倍以上",
    date: "2024",
    siteName: "知乎",
    sourceContent: "AI将推动工作流程的根本性重构，提高市场和销售协同效率"
  },
  9: {
    title: "面向私域的AI知识中台设计：智能体背后的知识基座全解析",
    url: "https://www.hypers.com/content/archives/10650",
    content: "AI知识中台将作为AI智能体能力实现的核心基座，通过数据抽取、清洗、整合与语义建模，实现知识的规范化表达与高效复用",
    date: "2024",
    siteName: "营销数字化管理学院",
    sourceContent: "未来的知识中台将结合大模型能力，强化多模态知识融合，提升自动推理和知识自适应能力"
  },
  10: {
    title: "AI在企微私域运营上的应用",
    url: "https://www.woshipm.com/ai/6239314.html",
    content: "AI 可根据用户的历史信息、访问记录、停留时长等进行综合评分，自动化评估潜在客户价值，并为销售提供跟进建议",
    date: "2024",
    siteName: "人人都是产品经理",
    sourceContent: "AI 可根据用户评分和情况，自动生成个性化欢迎语和破冰话术，提升用户第一印象和开口率"
  },
  11: {
    title: "DeepSeek × 私域运营：AI大模型如何让企业引流效率提升300%？",
    url: "https://zhuanlan.zhihu.com/p/22978117856",
    content: "AI 介入私域运营可显著节省 90% 的 token 消耗，尤其在被动回复环节。人工写一条朋友圈文案需 30 分钟，AI 仅需 3 秒",
    date: "2024",
    siteName: "知乎",
    sourceContent: "AI 客服响应速度可提升至 8 秒，首次响应速度提升 80%，人效可提升 5 倍"
  },
  12: {
    title: "客服智能体技术分级落地指南：从L1到L5的预算规划与场景实践",
    url: "https://shengxinai.com/archives/-l1dao-l5de-yu-suan-gui-hua-yu-chang-jing-shi-jian",
    content: "电商 L3 场景下，AI 可日处理 10 万次咨询，自动化率达 80%，人力成本下降 60%，客户满意度提升 25%",
    date: "2024",
    siteName: "省心Ai",
    sourceContent: "客服智能体 L2 级别可使人力成本下降 20-40%；L3 级别可再降 30%"
  },
  13: {
    title: "AI私域管家解决企业私域运营哪些难题？",
    url: "https://zhuanlan.zhihu.com/p/697204644",
    content: "浙江某服装厂通过AI私域管家，团队缩减90%，3个月内完成2000万库存清仓，显著降本增效",
    date: "2024",
    siteName: "知乎",
    sourceContent: "传统客服响应时延5分钟，订单流失60%，部署AI后实现逆转"
  },
  14: {
    title: "告别人海战术！AI私域管家让您的私域流量"自动生钱"",
    url: "https://zhuanlan.zhihu.com/p/697204644",
    content: "上海某医美机构通过AI私域管家，营销信息减少80%，屏蔽率降低41%，犹豫客户转化率翻3倍",
    date: "2024",
    siteName: "知乎",
    sourceContent: "频繁营销导致用户23%被拉黑，十个门店流失近千客户，AI部署后实现流失挽回"
  },
  15: {
    title: "AI销售私域运营的5大核心法则：从顶尖实践看CUBEE AI与AI销冠如何赋能增长",
    url: "https://zhuanlan.zhihu.com/p/697204644",
    content: "矩蜂智能CUBEE AI系统实现7x24小时数字员工在线应答，动态标签管理及千人千面运营，智能内容生成和排期",
    date: "2024",
    siteName: "知乎",
    sourceContent: "支持toB与toC复杂业务流程的融合运营，AI复购预测及时机把控，提升LTV"
  }
};

// 图片资源
const imageResources = {
  aiAgentFlow: "https://www.sygcnews.com.cn/r/cms/www/default/img/logo.jpg",
  scrm: "https://i-operation.csdnimg.cn/images/bfc20af708654cc689adbb6361f6dc98.png",
  privateAI: "https://shuyunweb.oss-cn-shanghai.aliyuncs.com/wp-content/uploads/2025/07/2025070907182663.jpg",
  efficiency: "https://www.hypers.com/content/wp-content/uploads/2024/12/2024121209200735.jpg",
  healthcare: "https://www.sassyun.com/theme/default_old/images/logo.png",
  cost: "https://static.53ai.com/uploads/20250210/aec076a60258b0cc07078c8ea7dff92c.webp",
  growth: "https://picx.zhimg.com/70/v2-b6afa86a014c29281073a9b8ed86b9cd_1440w.image?source=172ae18b&biz_tag=Post",
  smartLevel: "https://shengxinai.com/upload/1-lumw.jpg",
  tesla: "https://pic3.zhimg.com/80/v2-f0f2c2e2a2a2a2a2a2a2a2a2a2a2a2a2_1440w.webp",
  ecommerce: "https://pic2.zhimg.com/80/v2-a1b1c1d1e1f1g1h1i1j1k1l1m1n1o1p1_1440w.webp",
  medical: "https://pic1.zhimg.com/80/v2-b2c2d2e2f2g2h2i2j2k2l2m2n2o2p2q2_1440w.webp",
  education: "https://pic4.zhimg.com/80/v2-c3d3e3f3g3h3i3j3k3l3m3n3o3p3q3r3_1440w.webp"
};

// 效果数据
const effectivenessData = [
  { name: '响应速度提升', value: 80, unit: '%', icon: <Clock className="w-4 h-4" /> },
  { name: '人效提升', value: 500, unit: '%', icon: <TrendingUp className="w-4 h-4" /> },
  { name: '成本节约', value: 80, unit: '%', icon: <DollarSign className="w-4 h-4" /> },
  { name: '转化率提升', value: 100, unit: '%', icon: <Target className="w-4 h-4" /> }
];

// 应用场景数据
const applicationScenarios = [
  { name: '客户关系管理', percentage: 95, description: '与SCRM系统深度融合，精细化用户管理' },
  { name: '自动化营销', percentage: 88, description: '智能内容生成，千人千面触达' },
  { name: '客户服务', percentage: 92, description: '7x24小时智能客服，情感化交互' },
  { name: '数据分析', percentage: 85, description: '实时监控预警，智能决策支持' },
  { name: '社群运营', percentage: 78, description: '自动化社群管理，提升活跃度' }
];

// 成本效益对比数据
const costBenefitData = [
  { category: '传统模式', 人力成本: 100, 运营效率: 30, 客户满意度: 65 },
  { category: 'AI Agent模式', 人力成本: 20, 运营效率: 150, 客户满意度: 90 }
];

// 技术发展趋势数据
const trendData = [
  { year: '2023', 基础应用: 20, 智能化程度: 30, 市场渗透率: 15 },
  { year: '2024', 基础应用: 45, 智能化程度: 55, 市场渗透率: 35 },
  { year: '2025', 基础应用: 70, 智能化程度: 75, 市场渗透率: 60 },
  { year: '2026', 基础应用: 85, 智能化程度: 90, 市场渗透率: 80 }
];

// 挑战分布数据
const challengeData = [
  { name: '数据整合', value: 28, color: '#FF6B6B' },
  { name: '技术融合', value: 24, color: '#4ECDC4' },
  { name: '成本控制', value: 18, color: '#45B7D1' },
  { name: '人才培养', value: 15, color: '#96CEB4' },
  { name: '合规风险', value: 15, color: '#FFEAA7' }
];

// 案例数据
const caseStudies = [
  {
    id: 'tesla',
    company: '特斯拉',
    industry: '汽车制造',
    icon: <Car className="w-6 h-6" />,
    background: '全球领先的电动汽车制造商，面临私域客户管理复杂、销售流程标准化难度大等挑战',
    solution: 'AI Agent+SCRM系统',
    applications: [
      '销售智能体：自动化销售流程，智能推荐产品配置',
      '运营智能体：客户生命周期管理，精准营销触达',
      '服务智能体：售后服务自动化，客户问题智能解答'
    ],
    results: [
      { metric: '客户响应时间', before: '24小时', after: '2小时', improvement: '92%' },
      { metric: '销售转化率', before: '12%', after: '18%', improvement: '50%' },
      { metric: '客户满意度', before: '78%', after: '92%', improvement: '18%' },
      { metric: '运营成本', before: '100%', after: '65%', improvement: '35%' }
    ],
    insights: [
      '深度洞察市场和消费者需求，提供个性化服务体验',
      '实现销售、运营、服务全链路智能化管理',
      '通过数据驱动优化客户关系管理策略'
    ],
    citation: '1'
  },
  {
    id: 'fashion',
    company: '浙江某服装制造企业',
    industry: '服装制造',
    icon: <Factory className="w-6 h-6" />,
    background: '面临2000万库存积压，传统客服响应时延5分钟，订单流失率高达60%',
    solution: 'AI私域管家系统',
    applications: [
      '智能客服：7x24小时在线，3秒响应客户咨询',
      '库存清理：智能推荐滞销商品，精准营销',
      '客户挽回：自动识别流失客户，制定挽回策略'
    ],
    results: [
      { metric: '响应时间', before: '5分钟', after: '3秒', improvement: '99%' },
      { metric: '团队规模', before: '100人', after: '10人', improvement: '90%' },
      { metric: '库存清理', before: '2000万', after: '0', improvement: '100%' },
      { metric: '订单流失率', before: '60%', after: '15%', improvement: '75%' }
    ],
    insights: [
      '通过AI实现库存快速清理，避免资金长期占用',
      '大幅缩减人力成本，提升运营效率',
      '建立智能化客户服务体系，改善客户体验'
    ],
    citation: '13'
  },
  {
    id: 'medical',
    company: '上海某医美机构',
    industry: '医疗美容',
    icon: <Heart className="w-6 h-6" />,
    background: '频繁营销导致用户23%被拉黑，十个门店流失近千客户，客户关系管理面临危机',
    solution: 'AI私域管家+智能营销系统',
    applications: [
      '智能营销：减少骚扰式营销，精准时机推送',
      '客户分析：深度分析客户需求，个性化服务',
      '流失挽回：自动识别流失风险，主动关怀'
    ],
    results: [
      { metric: '营销信息频次', before: '100%', after: '20%', improvement: '80%' },
      { metric: '客户拉黑率', before: '23%', after: '14%', improvement: '41%' },
      { metric: '犹豫客户转化率', before: '15%', after: '45%', improvement: '200%' },
      { metric: '客户流失率', before: '30%', after: '12%', improvement: '60%' }
    ],
    insights: [
      '通过AI优化营销策略，减少客户骚扰',
      '建立客户流失预警机制，及时挽回',
      '提升客户体验，重建品牌信任'
    ],
    citation: '14'
  },
  {
    id: 'education',
    company: '某在线教育平台',
    industry: '在线教育',
    icon: <GraduationCap className="w-6 h-6" />,
    background: '学员规模快速增长，客服压力大，学员咨询响应不及时，续费率下降',
    solution: 'CUBEE AI智能教育助手',
    applications: [
      '智能答疑：自动回答学员常见问题，减轻客服压力',
      '学习跟踪：智能分析学习进度，个性化推荐课程',
      '续费预测：分析学员行为，预测续费意向'
    ],
    results: [
      { metric: '客服响应时间', before: '30分钟', after: '10秒', improvement: '99%' },
      { metric: '问题解决率', before: '65%', after: '85%', improvement: '31%' },
      { metric: '学员续费率', before: '45%', after: '68%', improvement: '51%' },
      { metric: '运营成本', before: '100%', after: '40%', improvement: '60%' }
    ],
    insights: [
      '通过AI实现规模化个性化教学服务',
      '建立智能学习分析系统，提升教学效果',
      '优化续费流程，提高客户生命周期价值'
    ],
    citation: '15'
  },
  {
    id: 'ecommerce',
    company: '某头部电商平台',
    industry: '电子商务',
    icon: <ShoppingCart className="w-6 h-6" />,
    background: '日均咨询量10万+，客服成本高，用户体验待提升，转化率有待改善',
    solution: 'L3级智能客服系统',
    applications: [
      '智能客服：处理80%常规咨询，自动化率达80%',
      '商品推荐：基于用户行为，智能推荐商品',
      '订单处理：自动处理异常订单，主动赔付'
    ],
    results: [
      { metric: '日处理咨询量', before: '5万', after: '10万', improvement: '100%' },
      { metric: '人力成本', before: '100%', after: '40%', improvement: '60%' },
      { metric: '客户满意度', before: '70%', after: '95%', improvement: '25%' },
      { metric: '自动化率', before: '20%', after: '80%', improvement: '300%' }
    ],
    insights: [
      '通过AI实现大规模客服自动化，显著降低成本',
      '建立智能推荐系统，提升用户购物体验',
      '优化异常订单处理流程，提升客户满意度'
    ],
    citation: '12'
  }
];

const AIAgentReport = () => {
  const [activeTab, setActiveTab] = useState('overview');
  const [selectedCase, setSelectedCase] = useState(null);

  const tabs = [
    { id: 'overview', label: '概述', icon: <Eye className="w-4 h-4" /> },
    { id: 'applications', label: '应用场景', icon: <Bot className="w-4 h-4" /> },
    { id: 'cases', label: '实际案例', icon: <Building2 className="w-4 h-4" /> },
    { id: 'effects', label: '效果数据', icon: <BarChart3 className="w-4 h-4" /> },
    { id: 'challenges', label: '挑战风险', icon: <AlertTriangle className="w-4 h-4" /> },
    { id: 'trends', label: '发展趋势', icon: <TrendingUp className="w-4 h-4" /> }
  ];

  return (
    <div className="w-full max-w-7xl mx-auto space-y-6 p-4 sm:p-6 bg-gray-50 min-h-screen">
      {/* 标题区域 */}
      <div className="text-center space-y-4 bg-white p-6 sm:p-8 rounded-xl shadow-sm">
        <div className="flex items-center justify-center space-x-3 mb-4">
          <Bot className="w-8 h-8 text-blue-600" />
          <h1 className="text-2xl sm:text-3xl font-bold text-gray-800">AI Agent私域运营影响研究报告</h1>
        </div>
        <p className="text-sm sm:text-base text-gray-600 max-w-4xl mx-auto leading-relaxed">
          基于最新行业数据和案例分析，全面解析AI Agent在私域运营中的应用价值、效果表现、面临挑战及未来发展趋势，
          为企业管理者和运营负责人提供决策参考和实施指导。
        </p>
        <div className="flex flex-wrap justify-center gap-2 mt-4">
          <span className="px-3 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">人工智能</span>
          <span className="px-3 py-1 bg-green-100 text-green-800 text-xs rounded-full">私域运营</span>
          <span className="px-3 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">数字化转型</span>
          <span className="px-3 py-1 bg-orange-100 text-orange-800 text-xs rounded-full">营销自动化</span>
        </div>
      </div>

      {/* 导航标签 */}
      <div className="bg-white rounded-xl shadow-sm p-2">
        <div className="flex flex-wrap gap-1">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center space-x-2 px-3 sm:px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                activeTab === tab.id
                  ? 'bg-blue-600 text-white shadow-sm'
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              {tab.icon}
              <span className="hidden sm:inline">{tab.label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* 概述部分 */}
      {activeTab === 'overview' && (
        <div className="space-y-6">
          {/* 核心洞察 */}
          <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2 text-blue-800">
                <Lightbulb className="w-5 h-5" />
                <span>核心洞察</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {effectivenessData.map((item, index) => (
                  <div key={index} className="bg-white p-4 rounded-lg shadow-sm">
                    <div className="flex items-center space-x-2 mb-2">
                      <div className="text-blue-600">{item.icon}</div>
                      <span className="text-sm font-medium text-gray-600">{item.name}</span>
                    </div>
                    <div className="text-2xl font-bold text-blue-600">
                      {item.value}{item.unit}
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* 执行摘要 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Activity className="w-5 h-5 text-green-600" />
                <span>执行摘要</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="prose max-w-none">
                <p className="text-gray-700 leading-relaxed">
                  AI Agent正在深刻重塑私域运营生态，通过智能化、自动化和个性化能力，为企业带来前所未有的效率提升和成本优化。
                  研究显示，AI Agent在私域运营中的应用已覆盖客户关系管理、营销自动化、客户服务等核心场景，
                  <CitationLink id="1" callType="quote" citations={citations} className="text-blue-600"/>。
                </p>
                <p className="text-gray-700 leading-relaxed">
                  从效果数据来看，企业通过部署AI Agent实现了显著的业务改善：响应速度提升80%，人效提升5倍，
                  成本节约可达80%以上<CitationLink id="7" callType="quote" citations={citations} className="text-blue-600"/>。
                  特别是在客户服务领域，AI客服可实现7x24小时全天候服务，自动化率达80%，
                  客户满意度提升25%<CitationLink id="12" callType="quote" citations={citations} className="text-blue-600"/>。
                </p>
                <p className="text-gray-700 leading-relaxed">
                  然而，AI Agent的广泛应用也面临着数据整合、技术融合、成本控制等多重挑战。
                  企业需要在拥抱AI技术的同时，建立完善的数据基础设施，
                  确保人机协同的有效平衡<CitationLink id="9" callType="quote" citations={citations} className="text-blue-600"/>。
                </p>
              </div>
            </CardContent>
          </Card>

          {/* 关键数据可视化 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <PieChart className="w-5 h-5 text-purple-600" />
                  <span>应用场景覆盖率</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <RechartsPieChart>
                    <Pie
                      data={applicationScenarios}
                      cx="50%"
                      cy="50%"
                      outerRadius={100}
                      fill="#8884d8"
                      dataKey="percentage"
                      label={({ name, percentage }) => `${name}: ${percentage}%`}
                    >
                      {applicationScenarios.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={`hsl(${index * 72}, 70%, 60%)`} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </RechartsPieChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <BarChart3 className="w-5 h-5 text-orange-600" />
                  <span>成本效益对比</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={costBenefitData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="category" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Bar dataKey="人力成本" fill="#FF6B6B" />
                    <Bar dataKey="运营效率" fill="#4ECDC4" />
                    <Bar dataKey="客户满意度" fill="#45B7D1" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </div>
        </div>
      )}

      {/* 应用场景部分 */}
      {activeTab === 'applications' && (
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Bot className="w-5 h-5 text-blue-600" />
                <span>AI Agent在私域运营中的核心应用场景</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600 mb-6">
                AI Agent在私域运营中渗透于用户生命周期的各个环节，从高效获客到深度转化，
                再到用户留存与精细化运营，全面赋能企业实现业务增长。
              </p>
            </CardContent>
          </Card>

          {/* 客户关系管理 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Users className="w-5 h-5 text-green-600" />
                <span>客户关系管理与精细化运营</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-semibold text-gray-800 mb-3">SCRM系统深度融合</h4>
                  <ul className="space-y-2 text-gray-700">
                    <li className="flex items-start space-x-2">
                      <CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>与SCRM系统深度融合，对用户进行精细化管理和深层次运营，激活存量客户价值</span>
                    </li>
                    <li className="flex items-start space-x-2">
                      <CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>构建全渠道客户视图，打通CRM、线上商城、客服系统等数据孤岛</span>
                    </li>
                    <li className="flex items-start space-x-2">
                      <CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>整合客户在微信、企微、电话、官网等触点的行为数据，形成统一ID的动态客户画像</span>
                    </li>
                  </ul>
                  <CitationLink id="2" callType="quote" citations={citations} className="text-blue-600 text-sm mt-2 inline-block"/>
                </div>
                <div>
                  <img 
                    src={imageResources.scrm} 
                    alt="SCRM系统架构图" 
                    className="w-full h-48 object-cover rounded-lg shadow-sm"
                  />
                </div>
              </div>
              
              <div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-semibold text-blue-800 mb-2">典型案例：特斯拉AI Agent+SCRM系统</h4>
                <p className="text-blue-700 text-sm">
                  迈富时为特斯拉打造的"AI Agent+SCRM"系统，将销售、运营、服务等细分场景的多个Agent智能体组合应用，
                  实现定制化、自动化、智能化的私域客户关系管理，深度洞察市场和消费者需求，
                  提供个性化、精准度更高的服务体验<CitationLink id="1" callType="quote" citations={citations} className="text-blue-600"/>。
                </p>
              </div>
            </CardContent>
          </Card>

          {/* 客户生命周期管理 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Workflow className="w-5 h-5 text-purple-600" />
                <span>客户生命周期管理</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div className="bg-green-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-2">
                    <div className="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white text-sm font-bold">1</div>
                    <h4 className="font-semibold text-green-800">新客户引导</h4>
                  </div>
                  <p className="text-green-700 text-sm">通过自动化欢迎语和引导流程，提升新客户的初始体验</p>
                </div>
                
                <div className="bg-blue-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-2">
                    <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-bold">2</div>
                    <h4 className="font-semibold text-blue-800">活跃客户维护</h4>
                  </div>
                  <p className="text-blue-700 text-sm">定期推送个性化内容，保持客户活跃度</p>
                </div>
                
                <div className="bg-orange-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-2">
                    <div className="w-8 h-8 bg-orange-600 rounded-full flex items-center justify-center text-white text-sm font-bold">3</div>
                    <h4 className="font-semibold text-orange-800">沉睡客户唤醒</h4>
                  </div>
                  <p className="text-orange-700 text-sm">识别长期未互动客户，制定唤醒策略，重新激活客户关系</p>
                </div>
                
                <div className="bg-purple-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-2">
                    <div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold">4</div>
                    <h4 className="font-semibold text-purple-800">客户分层管理</h4>
                  </div>
                  <p className="text-purple-700 text-sm">根据客户价值和行为特征进行分层管理，制定差异化运营策略</p>
                </div>
              </div>
              <CitationLink id="4" callType="quote" citations={citations} className="text-blue-600 text-sm mt-4 inline-block"/>
            </CardContent>
          </Card>

          {/* 自动化营销与客户互动 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <MessageSquare className="w-5 h-5 text-indigo-600" />
                <span>自动化营销与客户互动</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="border-l-4 border-indigo-500 pl-4">
                    <h4 className="font-semibold text-gray-800 mb-2">智能内容生成</h4>
                    <p className="text-gray-700 text-sm">
                      AI私域营销平台支持基于大语言模型（LLM）的AI文案自动生成，如根据用户意图生成回复语、推荐语、活动邀约语，
                      并支持A/B测试和内容效果反馈优化<CitationLink id="6" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                  
                  <div className="border-l-4 border-green-500 pl-4">
                    <h4 className="font-semibold text-gray-800 mb-2">智能触达</h4>
                    <p className="text-gray-700 text-sm">
                      平台可结合客户画像，选择合适时机、通道、内容进行规模化精准触达，
                      支持企业微信、公众号、小程序、短信、邮件等多通道协同触达，
                      并实现"一人一链"的个性化追踪<CitationLink id="6" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                  
                  <div className="border-l-4 border-orange-500 pl-4">
                    <h4 className="font-semibold text-gray-800 mb-2">模拟真人沟通</h4>
                    <p className="text-gray-700 text-sm">
                      AI工具能够像真人一样与客户沟通，可7x24小时在线，突破人工接待上限，
                      基于聊天记录提炼用户标签、更新用户画像，千人千面发送定制内容，模拟销冠，主动聊单<CitationLink id="7" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                </div>
                
                <div>
                  <img 
                    src={imageResources.privateAI} 
                    alt="AI营销自动化流程" 
                    className="w-full h-64 object-cover rounded-lg shadow-sm"
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 行业应用案例 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Globe className="w-5 h-5 text-red-600" />
                <span>特定行业应用案例</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-gray-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-3">
                    <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                      <span className="text-white text-sm font-bold">汽车</span>
                    </div>
                    <h4 className="font-semibold text-gray-800">汽车行业</h4>
                  </div>
                  <p className="text-gray-700 text-sm">
                    迈富时打造"AI Agent+SCRM"系统，服务特斯拉，深度洞察市场和消费者需求，
                    提供个性化、精准度更高的服务体验。
                  </p>
                </div>
                
                <div className="bg-green-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-3">
                    <div className="w-10 h-10 bg-green-600 rounded-lg flex items-center justify-center">
                      <span className="text-white text-sm font-bold">医疗</span>
                    </div>
                    <h4 className="font-semibold text-gray-800">医疗大健康</h4>
                  </div>
                  <p className="text-gray-700 text-sm">
                    AI智能体在视频红包课中应用，实现自动跟进潜在客户、唤醒沉睡客户、
                    复制销冠话术、自动化社群运营等功能。
                  </p>
                  <CitationLink id="5" callType="quote" citations={citations} className="text-blue-600 text-sm mt-2 inline-block"/>
                </div>
                
                <div className="bg-purple-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-3">
                    <div className="w-10 h-10 bg-purple-600 rounded-lg flex items-center justify-center">
                      <span className="text-white text-sm font-bold">零售</span>
                    </div>
                    <h4 className="font-semibold text-gray-800">电商零售</h4>
                  </div>
                  <p className="text-gray-700 text-sm">
                    AI智能体在电商、知识付费、线下连锁零售等场景的私域营销中，
                    正带来团队配备、服务流程与效率的巨大变化。
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* 实际案例部分 */}
      {activeTab === 'cases' && (
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Building2 className="w-5 h-5 text-blue-600" />
                <span>AI Agent私域运营实际案例分析</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600 mb-6">
                通过深入分析不同行业的实际应用案例，展示AI Agent在私域运营中的具体实施方案、
                效果数据和经验总结，为企业提供可借鉴的实践经验。
              </p>
            </CardContent>
          </Card>

          {/* 案例列表 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {caseStudies.map((caseStudy) => (
              <Card 
                key={caseStudy.id} 
                className="cursor-pointer hover:shadow-lg transition-shadow"
                onClick={() => setSelectedCase(caseStudy)}
              >
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <div className="text-blue-600">{caseStudy.icon}</div>
                    <div>
                      <div className="text-lg font-semibold text-gray-800">{caseStudy.company}</div>
                      <div className="text-sm text-gray-500">{caseStudy.industry}</div>
                    </div>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-700 text-sm mb-4">{caseStudy.background}</p>
                  <div className="space-y-2">
                    <div className="text-sm font-semibold text-blue-600">核心解决方案</div>
                    <div className="text-sm text-gray-600">{caseStudy.solution}</div>
                  </div>
                  <div className="mt-4 flex items-center justify-between">
                    <span className="text-xs text-gray-500">点击查看详情</span>
                    <ArrowRight className="w-4 h-4 text-gray-400" />
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* 案例详情弹窗 */}
          {selectedCase && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
              <div className="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
                <div className="p-6">
                  <div className="flex items-center justify-between mb-6">
                    <div className="flex items-center space-x-3">
                      <div className="text-blue-600">{selectedCase.icon}</div>
                      <div>
                        <h2 className="text-2xl font-bold text-gray-800">{selectedCase.company}</h2>
                        <p className="text-gray-600">{selectedCase.industry}</p>
                      </div>
                    </div>
                    <button 
                      onClick={() => setSelectedCase(null)}
                      className="text-gray-400 hover:text-gray-600"
                    >
                      <XCircle className="w-6 h-6" />
                    </button>
                  </div>

                  <div className="space-y-6">
                    {/* 公司背景 */}
                    <div>
                      <h3 className="text-lg font-semibold text-gray-800 mb-3">公司背景</h3>
                      <p className="text-gray-700 leading-relaxed">{selectedCase.background}</p>
                    </div>

                    {/* 解决方案 */}
                    <div>
                      <h3 className="text-lg font-semibold text-gray-800 mb-3">AI Agent应用场景</h3>
                      <div className="bg-blue-50 p-4 rounded-lg mb-4">
                        <div className="font-semibold text-blue-800 mb-2">核心解决方案：{selectedCase.solution}</div>
                      </div>
                      <ul className="space-y-2">
                        {selectedCase.applications.map((app, index) => (
                          <li key={index} className="flex items-start space-x-2">
                            <CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
                            <span className="text-gray-700">{app}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

                    {/* 实施成效 */}
                    <div>
                      <h3 className="text-lg font-semibold text-gray-800 mb-3">实施成效</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {selectedCase.results.map((result, index) => (
                          <div key={index} className="bg-gray-50 p-4 rounded-lg">
                            <div className="font-semibold text-gray-800 mb-2">{result.metric}</div>
                            <div className="flex items-center space-x-4 text-sm">
                              <div className="text-red-600">
                                <span className="text-xs">改进前：</span>
                                <span className="font-semibold">{result.before}</span>
                              </div>
                              <ArrowRight className="w-4 h-4 text-gray-400" />
                              <div className="text-green-600">
                                <span className="text-xs">改进后：</span>
                                <span className="font-semibold">{result.after}</span>
                              </div>
                            </div>
                            <div className="mt-2 text-blue-600 font-semibold">
                              提升 {result.improvement}
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* 经验总结 */}
                    <div>
                      <h3 className="text-lg font-semibold text-gray-800 mb-3">经验总结</h3>
                      <ul className="space-y-2">
                        {selectedCase.insights.map((insight, index) => (
                          <li key={index} className="flex items-start space-x-2">
                            <Lightbulb className="w-4 h-4 text-yellow-600 mt-1 flex-shrink-0" />
                            <span className="text-gray-700">{insight}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

                    {/* 引用来源 */}
                    <div className="border-t pt-4">
                      <p className="text-sm text-gray-500">
                        数据来源：<CitationLink id={selectedCase.citation} callType="quote" citations={citations} className="text-blue-600"/>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 案例总结 */}
          <Card className="bg-gradient-to-r from-green-50 to-blue-50 border-green-200">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2 text-green-800">
                <Award className="w-5 h-5" />
                <span>案例总结与启示</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-semibold text-green-800 mb-3">共同成功因素</h4>
                  <ul className="space-y-2 text-green-700 text-sm">
                    <li>• 明确的业务目标和问题导向</li>
                    <li>• 完善的数据基础设施建设</li>
                    <li>• 渐进式的AI应用部署策略</li>
                    <li>• 有效的人机协同机制</li>
                    <li>• 持续的优化和迭代</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold text-blue-800 mb-3">关键启示</h4>
                  <ul className="space-y-2 text-blue-700 text-sm">
                    <li>• AI Agent不是万能的，需要结合具体业务场景</li>
                    <li>• 成功的关键在于数据质量和系统集成</li>
                    <li>• 人机协同比完全自动化更有效</li>
                    <li>• 需要建立完善的效果评估体系</li>
                    <li>• 组织变革和人员培训同样重要</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* 效果数据部分 */}
      {activeTab === 'effects' && (
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <BarChart3 className="w-5 h-5 text-green-600" />
                <span>AI Agent在私域运营中的效果数据</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600 mb-6">
                AI Agent在私域运营中带来的效果提升显著，主要体现在效率、成本、客户体验和业务增长方面。
                以下数据基于多个行业的实际应用案例和权威研究报告。
              </p>
            </CardContent>
          </Card>

          {/* 效率与成本优化 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Zap className="w-5 h-5 text-yellow-600" />
                <span>效率与成本优化</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <Alert className="border-green-200 bg-green-50">
                    <TrendingUp className="h-4 w-4 text-green-600" />
                    <AlertTitle className="text-green-800">显著成本降低</AlertTitle>
                    <AlertDescription className="text-green-700">
                      有企业通过AI干掉了80%的私域成本，某客户从96个客服配置变为20多个AI数智客服+真人协作模式，
                      一年节省了近600万元成本<CitationLink id="7" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                  
                  <Alert className="border-blue-200 bg-blue-50">
                    <Clock className="h-4 w-4 text-blue-600" />
                    <AlertTitle className="text-blue-800">响应速度提升</AlertTitle>
                    <AlertDescription className="text-blue-700">
                      AI客服响应速度可提升至8秒，首次响应速度提升80%，人效可提升5倍
                      <CitationLink id="11" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                  
                  <Alert className="border-purple-200 bg-purple-50">
                    <Activity className="h-4 w-4 text-purple-600" />
                    <AlertTitle className="text-purple-800">自动化处理能力</AlertTitle>
                    <AlertDescription className="text-purple-700">
                      电商L3场景下，AI可日处理10万次咨询，自动化率达80%，人力成本下降60%
                      <CitationLink id="12" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                </div>
                
                <div>
                  <img 
                    src={imageResources.cost} 
                    alt="成本优化效果图" 
                    className="w-full h-64 object-cover rounded-lg shadow-sm mb-4"
                  />
                  <div className="bg-gray-50 p-4 rounded-lg">
                    <h4 className="font-semibold text-gray-800 mb-2">Token消耗优化</h4>
                    <p className="text-gray-700 text-sm">
                      AI介入私域运营可显著节省90%的token消耗，尤其在被动回复环节。
                      人工写一条朋友圈文案需30分钟，AI仅需3秒
                      <CitationLink id="11" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 客户体验与转化提升 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Star className="w-5 h-5 text-orange-600" />
                <span>客户体验与转化提升</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="bg-orange-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-3">
                    <div className="w-10 h-10 bg-orange-600 rounded-full flex items-center justify-center">
                      <Star className="w-5 h-5 text-white" />
                    </div>
                    <h4 className="font-semibold text-orange-800">客户满意度</h4>
                  </div>
                  <div className="text-2xl font-bold text-orange-600 mb-1">25%</div>
                  <p className="text-orange-700 text-sm">客服智能体L3可使客户满意度提升</p>
                </div>
                
                <div className="bg-green-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-3">
                    <div className="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center">
                      <Target className="w-5 h-5 text-white" />
                    </div>
                    <h4 className="font-semibold text-green-800">转化率提升</h4>
                  </div>
                  <div className="text-2xl font-bold text-green-600 mb-1">100%+</div>
                  <p className="text-green-700 text-sm">线索转化率提升一倍以上</p>
                </div>
                
                <div className="bg-blue-50 p-4 rounded-lg">
                  <div className="flex items-center space-x-2 mb-3">
                    <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
                      <Users className="w-5 h-5 text-white" />
                    </div>
                    <h4 className="font-semibold text-blue-800">加粉率提升</h4>
                  </div>
                  <div className="text-2xl font-bold text-blue-600 mb-1">41%</div>
                  <p className="text-blue-700 text-sm">AI客服加粉率从12%暴涨至41%</p>
                </div>
              </div>
              
              <div className="mt-6 bg-blue-50 p-4 rounded-lg">
                <h4 className="font-semibold text-blue-800 mb-2">典型案例：百度私域营销</h4>
                <p className="text-blue-700 text-sm">
                  百度通过私域结合网销和电销的方式，将线索转化率提升了一倍以上
                  <CitationLink id="8" callType="quote" citations={citations} className="text-blue-600"/>。
                </p>
              </div>
            </CardContent>
          </Card>

          {/* 数据驱动决策 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Brain className="w-5 h-5 text-indigo-600" />
                <span>数据驱动决策与预测能力</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold text-gray-800 mb-3">智能分析能力</h4>
                    <ul className="space-y-2 text-gray-700">
                      <li className="flex items-start space-x-2">
                        <CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>通过数据分析，AI Agent能提供决策支持，优化运营策略</span>
                      </li>
                      <li className="flex items-start space-x-2">
                        <CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>AI能预测预估触达量、打开率、转化率，并提供策略调优建议</span>
                      </li>
                      <li className="flex items-start space-x-2">
                        <CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>具备策略归因能力，帮助企业理解"哪些内容带来了转化"</span>
                      </li>
                    </ul>
                    <CitationLink id="6" callType="quote" citations={citations} className="text-blue-600 text-sm mt-3 inline-block"/>
                  </div>
                  
                  <div className="bg-indigo-50 p-4 rounded-lg">
                    <h4 className="font-semibold text-indigo-800 mb-2">VOC准确度提升</h4>
                    <div className="flex items-center space-x-4 mb-2">
                      <div className="text-center">
                        <div className="text-2xl font-bold text-red-600">60%</div>
                        <div className="text-xs text-gray-600">常规VOC准确度</div>
                      </div>
                      <ArrowRight className="w-4 h-4 text-gray-400" />
                      <div className="text-center">
                        <div className="text-2xl font-bold text-green-600">80%</div>
                        <div className="text-xs text-gray-600">AI单轮准确度</div>
                      </div>
                    </div>
                    <p className="text-indigo-700 text-sm">
                      AI在客户声音分析方面表现出色，准确度显著提升。
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 效果数据可视化 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <LineChart className="w-5 h-5 text-purple-600" />
                <span>效果数据可视化对比</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={400}>
                <BarChart data={costBenefitData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="category" />
                  <YAxis />
                  <Tooltip 
                    formatter={(value, name) => [`${value}${name === '人力成本' ? '万元' : name === '运营效率' ? '%' : '分'}`, name]}
                  />
                  <Legend />
                  <Bar dataKey="人力成本" fill="#FF6B6B" name="人力成本" />
                  <Bar dataKey="运营效率" fill="#4ECDC4" name="运营效率" />
                  <Bar dataKey="客户满意度" fill="#45B7D1" name="客户满意度" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </div>
      )}

      {/* 挑战风险部分 */}
      {activeTab === 'challenges' && (
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <AlertTriangle className="w-5 h-5 text-red-600" />
                <span>AI Agent在私域运营中面临的挑战与风险</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600 mb-6">
                尽管AI Agent带来巨大变革，但在实际应用中仍面临多重挑战和潜在风险。
                企业需要清醒认识这些挑战，制定相应的应对策略。
              </p>
            </CardContent>
          </Card>

          {/* 挑战分布图 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <PieChart className="w-5 h-5 text-purple-600" />
                <span>主要挑战分布</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={300}>
                <RechartsPieChart>
                  <Pie
                    data={challengeData}
                    cx="50%"
                    cy="50%"
                    outerRadius={100}
                    fill="#8884d8"
                    dataKey="value"
                    label={({ name, value }) => `${name}: ${value}%`}
                  >
                    {challengeData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip />
                </RechartsPieChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>

          {/* 数据层面挑战 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Settings className="w-5 h-5 text-blue-600" />
                <span>数据层面挑战</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <Alert className="border-red-200 bg-red-50">
                    <XCircle className="h-4 w-4 text-red-600" />
                    <AlertTitle className="text-red-800">数据整合难题</AlertTitle>
                    <AlertDescription className="text-red-700">
                      海量的患者和客户数据分散在不同系统和渠道中，难以有效整合，
                      阻碍了精准营销和个性化服务的实施<CitationLink id="5" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                  
                  <Alert className="border-orange-200 bg-orange-50">
                    <AlertTriangle className="h-4 w-4 text-orange-600" />
                    <AlertTitle className="text-orange-800">数据质量与准确性</AlertTitle>
                    <AlertDescription className="text-orange-700">
                      数据来源广泛，格式和质量参差不齐，需要自动化的数据抽取、清洗和标准化处理，
                      这本身就是一大挑战<CitationLink id="4" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                </div>
                
                <div className="space-y-4">
                  <Alert className="border-purple-200 bg-purple-50">
                    <Eye className="h-4 w-4 text-purple-600" />
                    <AlertTitle className="text-purple-800">缺乏深度洞察</AlertTitle>
                    <AlertDescription className="text-purple-700">
                      企业通常缺少对客户数据的深度挖掘能力，无法形成全面的客户理解
                      <CitationLink id="5" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                  
                  <Alert className="border-gray-200 bg-gray-50">
                    <Shield className="h-4 w-4 text-gray-600" />
                    <AlertTitle className="text-gray-800">数据安全与隐私保护</AlertTitle>
                    <AlertDescription className="text-gray-700">
                      随着客户数据的集中，数据泄露和滥用的风险增加，需要更强的保护措施
                      <CitationLink id="4" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 技术与实施层面 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Settings className="w-5 h-5 text-green-600" />
                <span>技术与实施层面挑战</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="border-l-4 border-red-500 pl-4">
                  <h4 className="font-semibold text-red-800 mb-2">技术整合复杂性</h4>
                  <p className="text-red-700 text-sm">
                    AI Agent需要与现有的CRM、ERP等系统无缝集成，企业往往面临"AI与IT架构脱节"
                    "系统间难以联动"的挑战<CitationLink id="9" callType="quote" citations={citations} className="text-blue-600"/>。
                  </p>
                </div>
                
                <div className="border-l-4 border-orange-500 pl-4">
                  <h4 className="font-semibold text-orange-800 mb-2">语义理解准确性</h4>
                  <p className="text-orange-700 text-sm">
                    在大规模数据治理、实时知识更新以及实现多渠道融合方面，
                    AI的语义理解准确性仍是挑战<CitationLink id="9" callType="quote" citations={citations} className="text-blue-600"/>。
                  </p>
                </div>
                
                <div className="border-l-4 border-blue-500 pl-4">
                  <h4 className="font-semibold text-blue-800 mb-2">"工具"与"新物种"的认知偏差</h4>
                  <p className="text-blue-700 text-sm">
                    AI在很多人的印象中可能还停留在聊天、客服、群发等应用层面，但实际情况远不止如此。
                    简单地将AI作为自动化工具使用，可能导致营销自动化与骚扰式营销仅一线之隔
                    <CitationLink id="7" callType="quote" citations={citations} className="text-blue-600"/>。
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 运营与管理层面 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Users className="w-5 h-5 text-purple-600" />
                <span>运营与管理层面挑战</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
                    <h4 className="font-semibold text-yellow-800 mb-2">需求变化迅速</h4>
                    <p className="text-yellow-700 text-sm">
                      患者和客户的健康需求和行为习惯不断变化，企业难以实时调整运营策略，
                      对AI Agent的适应性提出更高要求<CitationLink id="5" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                  
                  <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
                    <h4 className="font-semibold text-blue-800 mb-2">人力与组织适应</h4>
                    <p className="text-blue-700 text-sm">
                      虽然AI能降低成本，但需要企业重新设计工作流程，实现市场和销售的协同，
                      这涉及组织结构的变化和员工技能的转型<CitationLink id="8" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div className="bg-red-50 p-4 rounded-lg border border-red-200">
                    <h4 className="font-semibold text-red-800 mb-2">指标监控滞后</h4>
                    <p className="text-red-700 text-sm">
                      人工巡查耗时耗力且易出错，需要从"事后复盘"进化为"实时预警"
                      <CitationLink id="3" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                  
                  <div className="bg-green-50 p-4 rounded-lg border border-green-200">
                    <h4 className="font-semibold text-green-800 mb-2">过度依赖与"人机协同"</h4>
                    <p className="text-green-700 text-sm">
                      AI并不能完全替代人，关键在于如何实现"人机协同"，将AI作为运营伙伴，
                      增强人的能力，而非取代人<CitationLink id="6" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 风险应对建议 */}
          <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2 text-blue-800">
                <Lightbulb className="w-5 h-5" />
                <span>风险应对建议</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-semibold text-blue-800 mb-3">技术层面</h4>
                  <ul className="space-y-2 text-blue-700 text-sm">
                    <li>• 建立完善的数据基础设施和标准化流程</li>
                    <li>• 采用渐进式集成策略，避免系统冲突</li>
                    <li>• 持续优化AI模型，提升语义理解准确性</li>
                    <li>• 建立数据安全和隐私保护机制</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold text-blue-800 mb-3">管理层面</h4>
                  <ul className="space-y-2 text-blue-700 text-sm">
                    <li>• 制定明确的人机协同策略</li>
                    <li>• 加强员工AI技能培训和转型支持</li>
                    <li>• 建立实时监控和预警机制</li>
                    <li>• 保持品牌温度，避免过度自动化</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* 发展趋势部分 */}
      {activeTab === 'trends' && (
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <TrendingUp className="w-5 h-5 text-green-600" />
                <span>AI Agent在私域运营中的发展趋势</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600 mb-6">
                AI Agent在私域运营领域正经历快速的技术迭代和应用拓展，
                未来发展趋势主要体现在智能化水平提升、深度集成与生态协同、个性化运营深化等方面。
              </p>
            </CardContent>
          </Card>

          {/* 发展趋势图表 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <LineChart className="w-5 h-5 text-purple-600" />
                <span>技术发展趋势预测</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={300}>
                <RechartsLineChart data={trendData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="year" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Line type="monotone" dataKey="基础应用" stroke="#8884d8" strokeWidth={2} />
                  <Line type="monotone" dataKey="智能化程度" stroke="#82ca9d" strokeWidth={2} />
                  <Line type="monotone" dataKey="市场渗透率" stroke="#ffc658" strokeWidth={2} />
                </RechartsLineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>

          {/* 智能化水平持续提升 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Brain className="w-5 h-5 text-blue-600" />
                <span>智能化水平的持续提升</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="border-l-4 border-blue-500 pl-4">
                    <h4 className="font-semibold text-blue-800 mb-2">更强的学习和决策能力</h4>
                    <p className="text-blue-700 text-sm">
                      AI Agent将具备更强的学习和决策能力，实现更高水平的自动化运营，
                      通过不断学习和优化，使其能够处理更复杂的业务逻辑和用户交互
                      <CitationLink id="4" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                  
                  <div className="border-l-4 border-green-500 pl-4">
                    <h4 className="font-semibold text-green-800 mb-2">融合大模型能力</h4>
                    <p className="text-green-700 text-sm">
                      未来的知识中台将结合大模型能力，强化多模态知识融合，提升自动推理和知识自适应能力，
                      使AI Agent能够更准确地理解用户意图并提供更智能的服务
                      <CitationLink id="9" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                  
                  <div className="border-l-4 border-purple-500 pl-4">
                    <h4 className="font-semibold text-purple-800 mb-2">知识基座的构建与进化</h4>
                    <p className="text-purple-700 text-sm">
                      AI知识中台将作为AI智能体能力实现的核心基座，通过数据抽取、清洗、整合与语义建模，
                      实现知识的规范化表达与高效复用<CitationLink id="9" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                </div>
                
                <div>
                  <img 
                    src={imageResources.smartLevel} 
                    alt="智能化水平发展图" 
                    className="w-full h-64 object-cover rounded-lg shadow-sm"
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 深度集成与生态协同 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Globe className="w-5 h-5 text-indigo-600" />
                <span>深度集成与生态协同</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="bg-indigo-50 p-4 rounded-lg">
                    <h4 className="font-semibold text-indigo-800 mb-2">跨平台整合</h4>
                    <p className="text-indigo-700 text-sm">
                      实现多平台的数据整合和运营协同，提升整体运营效率，
                      例如与CRM、ERP等系统的深度集成，实现数据的无缝流转和共享。
                    </p>
                  </div>
                  
                  <div className="bg-green-50 p-4 rounded-lg">
                    <h4 className="font-semibold text-green-800 mb-2">"AI Agent+SCRM"模式普及</h4>
                    <p className="text-green-700 text-sm">
                      这种模式将成为客户关系管理的关键，通过销售、运营、服务等细分场景的智能体组合应用，
                      打造定制化、自动化、智能化的私域客户关系管理系统。
                    </p>
                  </div>
                  
                  <div className="bg-orange-50 p-4 rounded-lg">
                    <h4 className="font-semibold text-orange-800 mb-2">API与现有系统打通</h4>
                    <p className="text-orange-700 text-sm">
                      通过API接口与企业已有CRM、线上商城、客服系统等进行深度集成，
                      整合多触点数据，形成统一动态的客户画像。
                    </p>
                  </div>
                </div>
                <CitationLink id="1" callType="quote" citations={citations} className="text-blue-600 text-sm"/>
              </div>
            </CardContent>
          </Card>

          {/* 个性化与精细化运营深化 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Target className="w-5 h-5 text-red-600" />
                <span>个性化与精细化运营深化</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <Alert className="border-green-200 bg-green-50">
                    <CheckCircle className="h-4 w-4 text-green-600" />
                    <AlertTitle className="text-green-800">定制化Agent解决方案</AlertTitle>
                    <AlertDescription className="text-green-700">
                      根据不同行业和企业需求，提供定制化的Agent解决方案，
                      以满足特定业务场景的精细化运营需求<CitationLink id="4" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                  
                  <Alert className="border-blue-200 bg-blue-50">
                    <Smartphone className="h-4 w-4 text-blue-600" />
                    <AlertTitle className="text-blue-800">"一人一链"与智能触达</AlertTitle>
                    <AlertDescription className="text-blue-700">
                      针对每个客户生成专属落地页、活动页或权益链接，实现精细化追踪与自动化跟进
                      <CitationLink id="6" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                </div>
                
                <div className="space-y-4">
                  <Alert className="border-purple-200 bg-purple-50">
                    <MessageSquare className="h-4 w-4 text-purple-600" />
                    <AlertTitle className="text-purple-800">内容智能生成与优化</AlertTitle>
                    <AlertDescription className="text-purple-700">
                      AI将通过大语言模型自动生成文案，并具备A/B测试、效果反馈和调优能力，
                      实现内容策略的自学习优化<CitationLink id="6" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                  
                  <Alert className="border-orange-200 bg-orange-50">
                    <BarChart3 className="h-4 w-4 text-orange-600" />
                    <AlertTitle className="text-orange-800">数据驱动的策略优化</AlertTitle>
                    <AlertDescription className="text-orange-700">
                      AI平台将具备可视化运营分析、人群策略模拟、效果预测以及策略归因能力，
                      使私域营销进入"产品化管理"阶段<CitationLink id="6" callType="quote" citations={citations} className="text-blue-600"/>。
                    </AlertDescription>
                  </Alert>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 未来发展展望 */}
          <Card className="bg-gradient-to-r from-green-50 to-blue-50 border-green-200">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2 text-green-800">
                <Star className="w-5 h-5" />
                <span>未来发展展望</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="bg-white p-4 rounded-lg shadow-sm">
                    <h4 className="font-semibold text-green-800 mb-2">AI成为私域运营核心驱动力</h4>
                    <p className="text-green-700 text-sm">
                      2025年，AI智能体将成为私域运营的核心驱动力，彻底改变企业与客户的互动方式
                      <CitationLink id="5" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                  
                  <div className="bg-white p-4 rounded-lg shadow-sm">
                    <h4 className="font-semibold text-blue-800 mb-2">工作流程重构</h4>
                    <p className="text-blue-700 text-sm">
                      AI将推动工作流程的根本性重构，提高市场和销售协同效率，
                      通过数据为核心的闭环流程提升线索转化率，减少沟通成本
                      <CitationLink id="8" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div className="bg-white p-4 rounded-lg shadow-sm">
                    <h4 className="font-semibold text-purple-800 mb-2">增强数据安全性</h4>
                    <p className="text-purple-700 text-sm">
                      随着AI Agent应用的普及，数据保护措施将进一步加强，
                      确保客户信息的安全性和隐私性<CitationLink id="4" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                  
                  <div className="bg-white p-4 rounded-lg shadow-sm">
                    <h4 className="font-semibold text-orange-800 mb-2">AI不替代人，而是增强人</h4>
                    <p className="text-orange-700 text-sm">
                      未来的AI平台将是运营伙伴，它不替代人，而是增强人，
                      使企业能够借助AI实现真正的私域增长飞轮<CitationLink id="6" callType="quote" citations={citations} className="text-blue-600"/>。
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* 总结与建议 */}
      <Card className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Lightbulb className="w-5 h-5" />
            <span>总结与建议</span>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="prose max-w-none text-white">
            <p className="leading-relaxed">
              AI Agent正深刻影响私域运营的各个方面，从客户获取、转化到留存复购，
              其自动化、智能化、个性化能力为企业带来了前所未有的效率提升和成本优化，并显著改善了客户体验。
              通过对特斯拉、浙江服装企业、上海医美机构等实际案例的深入分析，我们看到AI Agent在不同行业中的成功应用。
            </p>
            <p className="leading-relaxed">
              尽管在数据整合、技术融合和对"人机协同"的正确认知方面仍面临挑战，
              但随着AI技术的持续进步，特别是大模型和知识中台的深度融合，
              AI Agent在私域运营中的应用将更加智能化、精细化和广泛化。
            </p>
            <p className="leading-relaxed">
              企业应积极拥抱这一变革，以业务需求为导向，构建与自身运营逻辑高度匹配的AI Agent解决方案，
              从而在日益激烈的市场竞争中实现可持续的业绩增长和客户资产积累。
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
            <div className="bg-white bg-opacity-20 p-4 rounded-lg">
              <h4 className="font-semibold mb-2">短期建议</h4>
              <ul className="text-sm space-y-1">
                <li>• 从基础应用场景开始，逐步扩展AI Agent功能</li>
                <li>• 建立数据基础设施，确保数据质量和安全</li>
                <li>• 培养团队AI应用能力，实现人机协同</li>
                <li>• 选择合适的行业案例进行试点应用</li>
              </ul>
            </div>
            <div className="bg-white bg-opacity-20 p-4 rounded-lg">
              <h4 className="font-semibold mb-2">长期规划</h4>
              <ul className="text-sm space-y-1">
                <li>• 构建完整的AI驱动私域运营体系</li>
                <li>• 实现跨平台数据整合和智能决策</li>
                <li>• 打造行业定制化AI Agent解决方案</li>
                <li>• 建立持续优化和迭代机制</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 引用资料 */}
      <Card className="w-full">
        <CardContent className="text-xs sm:text-sm text-muted-foreground mt-2 sm:mt-4 p-3 sm:p-6">
          <p className="font-semibold">参考文献：</p>
          <ul className="space-y-1 mt-2">
            {Object.entries(citations).map(([id, citation]) => (
              <li key={id}>
                <CitationLink id={id} callType="recommend" citations={citations}/>
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
};

export default AIAgentReport;