import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { 
  FileText, 
  AlertTriangle, 
  ShoppingCart, 
  Bot, 
  Users, 
  Calendar,
  CheckCircle,
  XCircle,
  Info,
  Target,
  BookOpen,
  Gavel,
  TrendingUp,
  Shield,
  Eye,
  MessageSquare,
  Camera,
  Edit3,
  Star
} from 'lucide-react';
import { CitationLink } from '@/components/ui/citation';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line, PieChart, Pie, Cell } from 'recharts';

// 引用数据
const citations = {
  1: {
    title: "非原创规则更新公告",
    url: "https://www.xiaohongshu.com/search_result/6809dc37000000001e00590b?xsec_token=AB-W_Bjvt2YKyGutxBRdSF349H1bhD-iIj7t_FZnEaL94=&xsec_source=",
    content: "为更好保护原创作者权益，维护创作公平秩序，现更新以下非原创规则，新规将从5月12日起生效",
    date: "2025年4月24日",
    siteName: "小红书官方",
    sourceContent: "转载他人内容需要在笔记正文规范声明，和原作者沟通获得授权，并在内容正文@原作者以做提示"
  },
  2: {
    title: "小红书关于打击侵权行为的公告（2025年6月）",
    url: "https://www.xiaohongshu.com/search_result/685f86bb0000000024009098?xsec_token=ABMAlhNeaFcIeTpjqWa7HuO0P5enD025KB_DzeLBooUHM=&xsec_source=",
    content: "6月份，平台共收到起侵权投诉22283起，有效处置12091起，其中处置肖像隐私泄露3338起",
    date: "2025年6月",
    siteName: "小红书官方",
    sourceContent: "处置侮辱谩骂1599起，处置造谣诽谤7154起"
  },
  3: {
    title: "小红书一站式安全中心上线公告",
    url: "https://www.xiaohongshu.com/search_result/67e36254000000001e003a76?xsec_token=ABgVFVbuWSzbQ9So7KWw2BkXAP80M1PYiCXgXYZurI0XM=&xsec_source=",
    content: "为了帮助小红薯们在规则中心的使用体验更加顺畅、更全面的了解平台规则，减少违规的发生",
    date: "2025年4月1日",
    siteName: "小红书官方",
    sourceContent: "升级打造了一个审核功能一站式聚合阵地---安全中心"
  },
  4: {
    title: "小红书7月新规则注意了！！千万别违规",
    url: "https://www.xiaohongshu.com/search_result/685e6814000000001c03578a?xsec_token=ABpTlxmwBg91mduRApoyDfR6zRVJFNuKJSxNTG710_E0g=&xsec_source=",
    content: "小红书七月新规来啦！注意查收",
    date: "2025年7月",
    siteName: "小红书用户分享",
    sourceContent: "搬运、抄袭、同质化不再推流，必须自己写，要是抄别人的或者把别人的内容搬过来，处罚会更厉害"
  },
  5: {
    title: "小红书7月新规正式实施，千万别违规了",
    url: "https://www.xiaohongshu.com/search_result/685e98c10000000011000487?xsec_token=ABpTlxmwBg91mduRApoyDfRwxOc-7hKqHeWkCPc54Pdn4=&xsec_source=",
    content: "内容创作规范真实性要求，对比图需标注原相机+拍摄时间，否则限流",
    date: "2025年7月",
    siteName: "小红书用户分享",
    sourceContent: "新手保护期取消：新账号首条笔记即按老号标准审核，无宽限期"
  }
};

// 规则变化数据
const ruleChangesData = [
  { month: '1月', 内容创作: 2, 违规治理: 1, 交易政策: 1, AI管理: 0, 社区活动: 1 },
  { month: '2月', 内容创作: 1, 违规治理: 2, 交易政策: 0, AI管理: 1, 社区活动: 0 },
  { month: '3月', 内容创作: 3, 违规治理: 1, 交易政策: 2, AI管理: 1, 社区活动: 1 },
  { month: '4月', 内容创作: 4, 违规治理: 2, 交易政策: 1, AI管理: 2, 社区活动: 2 },
  { month: '5月', 内容创作: 5, 违规治理: 3, 交易政策: 2, AI管理: 1, 社区活动: 1 },
  { month: '6月', 内容创作: 3, 违规治理: 4, 交易政策: 3, AI管理: 2, 社区活动: 2 },
  { month: '7月', 内容创作: 6, 违规治理: 2, 交易政策: 4, AI管理: 3, 社区活动: 1 }
];

// 违规处理数据
const violationData = [
  { name: '肖像隐私泄露', value: 3338, color: '#FF6B6B' },
  { name: '侮辱谩骂', value: 1599, color: '#4ECDC4' },
  { name: '造谣诽谤', value: 7154, color: '#45B7D1' },
  { name: '其他违规', value: 12091 - 3338 - 1599 - 7154, color: '#96CEB4' }
];

