import React, { useState } from 'react';
import { useTheme } from '../contexts/ThemeContext';
import { PageType } from '../components/Sidebar';
import {
  FileText,
  Download,
  Printer,
  RefreshCw,
  ArrowLeft,
  ChevronRight,
  Target,
  Users,
  TrendingUp,
  MessageSquare,
  Megaphone,
  Shield,
  BarChart3,
  Link2,
  Clock,
  AlertTriangle,
  CheckCircle,
  XCircle,
  History,
  FileUp,
  Send,
  Eye,
} from 'lucide-react';

interface FinalPlanProps {
  onNavigate: (page: PageType) => void;
}

const FinalPlan: React.FC<FinalPlanProps> = ({ onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  // 主题颜色类
  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';

  const [activeSection, setActiveSection] = useState('background');
  const [reviewStatus, setReviewStatus] = useState<'draft' | 'pending' | 'approved' | 'rejected'>('pending');
  const [showVersionHistory, setShowVersionHistory] = useState(false);

  // 版本历史数据
  const versionHistory = [
    { version: 'V3', date: '2026-03-19 16:00', author: '张策略', changes: '完成驱动分析与叙事策略优化' },
    { version: 'V2', date: '2026-03-19 14:30', author: '李智能', changes: '修正受众细分，补充渠道安排' },
    { version: 'V1', date: '2026-03-19 10:00', author: '张策略', changes: '初始版本生成' },
  ];

  const sections = [
    { id: 'background', label: '一、任务背景', icon: FileText },
    { id: 'goal', label: '二、宣传目标', icon: Target },
    { id: 'audience', label: '三、目标受众', icon: Users },
    { id: 'behavior', label: '四、预期行为', icon: TrendingUp },
    { id: 'driver', label: '五、驱动因素', icon: MessageSquare },
    { id: 'narrative', label: '六、叙事策略', icon: Megaphone },
    { id: 'channel', label: '七、渠道安排', icon: Link2 },
    { id: 'risk', label: '八、风险控制', icon: Shield },
    { id: 'evaluation', label: '九、效果评估', icon: BarChart3 },
  ];

  return (
    <div className="space-y-6">
      {/* 顶部操作栏 */}
      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <button
              onClick={() => onNavigate('strategy-result')}
              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
            >
              <ArrowLeft className="w-4 h-4" />
              返回
            </button>
            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-gray-200'}`} />
            <div>
              <h1 className={`${textPrimary} font-bold text-lg`}>五四青年节宣传活动策略方案</h1>
              <p className={`${textSecondary} text-sm`}>最终版方案 · V3 · 2026-03-19</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            {/* 审核状态 */}
            <div className="flex items-center gap-2">
              <span className={`${textSecondary} text-sm`}>审核状态：</span>
              <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium ${
                reviewStatus === 'approved'
                  ? 'bg-green-500/20 text-green-400'
                  : reviewStatus === 'pending'
                  ? 'bg-yellow-500/20 text-yellow-400'
                  : reviewStatus === 'rejected'
                  ? 'bg-red-500/20 text-red-400'
                  : `${inputBg} ${textSecondary}`
              }`}>
                {reviewStatus === 'approved' ? (
                  <><CheckCircle className="w-4 h-4" /> 已通过</>
                ) : reviewStatus === 'pending' ? (
                  <><Clock className="w-4 h-4" /> 审核中</>
                ) : reviewStatus === 'rejected' ? (
                  <><XCircle className="w-4 h-4" /> 未通过</>
                ) : (
                  <><FileText className="w-4 h-4" /> 草稿</>
                )}
              </div>
            </div>

            {/* 版本历史按钮 */}
            <button
              onClick={() => setShowVersionHistory(!showVersionHistory)}
              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
            >
              <History className="w-4 h-4" />
              版本历史
            </button>

            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-gray-200'}`} />

            <button className={`flex items-center gap-2 px-4 py-2.5 ${btnSecondary} rounded-lg text-sm transition-colors`}>
              <Printer className="w-4 h-4" />
              打印
            </button>
            <button className={`flex items-center gap-2 px-4 py-2.5 ${btnSecondary} rounded-lg text-sm transition-colors`}>
              <Download className="w-4 h-4" />
              导出Word
            </button>
            <button className={`flex items-center gap-2 px-4 py-2.5 ${btnSecondary} rounded-lg text-sm transition-colors`}>
              <Download className="w-4 h-4" />
              导出PDF
            </button>
            <button className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}>
              <FileUp className="w-4 h-4" />
              导出汇报提纲
            </button>

            {/* 审核操作 */}
            {reviewStatus === 'pending' ? (
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setReviewStatus('approved')}
                  className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}
                >
                  <CheckCircle className="w-4 h-4" />
                  通过
                </button>
                <button
                  onClick={() => setReviewStatus('rejected')}
                  className="flex items-center gap-2 px-4 py-2.5 bg-red-600/20 hover:bg-red-600/30 border border-red-500/30 text-red-400 rounded-lg text-sm transition-colors"
                >
                  <XCircle className="w-4 h-4" />
                  驳回
                </button>
              </div>
            ) : reviewStatus === 'draft' ? (
              <button className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}>
                <Send className="w-4 h-4" />
                提交审核
              </button>
            ) : (
              <button className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}>
                <RefreshCw className="w-4 h-4" />
                发起修订
              </button>
            )}
          </div>
        </div>

        {/* 版本历史面板 */}
        {showVersionHistory && (
          <div className={`mt-4 pt-4 border-t ${cardBorder}`}>
            <div className="grid grid-cols-3 gap-4">
              {versionHistory.map((v, i) => (
                <div
                  key={v.version}
                  className={`p-4 rounded-lg border ${
                    i === 0
                      ? 'bg-blue-500/10 border-blue-500/30'
                      : `${inputBg} ${cardBorder}`
                  }`}
                >
                  <div className="flex items-center justify-between mb-2">
                    <span className={`text-sm font-bold ${
                      i === 0 ? 'text-blue-400' : textSecondary
                    }`}>
                      {v.version}
                    </span>
                    {i === 0 && (
                      <span className="px-2 py-0.5 bg-blue-500/20 text-blue-400 rounded text-xs">
                        当前
                      </span>
                    )}
                  </div>
                  <p className={`${textSecondary} text-xs mb-1`}>{v.date}</p>
                  <p className={`${textPrimary} text-sm`}>{v.changes}</p>
                  <p className={`${textMuted} text-xs mt-1`}>作者：{v.author}</p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      <div className="grid grid-cols-4 gap-6">
        {/* 左侧导航目录 (20%) */}
        <div className="col-span-1">
          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4 sticky top-6`}>
            <h3 className={`${textPrimary} font-semibold mb-4`}>目录导航</h3>
            <nav className="space-y-1">
              {sections.map((section) => (
                <button
                  key={section.id}
                  onClick={() => setActiveSection(section.id)}
                  className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left text-sm transition-colors ${
                    activeSection === section.id
                      ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30'
                      : `${textSecondary} hover:${isDark ? 'bg-slate-700/50' : 'bg-gray-100'} hover:${textPrimary}`
                  }`}
                >
                  <span className="text-xs opacity-50">{section.label.split('、')[0]}</span>
                  <span>{section.label.split('、')[1]}</span>
                </button>
              ))}
            </nav>

            {/* 版本信息 */}
            <div className={`mt-6 pt-4 border-t ${cardBorder}`}>
              <div className={`flex items-center gap-2 ${textSecondary} text-xs mb-2`}>
                <Clock className="w-3 h-3" />
                版本信息
              </div>
              <div className="space-y-1 text-xs">
                <p className={textSecondary}>当前版本：<span className={isDark ? 'text-cyan-400' : 'text-red-500'}>V3</span></p>
                <p className={textSecondary}>生成时间：2026-03-19 16:00</p>
                <p className={textSecondary}>关联任务：TASK-2026-0319-001</p>
              </div>
            </div>

            {/* 风险提示 */}
            <div className={`mt-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg`}>
              <div className={`flex items-center gap-2 text-amber-400 text-xs font-medium mb-1`}>
                <AlertTriangle className="w-3 h-3" />
                风险提示
              </div>
              <p className={`${textSecondary} text-xs`}>需关注预算控制和内容质量</p>
            </div>
          </div>
        </div>

        {/* 中间正文区 (60%) */}
        <div className="col-span-2">
          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-8`}>
            {/* 标题 */}
            <div className={`text-center mb-8 pb-6 border-b ${cardBorder}`}>
              <h1 className={`text-2xl font-bold ${textPrimary} mb-2`}>五四青年节宣传活动策略方案</h1>
              <p className={textSecondary}>最终版 · V3</p>
            </div>

            {/* 逻辑总括 - 高亮显示 */}
            <div className="mb-8 p-6 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 border border-blue-500/30 rounded-xl">
              <p className={`${textSecondary} leading-relaxed`}>
                <strong className="text-cyan-400">逻辑总括：</strong>
                本次宣传拟面向<span className="text-cyan-400 font-medium">【18-25岁基层青年】</span>，
                围绕其<span className="text-yellow-400 font-medium">【社交认同与自我表达】</span>驱动，
                传播<span className="text-purple-400 font-medium">【真实、有态度的青年故事】</span>叙事，
                促使其产生<span className="text-green-400 font-medium">【主动参与互动并生成UGC内容】</span>行为，
                从而实现<span className="text-blue-400 font-medium">【提升品牌在Z世代用户中的认知度】</span>目标。
              </p>
            </div>

            {/* 正文内容 */}
            <div className="space-y-8">
              {/* 一、任务背景 */}
              <section>
                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
                  <FileText className="w-5 h-5 text-blue-400" />
                  一、任务背景
                </h2>
                <div className={`${textSecondary} leading-relaxed space-y-3 pl-7`}>
                  <p>五四青年节将至，公司希望借此契机开展一次面向年轻群体的品牌宣传活动，提升品牌在Z世代用户中的认知度和好感度。</p>
                  <p>本次活动需要制定一套完整的宣传策略，包括目标受众分析、行为设计、叙事框架、渠道安排等内容。</p>
                  <div className={`p-4 ${inputBg} ${cardBorder} rounded-lg`}>
                    <p className={`${textMuted} text-sm mb-2`}>特殊约束</p>
                    <p>• 预算有限，需注重性价比</p>
                    <p>• 需在5月1日前完成所有准备工作</p>
                    <p>• 传播效果需可量化评估</p>
                  </div>
                </div>
              </section>

              {/* 二、宣传目标 */}
              <section>
                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
                  <Target className="w-5 h-5 text-blue-400" />
                  二、宣传目标
                </h2>
                <div className="pl-7 space-y-4">
                  <div className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
                    <p className="text-blue-400 text-sm font-medium mb-2">主目标</p>
                    <p className={textPrimary}>提升品牌在Z世代用户中的认知度</p>
                    <p className={`${textSecondary} text-sm mt-2`}>具体指标：活动期间品牌相关话题曝光量达500万+</p>
                  </div>
                  <div className="p-4 bg-green-500/10 border border-green-500/30 rounded-lg">
                    <p className="text-green-400 text-sm font-medium mb-2">次目标</p>
                    <p className={textPrimary}>建立品牌年轻化形象，增强用户情感连接</p>
                  </div>
                </div>
              </section>

              {/* 三、目标受众 */}
              <section>
                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
                  <Users className="w-5 h-5 text-cyan-400" />
                  三、目标受众
                </h2>
                <div className="pl-7 space-y-4">
                  <div className="p-4 bg-cyan-500/10 border border-cyan-500/30 rounded-lg">
                    <p className="text-cyan-400 text-sm font-medium mb-2">核心受众</p>
                    <p className={`${textPrimary} font-medium`}>18-25岁基层青年</p>
                    <div className="mt-3 grid grid-cols-2 gap-4">
                      <div>
                        <p className={`${textMuted} text-xs mb-1`}>人口特征</p>
                        <p className={`${textSecondary} text-sm`}>学生、基层工作者为主</p>
                      </div>
                      <div>
                        <p className={`${textMuted} text-xs mb-1`}>媒体习惯</p>
                        <p className={`${textSecondary} text-sm`}>短视频、社交平台重度用户</p>
                      </div>
                    </div>
                  </div>
                  <div className={`p-4 ${inputBg} ${isDark ? 'border-slate-700/30' : 'border-gray-200'} rounded-lg`}>
                    <p className={`${textSecondary} text-sm font-medium mb-2`}>次级受众</p>
                    <p className={textSecondary}>25-30岁职场新人</p>
                  </div>
                </div>
              </section>

              {/* 四、预期行为及关键驱动 */}
              <section>
                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
                  <TrendingUp className="w-5 h-5 text-green-400" />
                  四、预期行为及关键驱动
                </h2>
                <div className="pl-7 space-y-4">
                  <div className="p-4 bg-green-500/10 border border-green-500/30 rounded-lg">
                    <p className="text-green-400 text-sm font-medium mb-2">目标行为</p>
                    <p className={textPrimary}>主动参与话题讨论、生成UGC内容</p>
                    <div className="mt-3 flex items-center gap-2">
                      <span className={`${textSecondary} text-sm`}>转化路径：</span>
                      {['浏览', '点赞', '评论', '转发', '创作'].map((step, i) => (
                        <React.Fragment key={step}>
                          <span className={`px-2 py-1 rounded text-xs ${
                            i < 2 ? 'bg-green-500/20 text-green-400' : `${inputBg} ${textSecondary}`
                          }`}>
                            {step}
                          </span>
                          {i < 4 && <span className={isDark ? 'text-slate-600' : 'text-gray-400'}>→</span>}
                        </React.Fragment>
                      ))}
                    </div>
                  </div>
                  <div className="p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
                    <p className="text-yellow-400 text-sm font-medium mb-2">核心驱动</p>
                    <p className={textPrimary}>社交认同与自我表达</p>
                    <div className="mt-2 flex gap-2">
                      {['归属感需求', '表达欲驱动', '群体认同激励'].map((item) => (
                        <span key={item} className="px-2 py-1 bg-yellow-500/20 text-yellow-400 rounded text-xs">
                          {item}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </section>

              {/* 五、叙事策略 */}
              <section>
                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
                  <Megaphone className="w-5 h-5 text-purple-400" />
                  五、叙事策略
                </h2>
                <div className="pl-7 space-y-4">
                  <div className="p-4 bg-purple-500/10 border border-purple-500/30 rounded-lg">
                    <p className="text-purple-400 text-sm font-medium mb-2">主叙事模式</p>
                    <p className={textPrimary}>真实、有态度的青年故事</p>
                  </div>
                  <div className={`p-4 ${inputBg} ${isDark ? 'border-slate-700/30' : 'border-gray-200'} rounded-lg`}>
                    <p className={`${textSecondary} text-sm font-medium mb-2`}>叙事策略</p>
                    <p className={textSecondary}>人物+事件结合，以真实故事传递品牌价值观。讲述年轻人自己的故事，引发情感共鸣。</p>
                  </div>
                </div>
              </section>

              {/* 六、渠道与执行安排 */}
              <section>
                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
                  <Link2 className="w-5 h-5 text-pink-400" />
                  六、渠道与执行安排
                </h2>
                <div className="pl-7">
                  <div className="grid grid-cols-3 gap-4">
                    {[
                      { platform: '抖音', role: '主战场，短视频传播', weight: '40%' },
                      { platform: '微博', role: '话题引爆，社交传播', weight: '30%' },
                      { platform: '小红书', role: '种草转化，UGC沉淀', weight: '30%' },
                    ].map((channel) => (
                      <div key={channel.platform} className="p-4 bg-pink-500/10 border border-pink-500/30 rounded-lg">
                        <p className="text-pink-400 font-medium">{channel.platform}</p>
                        <p className={`${textSecondary} text-sm mt-1`}>{channel.role}</p>
                        <p className={`${textMuted} text-xs mt-2`}>预算占比：{channel.weight}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </section>

              {/* 七、风险控制 */}
              <section>
                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
                  <Shield className="w-5 h-5 text-red-400" />
                  七、风险控制
                </h2>
                <div className="pl-7 space-y-3">
                  {[
                    { risk: '预算有限，需控制成本', mitigation: '提前布局预热，优化投放策略' },
                    { risk: '青年群体注意力分散', mitigation: '内容差异化，强调情感共鸣' },
                    { risk: 'UGC质量难以保证', mitigation: '设置激励机制，建立内容审核' },
                  ].map((item, i) => (
                    <div key={i} className={`flex gap-4 p-3 ${inputBg} ${isDark ? 'border-slate-700/30' : 'border-gray-200'} rounded-lg`}>
                      <div className="flex-1">
                        <p className="text-red-400 text-xs font-medium">风险{i + 1}</p>
                        <p className={`${textPrimary} text-sm`}>{item.risk}</p>
                      </div>
                      <div className="flex-1">
                        <p className="text-green-400 text-xs font-medium">应对措施</p>
                        <p className={`${textSecondary} text-sm`}>{item.mitigation}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </section>

              {/* 八、效果评估 */}
              <section>
                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
                  <BarChart3 className="w-5 h-5 text-amber-400" />
                  八、效果评估
                </h2>
                <div className="pl-7">
                  <div className="grid grid-cols-4 gap-4">
                    {[
                      { metric: '曝光量', target: '500万+', current: '0' },
                      { metric: '互动率', target: '5%', current: '0%' },
                      { metric: 'UGC数量', target: '1000+', current: '0' },
                      { metric: '话题热度', target: 'TOP 20', current: '-' },
                    ].map((item) => (
                      <div key={item.metric} className="p-4 bg-amber-500/10 border border-amber-500/30 rounded-lg text-center">
                        <p className="text-amber-400 text-xs">{item.metric}</p>
                        <p className={`${textPrimary} font-bold text-lg mt-1`}>{item.target}</p>
                        <p className={`${textMuted} text-xs mt-1`}>目标值</p>
                      </div>
                    ))}
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>

        {/* 右侧辅助区 (20%) */}
        <div className="col-span-1 space-y-6">
          {/* 关联讨论记录 */}
          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
            <h3 className={`${textPrimary} font-semibold mb-4`}>关联讨论记录</h3>
            <button className={`w-full flex items-center justify-between p-3 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors`}>
              <div className="flex items-center gap-2 text-blue-400 text-sm">
                <FileText className="w-4 h-4" />
                TASK-2026-0319-001
              </div>
              <ChevronRight className={`w-4 h-4 ${textSecondary}`} />
            </button>
          </div>

          {/* 快速操作 */}
          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
            <h3 className={`${textPrimary} font-semibold mb-4`}>快速操作</h3>
            <div className="space-y-2">
              <button className={`w-full flex items-center gap-3 p-3 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors text-left`}>
                <Download className="w-4 h-4 text-green-400" />
                <div>
                  <p className={`${textPrimary} text-sm`}>导出完整方案</p>
                  <p className={`${textMuted} text-xs`}>Word格式</p>
                </div>
              </button>
              <button className={`w-full flex items-center gap-3 p-3 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors text-left`}>
                <RefreshCw className="w-4 h-4 text-blue-400" />
                <div>
                  <p className={`${textPrimary} text-sm`}>发起新版本修订</p>
                  <p className={`${textMuted} text-xs`}>基于当前版本</p>
                </div>
              </button>
            </div>
          </div>

          {/* 分享 */}
          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
            <h3 className={`${textPrimary} font-semibold mb-4`}>分享方案</h3>
            <div className="flex gap-2">
              <button className={`flex-1 p-2 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors`}>
                <p className={`${textSecondary} text-xs`}>复制链接</p>
              </button>
              <button className={`flex-1 p-2 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors`}>
                <p className={`${textSecondary} text-xs`}>发送邮件</p>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FinalPlan;