const XiaohongshuRulesReport = () => {
  const [activeTab, setActiveTab] = useState("overview");

  return (
    <div className="w-full max-w-7xl mx-auto space-y-4 sm:space-y-6 p-2 sm:p-4 bg-gray-50 min-h-screen">
      
      {/* 标题部分 */}
      <div className="text-center py-6 sm:py-8 bg-gradient-to-r from-red-50 to-pink-50 rounded-lg">
        <h1 className="text-2xl sm:text-4xl font-bold text-gray-800 mb-2 sm:mb-4">
          小红书2025年1-7月新规则变化
        </h1>
        <h2 className="text-lg sm:text-xl text-gray-600 mb-4">
          结构化文档报告
        </h2>
        <div className="flex flex-wrap justify-center gap-2 sm:gap-4">
          <Badge variant="outline" className="bg-red-100 text-red-700">内容创作规范</Badge>
          <Badge variant="outline" className="bg-blue-100 text-blue-700">违规治理</Badge>
          <Badge variant="outline" className="bg-green-100 text-green-700">交易政策</Badge>
          <Badge variant="outline" className="bg-purple-100 text-purple-700">AI内容管理</Badge>
          <Badge variant="outline" className="bg-orange-100 text-orange-700">社区活动</Badge>
        </div>
      </div>

      {/* 概览统计 */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="bg-gradient-to-br from-red-500 to-red-600 text-white">
          <CardContent className="p-4 sm:p-6">
            <div className="flex items-center">
              <FileText className="h-8 w-8 sm:h-10 sm:w-10 mr-3" />
              <div>
                <p className="text-red-100 text-sm">规则更新总数</p>
                <p className="text-2xl sm:text-3xl font-bold">28项</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-gradient-to-br from-blue-500 to-blue-600 text-white">
          <CardContent className="p-4 sm:p-6">
            <div className="flex items-center">
              <Shield className="h-8 w-8 sm:h-10 sm:w-10 mr-3" />
              <div>
                <p className="text-blue-100 text-sm">违规处置数量</p>
                <p className="text-2xl sm:text-3xl font-bold">12,091起</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-gradient-to-br from-green-500 to-green-600 text-white">
          <CardContent className="p-4 sm:p-6">
            <div className="flex items-center">
              <TrendingUp className="h-8 w-8 sm:h-10 sm:w-10 mr-3" />
              <div>
                <p className="text-green-100 text-sm">新增功能</p>
                <p className="text-2xl sm:text-3xl font-bold">5个</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-gradient-to-br from-purple-500 to-purple-600 text-white">
          <CardContent className="p-4 sm:p-6">
            <div className="flex items-center">
              <Bot className="h-8 w-8 sm:h-10 sm:w-10 mr-3" />
              <div>
                <p className="text-purple-100 text-sm">AI管理升级</p>
                <p className="text-2xl sm:text-3xl font-bold">9次</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 规则变化趋势图 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <TrendingUp className="h-5 w-5" />
            2025年1-7月规则变化趋势
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="h-64 sm:h-80">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={ruleChangesData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="内容创作" stroke="#FF6B6B" strokeWidth={2} />
                <Line type="monotone" dataKey="违规治理" stroke="#4ECDC4" strokeWidth={2} />
                <Line type="monotone" dataKey="交易政策" stroke="#45B7D1" strokeWidth={2} />
                <Line type="monotone" dataKey="AI管理" stroke="#96CEB4" strokeWidth={2} />
                <Line type="monotone" dataKey="社区活动" stroke="#FECA57" strokeWidth={2} />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

      {/* 主要内容标签页 */}
      <div className="w-full">
        <div className="flex flex-wrap border-b border-gray-200 mb-4">
          {[
            { id: "overview", label: "总览", icon: Eye },
            { id: "content", label: "内容创作规范", icon: Edit3 },
            { id: "violation", label: "违规治理", icon: Shield },
            { id: "transaction", label: "交易政策", icon: ShoppingCart },
            { id: "ai", label: "AI内容管理", icon: Bot },
            { id: "community", label: "社区活动", icon: Users }
          ].map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 px-3 sm:px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.id
                  ? "border-red-500 text-red-600"
                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
              }`}
            >
              <tab.icon className="h-4 w-4" />
              <span className="hidden sm:inline">{tab.label}</span>
              <span className="sm:hidden">{tab.label.split('')[0]}</span>
            </button>
          ))}
        </div>

        {/* 总览页面 */}
        {activeTab === "overview" && (
          <div className="space-y-6">
            <Alert>
              <Info className="h-4 w-4" />
              <AlertTitle>重要提醒</AlertTitle>
              <AlertDescription>
                小红书在2025年上半年密集发布了多项重要规则更新，涉及内容创作、违规治理、交易政策等核心领域。
                建议创作者和商家及时了解并遵守新规，避免违规风险。
              </AlertDescription>
            </Alert>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>6月违规处置情况</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="h-64">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={violationData}
                          cx="50%"
                          cy="50%"
                          outerRadius={80}
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, value }) => `${name}: ${value}`}
                        >
                          {violationData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.color} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                  <CitationLink id="2" callType="quote" citations={citations} className="text-sm text-gray-600 mt-2" />
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>重大规则变化时间线</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                      <div>
                        <p className="font-medium">4月1日 - 安全中心上线</p>
                        <p className="text-sm text-gray-600">一站式审核功能聚合平台</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                      <div>
                        <p className="font-medium">5月12日 - 非原创规则更新</p>
                        <p className="text-sm text-gray-600">转载内容需规范声明和授权</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                      <div>
                        <p className="font-medium">7月 - 新规全面实施</p>
                        <p className="text-sm text-gray-600">内容创作和交易导流严格管控</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )}

        {/* 内容创作规范 */}
        {activeTab === "content" && (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Edit3 className="h-5 w-5" />
                  非原创规则更新（5月12日生效）
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <Alert>
                    <CheckCircle className="h-4 w-4" />
                    <AlertTitle>规范声明要求</AlertTitle>
                    <AlertDescription>
                      转载他人内容需要在笔记正文规范声明，和原作者沟通获得授权，并在内容正文@原作者以做提示，不规范声明将被限制分发。
                      <CitationLink id="1" callType="quote" citations={citations} className="ml-2" />
                    </AlertDescription>
                  </Alert>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="p-4 bg-green-50 rounded-lg">
                      <h4 className="font-medium text-green-800 mb-2 flex items-center gap-2">
                        <CheckCircle className="h-4 w-4" />
                        规范声明方式
                      </h4>
                      <ul className="text-sm text-green-700 space-y-1">
                        <li>• 全文转载：本内容转载自 xx 创作者，已获得原作者授权，@xx 作者</li>
                        <li>• 部分素材转载：本内容部分素材转载自 xx 创作者，已获得原作者授权，@xx 作者</li>
                      </ul>
                    </div>

                    <div className="p-4 bg-red-50 rounded-lg">
                      <h4 className="font-medium text-red-800 mb-2 flex items-center gap-2">
                        <XCircle className="h-4 w-4" />
                        不规范的声明
                      </h4>
                      <ul className="text-sm text-red-700 space-y-1">
                        <li>• 仅在视频画面增加水印</li>
                        <li>• 在评论中注明转载</li>
                        <li>• 发布后删除转载声明</li>
                        <li>• 没有征得原作者同意</li>
                        <li>• 虚假艾特，未真正@原作者</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>内容质量要求（7月新规）</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-medium mb-3">字数要求</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center p-2 bg-blue-50 rounded">
                        <span>短笔记</span>
                        <Badge variant="outline">≥100字</Badge>
                      </div>
                      <div className="flex justify-between items-center p-2 bg-blue-50 rounded">
                        <span>长笔记</span>
                        <Badge variant="outline">≥600字</Badge>
                      </div>
                    </div>
                  </div>

                  <div>
                    <h4 className="font-medium mb-3">真实性要求</h4>
                    <div className="space-y-2">
                      <div className="p-2 bg-yellow-50 rounded text-sm">
                        <strong>对比图标注：</strong>需标注"原相机+拍摄时间"
                      </div>
                      <div className="p-2 bg-yellow-50 rounded text-sm">
                        <strong>禁用极限词：</strong>如"最""第一"等
                      </div>
                      <div className="p-2 bg-yellow-50 rounded text-sm">
                        <strong>禁用谐音字：</strong>规避平台规则的行为将被拦截
                      </div>
                    </div>
                  </div>
                </div>
                <CitationLink id="5" callType="quote" citations={citations} className="text-sm text-gray-600 mt-4" />
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>多账号发布限制</CardTitle>
              </CardHeader>
              <CardContent>
                <Alert className="mb-4">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertTitle>重要提醒</AlertTitle>
                  <AlertDescription>
                    用多个账号发布同一篇内容，将被限制分发。平台鼓励差异化经营，不鼓励使用同一内容在不同账号反复发布来获取流量。
                  </AlertDescription>
                </Alert>

                <div className="space-y-3">
                  <div className="p-3 border-l-4 border-green-500 bg-green-50">
                    <p className="text-sm"><strong>多人共同创作：</strong>请在内容正文注明创作分工，并在内容中@其他共同创作作者</p>
                  </div>
                  <div className="p-3 border-l-4 border-blue-500 bg-blue-50">
                    <p className="text-sm"><strong>他人创作转载：</strong>在获得他人授权后转载，参考转载规范进行声明</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )}

        {/* 违规治理 */}
        {activeTab === "violation" && (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Shield className="h-5 w-5" />
                  2025年6月违规处置报告
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                  <div className="text-center p-4 bg-red-50 rounded-lg">
                    <div className="text-2xl font-bold text-red-600">22,283</div>
                    <div className="text-sm text-red-700">侵权投诉总数</div>
                  </div>
                  <div className="text-center p-4 bg-green-50 rounded-lg">
                    <div className="text-2xl font-bold text-green-600">12,091</div>
                    <div className="text-sm text-green-700">有效处置数量</div>
                  </div>
                  <div className="text-center p-4 bg-blue-50 rounded-lg">
                    <div className="text-2xl font-bold text-blue-600">54.3%</div>
                    <div className="text-sm text-blue-700">处置成功率</div>
                  </div>
                </div>

                <div className="space-y-3">
                  <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                    <span>肖像隐私泄露</span>
                    <Badge variant="destructive">3,338起</Badge>
                  </div>
                  <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                    <span>侮辱谩骂</span>
                    <Badge variant="destructive">1,599起</Badge>
                  </div>
                  <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                    <span>造谣诽谤</span>
                    <Badge variant="destructive">7,154起</Badge>
                  </div>
                </div>

                <CitationLink id="2" callType="quote" citations={citations} className="text-sm text-gray-600 mt-4" />
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>投诉举报渠道</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="p-4 border rounded-lg">
                    <h4 className="font-medium mb-2 flex items-center gap-2">
                      <MessageSquare className="h-4 w-4" />
                      APP端投诉
                    </h4>
                    <p className="text-sm text-gray-600 mb-2">
                      笔记页面右上角 → 分享 → 举报 → 侵权保护
                    </p>
                    <p className="text-xs text-gray-500">适用于单个笔记的侵权投诉</p>
                  </div>

                  <div className="p-4 border rounded-lg">
                    <h4 className="font-medium mb-2 flex items-center gap-2">
                      <BookOpen className="h-4 w-4" />
                      权利保护中心
                    </h4>
                    <p className="text-sm text-gray-600 mb-2">
                      登录地址：https://ipp.xiaohongshu.com/
                    </p>
                    <p className="text-xs text-gray-500">适用于批量笔记投诉或详细证据提交</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>安全中心功能升级</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <Alert>
                    <Info className="h-4 w-4" />
                    <AlertTitle>安全中心上线</AlertTitle>
                    <AlertDescription>
                      为了帮助用户更全面地了解平台规则，减少违规的发生，小红书升级打造了一个审核功能一站式聚合阵地。
                      <CitationLink id="3" callType="quote" citations={citations} className="ml-2" />
                    </AlertDescription>
                  </Alert>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="p-4 bg-blue-50 rounded-lg">
                      <h4 className="font-medium text-blue-800 mb-2">一站式查询</h4>
                      <p className="text-sm text-blue-700">查询账号权限和笔记审核状态</p>
                    </div>
                    <div className="p-4 bg-green-50 rounded-lg">
                      <h4 className="font-medium text-green-800 mb-2">违规诊断建议</h4>
                      <p className="text-sm text-green-700">了解笔记审核状态，获取修改建议</p>
                    </div>
                    <div className="p-4 bg-purple-50 rounded-lg">
                      <h4 className="font-medium text-purple-800 mb-2">规则解读聚集地</h4>
                      <p className="text-sm text-purple-700">收录重点审核规则解读和违规案例</p>
                    </div>
                  </div>

                  <div className="mt-4">
                    <h4 className="font-medium mb-2">访问路径：</h4>
                    <div className="space-y-1 text-sm text-gray-600">
                      <p>1. App首页 → 左上角 → 社区公约 → 安全中心</p>
                      <p>2. App首页 → 左上角 → 创作者中心 → 安全中心（全部服务）</p>
                      <p>3. App首页 → 左上角 → 创作者中心 → 右上角安全中心图标</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )}

        {/* 交易政策 */}
        {activeTab === "transaction" && (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <ShoppingCart className="h-5 w-5" />
                  交易导流规则严格化
                </CardTitle>
              </CardHeader>
              <CardContent>
                <Alert className="mb-4">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertTitle>重要变化</AlertTitle>
                  <AlertDescription>
                    平台严禁站外交易引导，除了小红书商城、直播间购物车、官方留资组件，其他方式一概不行。
                  </AlertDescription>
                </Alert>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="p-4 bg-red-50 rounded-lg">
                    <h4 className="font-medium text-red-800 mb-3 flex items-center gap-2">
                      <XCircle className="h-4 w-4" />
                      严禁行为
                    </h4>
                    <ul className="text-sm text-red-700 space-y-1">
                      <li>• 私信分享微信、电话</li>
                      <li>• 传播其他平台账号信息</li>
                      <li>• 发布三方平台链接、二维码</li>
                      <li>• 多账号配合引导站外交易</li>
                    </ul>
                  </div>

                  <div className="p-4 bg-green-50 rounded-lg">
                    <h4 className="font-medium text-green-800 mb-3 flex items-center gap-2">
                      <CheckCircle className="h-4 w-4" />
                      合规渠道
                    </h4>
                    <ul className="text-sm text-green-700 space-y-1">
                      <li>• 小红书商城</li>
                      <li>• 直播间购物车功能</li>
                      <li>• 官方留资组件</li>
                      <li>• 平台认证的商业内容标记工具</li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>违规处罚机制</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="border-b">
                          <th className="text-left p-2">违规程度</th>
                          <th className="text-left p-2">处罚措施</th>
                          <th className="text-left p-2">影响范围</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr className="border-b">
                          <td className="p-2">轻微违规</td>
                          <td className="p-2">警告</td>
                          <td className="p-2">账号记录</td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-2">一般违规</td>
                          <td className="p-2">直播间流量受限</td>
                          <td className="p-2">流量分发限制</td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-2">严重违规</td>
                          <td className="p-2">功能受限、商品分享功能关闭</td>
                          <td className="p-2">核心功能限制</td>
                        </tr>
                        <tr>
                          <td className="p-2">特别严重</td>
                          <td className="p-2">账号封禁</td>
                          <td className="p-2">永久禁用</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div className="p-3 bg-orange-50 rounded">
                      <h5 className="font-medium text-orange-800">违规积分扣除</h5>
                      <p className="text-sm text-orange-700">10-25分/次</p>
                    </div>
                    <div className="p-3 bg-purple-50 rounded">
                      <h5 className="font-medium text-purple-800">信誉分扣除</h5>
                      <p className="text-sm text-purple-700">0-12分/次</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>商家运营规范</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="p-4 border-l-4 border-blue-500 bg-blue-50">
                    <h4 className="font-medium text-blue-800 mb-2">私信联系限制</h4>
                    <p className="text-sm text-blue-700">
                      商家对非粉丝用户在未回复情况下只能发送1条信息，每天联系非粉丝用户数量不超过20人。
                    </p>
                  </div>

                  <div className="p-4 border-l-4 border-green-500 bg-green-50">
                    <h4 className="font-medium text-green-800 mb-2">商业内容标记</h4>
                    <p className="text-sm text-green-700">
                      商品植入要使用平台认证的"商业内容标记工具"，未报备软性植入会被降权。
                    </p>
                  </div>

                  <div className="p-4 border-l-4 border-purple-500 bg-purple-50">
                    <h4 className="font-medium text-purple-800 mb-2">品牌LOGO限制</h4>
                    <p className="text-sm text-purple-700">
                      穿搭类内容中，服饰品牌LOGO露出面积不得超过图片20%。
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )}

        {/* AI内容管理 */}
        {activeTab === "ai" && (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Bot className="h-5 w-5" />
                  AI内容管理新规
                </CardTitle>
              </CardHeader>
              <CardContent>
                <Alert className="mb-4">
                  <Info className="h-4 w-4" />
                  <AlertTitle>AI创作声明要求</AlertTitle>
                  <AlertDescription>
                    使用AI生成的内容必须声明，否则会被警告甚至限流。平台鼓励用户对AI生成内容进行标注声明（勾选"笔记含AI合成内容"）。
                  </AlertDescription>
                </Alert>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="p-4 bg-blue-50 rounded-lg">
                    <h4 className="font-medium text-blue-800 mb-3">AI内容标注要求</h4>
                    <ul className="text-sm text-blue-700 space-y-1">
                      <li>• AI生成图片需标注清楚来源</li>
                      <li>• AI创作文本内容需声明</li>
                      <li>• 勾选"笔记含AI合成内容"</li>
                      <li>• 添加#AI生成标签</li>
                    </ul>
                  </div>

                  <div className="p-4 bg-red-50 rounded-lg">
                    <h4 className="font-medium text-red-800 mb-3">违规风险</h4>
                    <ul className="text-sm text-red-700 space-y-1">
                      <li>• 未标注AI内容可能收到警告</li>
                      <li>• 严重情况下会被限流</li>
                      <li>• 影响账号权重和推荐</li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>"清朗·整治AI技术滥用"专项行动</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div className="p-3 bg-red-50 rounded border-l-4 border-red-500">
                      <h5 className="font-medium text-red-800">AI制作谣言</h5>
                      <p className="text-sm text-red-700">使用AI软件生成谣言博取流量</p>
                      <Badge variant="destructive" className="mt-2">账号关闭</Badge>
                    </div>

                    <div className="p-3 bg-orange-50 rounded border-l-4 border-orange-500">
                      <h5 className="font-medium text-orange-800">AI色情低俗</h5>
                      <p className="text-sm text-orange-700">使用AI软件生成低俗擦边内容</p>
                      <Badge variant="destructive" className="mt-2">账号禁言</Badge>
                    </div>

                    <div className="p-3 bg-yellow-50 rounded border-l-4 border-yellow-500">
                      <h5 className="font-medium text-yellow-800">AI假冒他人</h5>
                      <p className="text-sm text-yellow-700">利用AI技术假冒主播违规营销</p>
                      <Badge variant="destructive" className="mt-2">账号关闭</Badge>
                    </div>

                    <div className="p-3 bg-purple-50 rounded border-l-4 border-purple-500">
                      <h5 className="font-medium text-purple-800">AI网络水军</h5>
                      <p className="text-sm text-purple-700">违规推荐AI群控软件制造虚假流量</p>
                      <Badge variant="destructive" className="mt-2">账号关闭</Badge>
                    </div>

                    <div className="p-3 bg-blue-50 rounded border-l-4 border-blue-500">
                      <h5 className="font-medium text-blue-800">AI产品服务</h5>
                      <p className="text-sm text-blue-700">违规推广AI应用程序</p>
                      <Badge variant="secondary" className="mt-2">内容下架</Badge>
                    </div>
                  </div>

                  <Alert>
                    <Bot className="h-4 w-4" />
                    <AlertTitle>平台态度</AlertTitle>
                    <AlertDescription>
                      持续打击各类涉AI生成相关违规行为，不断升级完善AI领域内容治理能力。
                    </AlertDescription>
                  </Alert>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>AI内容合规指导</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="p-4 bg-green-50 rounded-lg">
                    <h4 className="font-medium text-green-800 mb-3 flex items-center gap-2">
                      <CheckCircle className="h-4 w-4" />
                      合规使用建议
                    </h4>
                    <ul className="text-sm text-green-700 space-y-2">
                      <li>• 主动标注AI生成内容，保持透明度</li>
                      <li>• 确保AI生成内容的真实性和准确性</li>
                      <li>• 避免使用AI制作误导性或虚假信息</li>
                      <li>• 遵守相关法律法规和平台规范</li>
                      <li>• 定期关注平台AI管理政策更新</li>
                    </ul>
                  </div>

                  <div className="p-4 bg-blue-50 rounded-lg">
                    <h4 className="font-medium text-blue-800 mb-3">标注方式示例</h4>
                    <div className="space-y-2 text-sm text-blue-700">
                      <p><strong>文本标注：</strong>"本内容部分由AI辅助生成"</p>
                      <p><strong>图片标注：</strong>"图片由AI生成，仅供参考"</p>
                      <p><strong>视频标注：</strong>"视频含AI合成元素"</p>
                      <p><strong>标签使用：</strong>#AI生成 #AIGC</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )}

        {/* 社区活动 */}
        {activeTab === "community" && (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Users className="h-5 w-5" />
                  社区活动规则更新
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <Alert>
                    <Star className="h-4 w-4" />
                    <AlertTitle>新手保护期取消</AlertTitle>
                    <AlertDescription>
                      新注册的账号没有新手保护期了，一上来就得按规矩办事！新账号首条笔记即按老号标准审核，无宽限期。
                      <CitationLink id="5" callType="quote" citations={citations} className="ml-2" />
                    </AlertDescription>
                  </Alert>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="p-4 bg-blue-50 rounded-lg">
                      <h4 className="font-medium text-blue-800 mb-2">账号管理新规</h4>
                      <ul className="text-sm text-blue-700 space-y-1">
                        <li>• 新账号无保护期，立即按标准审核</li>
                        <li>• 严打矩阵号同质化内容</li>
                        <li>• 同质化内容（≥50%重复）限流</li>
                        <li>• 关联账号连带处罚</li>
                      </ul>
                    </div>

                    <div className="p-4 bg-green-50 rounded-lg">
                      <h4 className="font-medium text-green-800 mb-2">社区生态优化</h4>
                      <ul className="text-sm text-green-700 space-y-1">
                        <li>• 鼓励差异化经营</li>
                        <li>• 提升内容质量要求</li>
                        <li>• 加强原创保护力度</li>
                        <li>• 优化用户体验</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>违规处罚阶梯制度</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-3 bg-yellow-50 rounded border-l-4 border-yellow-500">
                    <div>
                      <h5 className="font-medium text-yellow-800">首次违规</h5>
                      <p className="text-sm text-yellow-700">限流7天</p>
                    </div>
                    <Badge variant="outline" className="bg-yellow-100">1级</Badge>
                  </div>

                  <div className="flex items-center justify-between p-3 bg-orange-50 rounded border-l-4 border-orange-500">
                    <div>
                      <h5 className="font-medium text-orange-800">二次违规</h5>
                      <p className="text-sm text-orange-700">禁言15天</p>
                    </div>
                    <Badge variant="outline" className="bg-orange-100">2级</Badge>
                  </div>

                  <div className="flex items-center justify-between p-3 bg-red-50 rounded border-l-4 border-red-500">
                    <div>
                      <h5 className="font-medium text-red-800">三次违规</h5>
                      <p className="text-sm text-red-700">永久封号</p>
                    </div>
                    <Badge variant="destructive">3级</Badge>
                  </div>

                  <Alert className="mt-4">
                    <AlertTriangle className="h-4 w-4" />
                    <AlertTitle>连带责任</AlertTitle>
                    <AlertDescription>
                      同一商家多账号违规，全部连带处罚。平台强化内容真实性与原创保护，打击低质营销和矩阵号滥用。
                    </AlertDescription>
                  </Alert>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>平台发展趋势</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg">
                    <h4 className="font-medium text-blue-800 mb-3">内容生态优化</h4>
                    <ul className="text-sm text-blue-700 space-y-1">
                      <li>• 强化原创内容保护</li>
                      <li>• 提升内容质量标准</li>
                      <li>• 鼓励真实分享</li>
                      <li>• 打击虚假营销</li>
                    </ul>
                  </div>

                  <div className="p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-lg">
                    <h4 className="font-medium text-green-800 mb-3">商业化规范</h4>
                    <ul className="text-sm text-green-700 space-y-1">
                      <li>• 推广站内交易闭环</li>
                      <li>• 规范商业内容标记</li>
                      <li>• 优化变现工具</li>
                      <li>• 提升用户体验</li>
                    </ul>
                  </div>
                </div>

                <div className="mt-4 p-4 bg-purple-50 rounded-lg">
                  <h4 className="font-medium text-purple-800 mb-2">核心趋势总结</h4>
                  <p className="text-sm text-purple-700">
                    平台强化内容真实性与原创保护，打击低质营销和矩阵号滥用，鼓励合规创作与站内交易。
                    商家需用官方工具（如私信获客卡、聚光广告）替代外部导流。
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        )}
      </div>

      {/* 应用场景和实际案例 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Target className="h-5 w-5" />
            实际应用场景与案例分析
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-medium mb-3 text-green-700">✅ 合规案例</h4>
              <div className="space-y-3">
                <div className="p-3 bg-green-50 rounded border-l-4 border-green-500">
                  <h5 className="font-medium text-green-800">原创内容创作</h5>
                  <p className="text-sm text-green-700">博主发布原创美妆教程，字数超过600字，配图真实无过度修图，获得平台推荐</p>
                </div>
                <div className="p-3 bg-green-50 rounded border-l-4 border-green-500">
                  <h5 className="font-medium text-green-800">规范转载声明</h5>
                  <p className="text-sm text-green-700">用户转载他人内容时，在正文明确声明"本内容转载自XX创作者，已获得原作者授权"并@原作者</p>
                </div>
                <div className="p-3 bg-green-50 rounded border-l-4 border-green-500">
                  <h5 className="font-medium text-green-800">AI内容标注</h5>
                  <p className="text-sm text-green-700">创作者使用AI生成图片时主动标注"图片由AI生成"并勾选相关选项</p>
                </div>
              </div>
            </div>

            <div>
              <h4 className="font-medium mb-3 text-red-700">❌ 违规案例</h4>
              <div className="space-y-3">
                <div className="p-3 bg-red-50 rounded border-l-4 border-red-500">
                  <h5 className="font-medium text-red-800">站外导流</h5>
                  <p className="text-sm text-red-700">商家在评论区留微信号引导用户添加，被系统检测后账号被限制功能</p>
                </div>
                <div className="p-3 bg-red-50 rounded border-l-4 border-red-500">
                  <h5 className="font-medium text-red-800">内容搬运</h5>
                  <p className="text-sm text-red-700">用户直接复制他人笔记内容，未经授权发布，被原作者投诉后内容被下架</p>
                </div>
                <div className="p-3 bg-red-50 rounded border-l-4 border-red-500">
                  <h5 className="font-medium text-red-800">AI违规使用</h5>
                  <p className="text-sm text-red-700">账号使用AI生成虚假信息博取流量，被检测后账号被永久封禁</p>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 规则原文出处汇总 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <BookOpen className="h-5 w-5" />
            规则原文出处与参考资料
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="overflow-x-auto">
              <table className="w-full text-sm border-collapse border border-gray-300">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="border border-gray-300 p-2 text-left">规则类型</th>
                    <th className="border border-gray-300 p-2 text-left">发布时间</th>
                    <th className="border border-gray-300 p-2 text-left">生效时间</th>
                    <th className="border border-gray-300 p-2 text-left">原文链接</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="border border-gray-300 p-2">非原创规则更新</td>
                    <td className="border border-gray-300 p-2">2025年4月24日</td>
                    <td className="border border-gray-300 p-2">2025年5月12日</td>
                    <td className="border border-gray-300 p-2">
                      <CitationLink id="1" callType="recommend" citations={citations} />
                    </td>
                  </tr>
                  <tr>
                    <td className="border border-gray-300 p-2">侵权行为治理</td>
                    <td className="border border-gray-300 p-2">2025年6月</td>
                    <td className="border border-gray-300 p-2">即时生效</td>
                    <td className="border border-gray-300 p-2">
                      <CitationLink id="2" callType="recommend" citations={citations} />
                    </td>
                  </tr>
                  <tr>
                    <td className="border border-gray-300 p-2">安全中心上线</td>
                    <td className="border border-gray-300 p-2">2025年4月1日</td>
                    <td className="border border-gray-300 p-2">2025年4月16日</td>
                    <td className="border border-gray-300 p-2">
                      <CitationLink id="3" callType="recommend" citations={citations} />
                    </td>
                  </tr>
                  <tr>
                    <td className="border border-gray-300 p-2">7月新规实施</td>
                    <td className="border border-gray-300 p-2">2025年7月</td>
                    <td className="border border-gray-300 p-2">即时生效</td>
                    <td className="border border-gray-300 p-2">
                      <CitationLink id="5" callType="recommend" citations={citations} />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 总结与建议 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Gavel className="h-5 w-5" />
            总结与建议
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <Alert>
              <Info className="h-4 w-4" />
              <AlertTitle>重要提醒</AlertTitle>
              <AlertDescription>
                小红书在2025年1-7月期间进行了大规模的规则调整，主要目标是提升内容质量、保护原创权益、规范商业行为。
                建议所有用户及时了解新规，调整运营策略，确保合规经营。
              </AlertDescription>
            </Alert>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="p-4 bg-blue-50 rounded-lg">
                <h4 className="font-medium text-blue-800 mb-2">内容创作者</h4>
                <ul className="text-sm text-blue-700 space-y-1">
                  <li>• 坚持原创，避免搬运</li>
                  <li>• 规范转载声明</li>
                  <li>• 主动标注AI内容</li>
                  <li>• 提升内容质量</li>
                </ul>
              </div>

              <div className="p-4 bg-green-50 rounded-lg">
                <h4 className="font-medium text-green-800 mb-2">商家用户</h4>
                <ul className="text-sm text-green-700 space-y-1">
                  <li>• 使用官方交易工具</li>
                  <li>• 避免站外导流</li>
                  <li>• 规范商业内容标记</li>
                  <li>• 遵守私信联系规范</li>
                </ul>
              </div>

              <div className="p-4 bg-purple-50 rounded-lg">
                <h4 className="font-medium text-purple-800 mb-2">普通用户</h4>
                <ul className="text-sm text-purple-700 space-y-1">
                  <li>• 了解平台规则</li>
                  <li>• 合理使用举报功能</li>
                  <li>• 支持原创内容</li>
                  <li>• 维护社区生态</li>
                </ul>
              </div>
            </div>

            <div className="mt-6 p-4 bg-gradient-to-r from-red-50 to-pink-50 rounded-lg">
              <h4 className="font-medium text-red-800 mb-2">未来发展趋势</h4>
              <p className="text-sm text-red-700">
                小红书将继续加强内容质量管控，完善AI内容管理机制，优化商业化生态，
                推动平台向更加真实、友好、高质量的方向发展。建议用户持续关注平台规则更新，
                及时调整策略以适应平台发展趋势。
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 引用来源 */}
      <Card>
        <CardHeader>
          <CardTitle>参考资料与引用来源</CardTitle>
        </CardHeader>
        <CardContent className="text-xs sm:text-sm text-muted-foreground">
          <p className="font-semibold mb-2">References:</p>
          <ul className="space-y-1">
            {Object.entries(citations).map(([id, citation]) => (
              <li key={id}>
                <CitationLink id={id} callType="recommend" citations={citations} />
              </li>
            ))}
          </ul>
          <div className="mt-4 p-3 bg-gray-50 rounded text-xs">
            <p><strong>免责声明：</strong>本报告基于公开信息整理，具体规则以小红书官方最新公告为准。建议用户定期查看官方规则更新。</p>
            <p><strong>最后更新：</strong>2025年7月3日</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default XiaohongshuRulesReport;