import React, { useState, useEffect, useMemo } from 'react';
import { 
  BookOpen, BrainCircuit, CheckCircle2, XCircle, RotateCcw, 
  ChevronRight, Award, ChevronLeft, Sparkles, LayoutDashboard, 
  Search, Calculator, TrendingUp, AlertCircle, DollarSign, Activity,
  Menu, X
} from 'lucide-react';

// ==========================================
// 数据源配置 (Data Sources)
// ==========================================

// 1. 闪卡题库 (精选核心)
const FLASHCARDS = [
  { id: 1, category: "基础术语", q: "基础漏斗模型的四个核心步骤是什么？", a: "曝光 (Impression) ➔ 点击 (Click) ➔ 访问/加购 (Visit/Add to Cart) ➔ 成交 (Orders)" },
  { id: 2, category: "核心指标", q: "CTR (点击率) 的及格线和优秀线分别是多少？", a: "及格线：≥ 1%\n优秀线：≥ 2%\n(反映素材或封面的吸引力)" },
  { id: 3, category: "核心指标", q: "什么是 CVR？及格线是多少？", a: "CVR (转化率) = 成交量 ÷ 点击量 × 100%。\n反映商品价格、详情页、评价的转化能力。及格线通常在 1.5%~3%。" },
  { id: 4, category: "核心指标", q: "什么是保本 ROI (投资回报率)？", a: "花出去的钱和赚回来的钱持平的临界点。例如保本线为 1.35，低于 1.35 就是亏损，必须马上优化！" },
  { id: 5, category: "核心指标", q: "真实 ROI 的计算公式里，除了广告费还包含哪些成本？", a: "真实 ROI = GMV ÷ (广告费 + 商品成本 + 平台费/佣金 + 运费/退货损耗)" },
  { id: 6, category: "基础术语", q: "CPA (单次成交成本) 的安全线应该怎么定？", a: "CPA 越低越好。通常要求 CPA ≤ 目标利润的 50% 或 ≤ 客单价(AOV) × 30% 为安全线。" },
  { id: 7, category: "基础术语", q: "ROAS (广告花费回报率) 怎么算？及格线是多少？", a: "ROAS = GMV ÷ 广告花费。\n及格线：≥ 2.0\n优质线：≥ 3.0" },
  { id: 8, category: "TikTok策略", q: "TikTok 投放的“双轮驱动法”是什么？", a: "自然流 (免费) 测素材找方向 ➕ 付费流 (广告) 放大爆款获取规模化 GMV。" },
  { id: 9, category: "故障排查", q: "急救SOP：当天见效的“重新启动消耗 3 板斧”是什么？", a: "换素材 (5-10条新) ➕ 提预算 (≥$50/天) ➕ 放宽定向 (Broad 优先)。" },
  { id: 10, category: "优化决策", q: "“大盘竞争加剧”时（如双11），CPM 会发生什么变化？", a: "CPM (千次曝光成本) 会大幅上涨。同等预算下，买到的流量会变少，消耗变慢。" }
];

// 2. 测试题库
const QUIZ_QUESTIONS = [
  { id: 1, question: "今天刚建的 TikTok 计划，跑半天 CTR 只有 0.6%，你最应该做的是？", options: ["马上增加每日预算", "去优化商品详情页", "停止该计划，换更有吸引力的素材", "缩小定向人群只投女性"], correct: 2, explanation: "CTR 0.6% 远低于及格线 1%，说明用户根本不愿点击。核心原因是素材(前3秒)不够吸睛，必须立刻换素材。" },
  { id: 2, question: "看着 GMV 暴涨，但月底一算却亏了。最大可能是什么？", options: ["没关注点击率", "系统出错", "没算准真实 ROI 和保本线", "客单价太高"], correct: 2, explanation: "GMV 是营业额，不代表利润。必须扣除商品成本、运费、平台费算真实 ROI，低于保本线就是赔本赚吆喝。" },
  { id: 3, question: "素材的 CVR（转化率）很低只有 0.5%，问题出在哪？", options: ["视频封面太丑", "落地页/价格/评论不行", "前3秒没钩子", "出价太低"], correct: 1, explanation: "CVR低意味着“进来了但不买”。说明流量承接极差，必须优化商品价格、卖点图或刷好评。" },
  { id: 4, question: "大促期间（如双11），关于 ROI 的策略哪句话是正确的？", options: ["ROI 必须比平时更高", "ROI 可以低于保本线去抢流量", "ROI 可适当降低但必须≥保本线", "大促不看ROI只看GMV"], correct: 2, explanation: "大促期间流量贵且竞争激烈，为抢占份额可适当降低 ROI 预期，但底线是必须保本，绝对不能“亏本冲量”导致资金断裂。" },
  { id: 5, question: "日常预算分配“352原则”中，30% 的预算永远应该留给谁？", options: ["老爆款计划", "品牌日常防御", "测试新素材和新定向", "达人坑位费"], correct: 2, explanation: "30% 是测试预算，保证账户有源源不断的新鲜血液（新素材），防止老素材衰减后无广告可投。" }
];

// 3. 术语词典库 (Dictionary)
const DICTIONARY_TERMS = [
  { term: "CTR", full: "Click Through Rate", zh: "点击率", formula: "点击量 ÷ 曝光量 × 100%", desc: "衡量广告素材或封面吸引力的核心指标。反映了多少人看了广告后愿意点进来。", tips: "电商大盘合格线通常为 1%，优秀为 2%以上。如果 CTR 太低，别犹豫，立刻换素材（前3秒钩子/封面）。" },
  { term: "CVR", full: "Conversion Rate", zh: "转化率", formula: "成交单量 ÷ 点击量 × 100%", desc: "衡量流量承接能力的指标。反映了点进来的用户中，有多少人最终掏钱买了。", tips: "如果 CTR 很高但 CVR 很低，说明“挂羊头卖狗肉”或价格太贵、评价太差。需要优化落地页、降价或补充好评。" },
  { term: "CPA", full: "Cost Per Action", zh: "单次成交成本 (获客成本)", formula: "广告总花费 ÷ 成交单量", desc: "你为了卖出一单商品，平均需要花多少广告费。", tips: "CPA 必须低于你的单均毛利润！建议控制在客单价(AOV)的 30% 以内为安全线。" },
  { term: "ROI", full: "Return On Investment", zh: "投资回报率", formula: "(总收入 - 总成本) ÷ 总成本 × 100%", desc: "衡量生意到底“赚没赚钱”的终极指标。这里的成本需包含广告费、商品成本、物流、平台佣金等所有开支。", tips: "投放前一定要算出你的“保本 ROI”。低于保本线就是卖一单亏一单，必须及时止损。" },
  { term: "ROAS", full: "Return On Ad Spend", zh: "广告花费回报率", formula: "GMV (总营业额) ÷ 广告花费", desc: "专门衡量“广告花钱效率”的指标。花1块钱广告能带来多少钱的营业额。", tips: "通常 ROAS ≥ 2.0 为及格，≥ 3.0 为优质。它不代表利润，只代表广告的带货效率。" },
  { term: "GMV", full: "Gross Merchandise Volume", zh: "商品交易总额 (营业额)", formula: "订单数 × 客单价", desc: "用户实际支付的订单总金额汇总，不扣除任何成本。", tips: "新手最容易踩的坑就是“只看 GMV 不看 ROI”，导致虚假繁荣，最后一看账本亏本了。" },
  { term: "AOV", full: "Average Order Value", zh: "平均客单价", formula: "GMV ÷ 成交订单数", desc: "每个下单的客户平均花了多少钱。", tips: "提升 AOV 是对抗流量变贵的利器。可以通过满减、买二送一、组合套餐来拉高客单价。" },
  { term: "CPM", full: "Cost Per Mille", zh: "千次展现成本", formula: "广告花费 ÷ 曝光量 × 1000", desc: "让你的广告被 1000 个人看到需要花多少钱。反映了大盘流量的竞争激烈程度。", tips: "大促期间（双11）CPM 必然飙升。如果你的素材不够好，买量成本会极其高昂。" },
  { term: "Broad", full: "Broad Targeting", zh: "宽泛定向 (通投)", formula: "N/A", desc: "不限制年龄、性别、兴趣等条件，把寻找目标用户的任务全权交给平台算法。", tips: "在 TikTok 等强算法平台，Broad 定向往往比精准定向效果更好，能让系统有足够空间找到转化人群。" },
  { term: "LAL / Lookalike", full: "Lookalike Audience", zh: "相似受众", formula: "N/A", desc: "提供一批种子用户（如买过你东西的人），系统会自动在全网帮你寻找行为标签相似的人群。", tips: "当你现有的受众包“洗”不动了（频次变高，CTR下降），拉一个优质的 LAL 包是扩量最好的办法。" }
];

const shuffleArray = (array) => [...array].sort(() => Math.random() - 0.5);

// ==========================================
// 主应用组件
// ==========================================
export default function App() {
  const [currentView, setCurrentView] = useState('dashboard'); // dashboard, flashcards, quiz, dictionary, calculator
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // --- 全局统计状态 (模拟进度保存) ---
  const [stats, setStats] = useState({
    cardsMastered: 0,
    cardsReviewed: 0,
    highestQuizScore: 0,
    quizzesTaken: 0
  });

  // --- 闪卡状态 ---
  const [fcQueue, setFcQueue] = useState([]);
  const [fcMasteredThisSession, setFcMasteredThisSession] = useState(0);
  const [fcTotal, setFcTotal] = useState(0);
  const [isFlipped, setIsFlipped] = useState(false);
  const [fcComplete, setFcComplete] = useState(false);

  // --- 测试状态 ---
  const QUIZ_SESSION_LIMIT = 5;
  const [quizQueue, setQuizQueue] = useState([]);
  const [currentQuizIdx, setCurrentQuizIdx] = useState(0);
  const [quizScore, setQuizScore] = useState(0);
  const [quizComplete, setQuizComplete] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);
  const [showExplanation, setShowExplanation] = useState(false);

  // --- 词典状态 ---
  const [searchTerm, setSearchTerm] = useState('');

  // --- 闪卡逻辑 ---
  const startFlashcards = () => {
    const shuffled = shuffleArray(FLASHCARDS);
    setFcQueue(shuffled);
    setFcTotal(shuffled.length);
    setFcMasteredThisSession(0);
    setFcComplete(false);
    setIsFlipped(false);
    setCurrentView('flashcards');
    setIsMobileMenuOpen(false);
  };

  const handleFcNext = (status) => {
    let newQueue = [...fcQueue];
    const currentCard = newQueue.shift();

    if (status === 'mastered') {
      setFcMasteredThisSession(prev => prev + 1);
      setStats(s => ({ ...s, cardsMastered: s.cardsMastered + 1 }));
    } else {
      newQueue.push(currentCard);
      setStats(s => ({ ...s, cardsReviewed: s.cardsReviewed + 1 }));
    }

    setFcQueue(newQueue);
    setIsFlipped(false);
    if (newQueue.length === 0) setFcComplete(true);
  };

  // --- 测试逻辑 ---
  const startQuiz = () => {
    const shuffledSubset = shuffleArray(QUIZ_QUESTIONS).slice(0, QUIZ_SESSION_LIMIT);
    setQuizQueue(shuffledSubset);
    setCurrentQuizIdx(0);
    setQuizScore(0);
    setQuizComplete(false);
    setSelectedOption(null);
    setShowExplanation(false);
    setCurrentView('quiz');
    setIsMobileMenuOpen(false);
  };

  const handleOptionSelect = (idx) => {
    if (showExplanation) return; 
    setSelectedOption(idx);
    setShowExplanation(true);
    if (idx === quizQueue[currentQuizIdx].correct) {
      setQuizScore(prev => prev + 1);
    }
  };

  const handleQuizNext = () => {
    setSelectedOption(null);
    setShowExplanation(false);
    if (currentQuizIdx < quizQueue.length - 1) {
      setCurrentQuizIdx(prev => prev + 1);
    } else {
      setQuizComplete(true);
      setStats(s => ({
        ...s,
        quizzesTaken: s.quizzesTaken + 1,
        highestQuizScore: Math.max(s.highestQuizScore, quizScore + (selectedOption === quizQueue[currentQuizIdx].correct ? 1 : 0))
      }));
    }
  };

  // ==========================================
  // 子视图渲染器
  // ==========================================

  // 1. 仪表盘首页 (Dashboard)
  const renderDashboard = () => (
    <div className="animate-fade-in space-y-8">
      {/* 欢迎模块 */}
      <div className="bg-gradient-to-br from-indigo-600 to-blue-700 rounded-3xl p-8 text-white shadow-lg relative overflow-hidden">
        <div className="absolute top-0 right-0 p-8 opacity-10 pointer-events-none">
          <TrendingUp size={160} />
        </div>
        <div className="relative z-10">
          <h1 className="text-3xl md:text-4xl font-bold mb-4 tracking-tight">你好，投放操盘手 <Sparkles className="inline text-yellow-300 mb-2" /></h1>
          <p className="text-indigo-100 text-lg max-w-xl leading-relaxed">
            欢迎来到你的专属电商投放研习社。在这里，你可以查询术语、计算收益、通过科学测试掌握上百条优化策略。
          </p>
        </div>
      </div>

      {/* 数据总览 */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[
          { label: '已掌握知识点', val: stats.cardsMastered, icon: <CheckCircle2 size={20} className="text-emerald-500" /> },
          { label: '复习次数', val: stats.cardsReviewed, icon: <RotateCcw size={20} className="text-orange-500" /> },
          { label: '测试最高分', val: `${stats.highestQuizScore}/${QUIZ_SESSION_LIMIT}`, icon: <Award size={20} className="text-yellow-500" /> },
          { label: '完成测试数', val: stats.quizzesTaken, icon: <Activity size={20} className="text-blue-500" /> },
        ].map((stat, i) => (
          <div key={i} className="bg-white rounded-2xl p-5 border border-slate-100 shadow-sm flex flex-col justify-center">
            <div className="flex items-center mb-2 space-x-2">
              {stat.icon}
              <span className="text-slate-500 text-sm font-medium">{stat.label}</span>
            </div>
            <div className="text-3xl font-bold text-slate-800">{stat.val}</div>
          </div>
        ))}
      </div>

      {/* 快捷入口 */}
      <h2 className="text-xl font-bold text-slate-800 pt-4">核心工具箱</h2>
      <div className="grid md:grid-cols-2 gap-6">
        <button onClick={startFlashcards} className="group relative bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-blue-300 transition-all text-left flex items-start space-x-4">
          <div className="bg-blue-50 text-blue-600 p-3 rounded-xl group-hover:scale-110 transition-transform"><BookOpen size={24}/></div>
          <div>
            <h3 className="text-lg font-bold text-slate-800 mb-1">错题循环闪卡</h3>
            <p className="text-sm text-slate-500 leading-relaxed">智能记忆算法，攻克死记硬背的缩写和SOP口诀，不会的题循环出现。</p>
          </div>
        </button>

        <button onClick={startQuiz} className="group relative bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-orange-300 transition-all text-left flex items-start space-x-4">
          <div className="bg-orange-50 text-orange-600 p-3 rounded-xl group-hover:scale-110 transition-transform"><BrainCircuit size={24}/></div>
          <div>
            <h3 className="text-lg font-bold text-slate-800 mb-1">情景自测特训</h3>
            <p className="text-sm text-slate-500 leading-relaxed">随机抽取实战灾难场景，测试你的投放直觉，配备导师级详细解析。</p>
          </div>
        </button>

        <button onClick={() => setCurrentView('calculator')} className="group relative bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-emerald-300 transition-all text-left flex items-start space-x-4">
          <div className="bg-emerald-50 text-emerald-600 p-3 rounded-xl group-hover:scale-110 transition-transform"><Calculator size={24}/></div>
          <div>
            <h3 className="text-lg font-bold text-slate-800 mb-1">投放健康度计算器</h3>
            <p className="text-sm text-slate-500 leading-relaxed">一键输入基础数据，自动算清 ROI、ROAS、CPA 等指标，智能诊断亏损原因。</p>
          </div>
        </button>

        <button onClick={() => setCurrentView('dictionary')} className="group relative bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-purple-300 transition-all text-left flex items-start space-x-4">
          <div className="bg-purple-50 text-purple-600 p-3 rounded-xl group-hover:scale-110 transition-transform"><Search size={24}/></div>
          <div>
            <h3 className="text-lg font-bold text-slate-800 mb-1">专业术语词典</h3>
            <p className="text-sm text-slate-500 leading-relaxed">电商黑话查询大全，包含中英对照、通俗解释与实战避坑建议。</p>
          </div>
        </button>
      </div>
    </div>
  );

  // 2. 专业术语词典 (Dictionary)
  const renderDictionary = () => {
    const filteredTerms = DICTIONARY_TERMS.filter(t => 
      t.term.toLowerCase().includes(searchTerm.toLowerCase()) || 
      t.zh.includes(searchTerm) ||
      t.desc.includes(searchTerm)
    );

    return (
      <div className="animate-fade-in flex flex-col h-full max-w-4xl mx-auto space-y-6">
        <div className="flex items-center justify-between mb-2">
          <h2 className="text-2xl font-bold text-slate-800 flex items-center">
            <Search className="mr-3 text-purple-500" /> 专业术语词典
          </h2>
        </div>

        <div className="relative">
          <Search className="absolute left-4 top-3.5 text-slate-400" size={20} />
          <input 
            type="text" 
            placeholder="搜索术语缩写、中文名称或解释..." 
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-12 pr-4 py-3 rounded-2xl border border-slate-200 shadow-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition-all text-slate-700 bg-white"
          />
        </div>

        <div className="grid gap-4 md:gap-6 pb-8">
          {filteredTerms.length > 0 ? filteredTerms.map((t, idx) => (
            <div key={idx} className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
              <div className="flex flex-col md:flex-row md:items-start md:justify-between mb-4 border-b border-slate-50 pb-4">
                <div>
                  <div className="flex items-center space-x-3 mb-1">
                    <h3 className="text-2xl font-black text-purple-700 tracking-tight">{t.term}</h3>
                    <span className="bg-purple-50 text-purple-600 px-3 py-1 rounded-full text-sm font-bold">{t.zh}</span>
                  </div>
                  <p className="text-slate-400 text-sm font-medium">{t.full}</p>
                </div>
                {t.formula !== 'N/A' && (
                  <div className="mt-3 md:mt-0 bg-slate-50 px-4 py-2 rounded-xl text-slate-600 text-sm font-mono flex items-center">
                    <Calculator size={14} className="mr-2 text-slate-400" /> {t.formula}
                  </div>
                )}
              </div>
              <div className="space-y-3">
                <p className="text-slate-700 leading-relaxed"><span className="font-bold text-slate-800">解释：</span>{t.desc}</p>
                <div className="bg-amber-50 text-amber-800 p-4 rounded-xl text-sm leading-relaxed border border-amber-100/50">
                  <span className="font-bold flex items-center mb-1"><AlertCircle size={16} className="mr-1.5"/> 导师建议：</span>
                  {t.tips}
                </div>
              </div>
            </div>
          )) : (
            <div className="text-center py-20 text-slate-400">
              <Search size={48} className="mx-auto mb-4 opacity-20" />
              <p>没有找到相关术语</p>
            </div>
          )}
        </div>
      </div>
    );
  };

  // 3. 投放健康度计算器 (Calculator)
  const CalculatorView = () => {
    const [inputs, setInputs] = useState({ spend: '', impress: '', clicks: '', orders: '', gmv: '', productCost: '', otherCost: '' });

    const handleChange = (e) => setInputs({ ...inputs, [e.target.name]: Number(e.target.value) || '' });

    const results = useMemo(() => {
      const s = inputs.spend || 0, i = inputs.impress || 0, c = inputs.clicks || 0, o = inputs.orders || 0, g = inputs.gmv || 0;
      const pc = inputs.productCost || 0, oc = inputs.otherCost || 0;
      
      const ctr = i ? (c / i) * 100 : 0;
      const cvr = c ? (o / c) * 100 : 0;
      const cpa = o ? s / o : 0;
      const cpm = i ? (s / i) * 1000 : 0;
      const aov = o ? g / o : 0;
      const roas = s ? g / s : 0;
      
      const totalCost = s + pc + oc;
      const profit = g - totalCost;
      const roi = totalCost ? (profit / totalCost) * 100 : 0;

      return { ctr, cvr, cpa, cpm, aov, roas, profit, roi, totalCost };
    }, [inputs]);

    // 状态评级组件
    const MetricCard = ({ title, value, unit, desc, health }) => {
      let color = 'text-slate-800', bg = 'bg-white', icon = null;
      if (health === 'good') { color = 'text-emerald-600'; bg = 'bg-emerald-50 border-emerald-100'; icon = '🟢'; }
      if (health === 'warn') { color = 'text-amber-600'; bg = 'bg-amber-50 border-amber-100'; icon = '🟡'; }
      if (health === 'bad') { color = 'text-red-600'; bg = 'bg-red-50 border-red-100'; icon = '🔴'; }

      return (
        <div className={`p-5 rounded-2xl border ${bg} transition-all`}>
          <div className="text-sm font-bold text-slate-500 mb-1 flex justify-between">
            {title} <span title={desc} className="cursor-help">{icon}</span>
          </div>
          <div className={`text-2xl font-black ${color} truncate`}>
            {value} <span className="text-base font-medium opacity-60">{unit}</span>
          </div>
        </div>
      );
    };

    return (
      <div className="animate-fade-in flex flex-col h-full max-w-4xl mx-auto space-y-6 pb-12">
        <div className="flex items-center justify-between mb-2">
          <h2 className="text-2xl font-bold text-slate-800 flex items-center">
            <Calculator className="mr-3 text-emerald-500" /> 一键诊断计算器
          </h2>
          <button onClick={() => setInputs({ spend:'', impress:'', clicks:'', orders:'', gmv:'', productCost:'', otherCost:'' })} className="text-sm text-slate-500 hover:text-emerald-600">清空重填</button>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          {/* 输入区 */}
          <div className="bg-white p-6 md:p-8 rounded-3xl border border-slate-100 shadow-sm space-y-5">
            <h3 className="text-lg font-bold text-slate-800 mb-4 border-b border-slate-100 pb-2">请输入后台数据</h3>
            <div className="grid grid-cols-2 gap-4">
              {[
                { name: 'impress', label: '曝光量 (展现)', icon: '👁️' },
                { name: 'clicks', label: '点击量', icon: '👆' },
                { name: 'orders', label: '成交单量', icon: '📦' },
                { name: 'spend', label: '广告花费 ($/¥)', icon: '💸' },
                { name: 'gmv', label: '总交易额 GMV', icon: '💰' },
                { name: 'productCost', label: '商品总成本', icon: '🏭' },
              ].map((fld) => (
                <div key={fld.name} className="flex flex-col">
                  <label className="text-xs font-bold text-slate-500 mb-1 ml-1">{fld.icon} {fld.label}</label>
                  <input type="number" name={fld.name} value={inputs[fld.name]} onChange={handleChange} className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-emerald-500 outline-none transition-all font-mono" placeholder="0" />
                </div>
              ))}
              <div className="flex flex-col col-span-2">
                <label className="text-xs font-bold text-slate-500 mb-1 ml-1">🚚 其他成本 (运费/平台佣金/退货损耗)</label>
                <input type="number" name="otherCost" value={inputs.otherCost} onChange={handleChange} className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-emerald-500 outline-none transition-all font-mono" placeholder="0" />
              </div>
            </div>
          </div>

          {/* 输出/诊断区 */}
          <div className="space-y-4">
            <div className="bg-slate-800 text-white p-6 rounded-3xl shadow-lg relative overflow-hidden">
               <div className="absolute -right-6 -bottom-6 opacity-10"><DollarSign size={120} /></div>
               <h3 className="text-sm font-bold text-slate-400 mb-1">最终净利润 (Profit)</h3>
               <div className={`text-4xl md:text-5xl font-black mb-4 ${results.profit > 0 ? 'text-emerald-400' : results.profit < 0 ? 'text-red-400' : 'text-white'}`}>
                  {results.profit > 0 ? '+' : ''}{results.profit.toFixed(2)}
               </div>
               
               <div className="grid grid-cols-2 gap-4 border-t border-slate-700 pt-4">
                  <div>
                    <div className="text-xs text-slate-400 mb-1">真实 ROI</div>
                    <div className={`text-xl font-bold ${results.roi >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>{results.roi.toFixed(2)}%</div>
                  </div>
                  <div>
                    <div className="text-xs text-slate-400 mb-1">ROAS (广告投产)</div>
                    <div className={`text-xl font-bold ${results.roas >= 2 ? 'text-emerald-400' : results.roas > 0 ? 'text-amber-400' : 'text-white'}`}>{results.roas.toFixed(2)}</div>
                  </div>
               </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <MetricCard title="CTR 点击率" value={results.ctr.toFixed(2)} unit="%" desc="及格线1%" health={results.ctr === 0 ? null : results.ctr >= 1.5 ? 'good' : results.ctr >= 1 ? 'warn' : 'bad'} />
              <MetricCard title="CVR 转化率" value={results.cvr.toFixed(2)} unit="%" desc="及格线1.5%" health={results.cvr === 0 ? null : results.cvr >= 3 ? 'good' : results.cvr >= 1.5 ? 'warn' : 'bad'} />
              <MetricCard title="CPA 单次成交" value={results.cpa.toFixed(2)} unit="元" health={null} />
              <MetricCard title="AOV 客单价" value={results.aov.toFixed(2)} unit="元" health={null} />
            </div>

            {/* 智能诊断建议 */}
            {(results.ctr > 0 || results.roas > 0) && (
              <div className="bg-indigo-50 border border-indigo-100 rounded-2xl p-5 text-sm text-indigo-900 leading-relaxed">
                <span className="font-bold flex items-center mb-2"><BrainCircuit size={16} className="mr-1.5"/> AI 诊断建议：</span>
                <ul className="list-disc pl-5 space-y-1">
                  {results.roi < 0 && <li className="text-red-600 font-medium">当前整体处于亏损状态，请立刻检查广告花费或调整商品定价。</li>}
                  {results.roi > 0 && <li className="text-emerald-700 font-medium">当前实现盈利！模型健康，可尝试复制计划并小幅提升预算放量。</li>}
                  {results.ctr > 0 && results.ctr < 1 && <li>CTR 低于 1%，说明广告素材毫无吸引力，建议立刻<span className="font-bold">更换素材</span>或优化视频前3秒。</li>}
                  {results.cvr > 0 && results.cvr < 1.5 && <li>CVR 低于 1.5%，流量承接极差，用户只看不买，建议<span className="font-bold">优化落地页、商品价格或补充评论</span>。</li>}
                  {results.cpa > results.profit && results.profit > 0 && <li className="text-amber-600">警告：虽然赚钱，但获客成本(CPA)偏高，利润空间被严重压缩。</li>}
                </ul>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

  // 4. 闪卡渲染逻辑 (保留原有算法，升级UI)
  const renderFlashcards = () => {
    if (fcComplete) {
      return (
        <div className="max-w-md mx-auto text-center py-12 bg-white rounded-3xl shadow-xl border border-slate-100 p-8 animate-fade-in mt-10">
          <Award className="w-24 h-24 text-yellow-400 mx-auto mb-6 drop-shadow-lg" />
          <h2 className="text-3xl font-black text-slate-800 mb-3">挑战成功！</h2>
          <p className="text-slate-500 mb-8 leading-relaxed">
            你已成功将 <span className="font-bold text-emerald-600 text-xl">{fcTotal}</span> 个硬核知识点刻入肌肉记忆。<br/>
          </p>
          <div className="space-y-4">
            <button onClick={startFlashcards} className="w-full py-4 bg-blue-600 text-white rounded-2xl font-bold hover:bg-blue-700 transition shadow-lg shadow-blue-200">打乱顺序再来一轮</button>
          </div>
        </div>
      );
    }
    if (fcQueue.length === 0) return null;
    const card = fcQueue[0];
    const progress = (fcMasteredThisSession / fcTotal) * 100;

    return (
      <div className="max-w-xl mx-auto flex flex-col h-full min-h-[600px] animate-fade-in py-4">
        <div className="flex items-center justify-between mb-6">
          <div className="text-sm font-bold text-slate-500 bg-white px-4 py-1.5 rounded-full border border-slate-200 shadow-sm">
            待攻克: <span className="text-blue-600">{fcQueue.length}</span> | 已掌握: <span className="text-emerald-500">{fcMasteredThisSession}</span>
          </div>
        </div>
        <div className="w-full bg-slate-200 h-2.5 rounded-full mb-8 overflow-hidden shadow-inner">
          <div className="bg-gradient-to-r from-blue-400 to-blue-600 h-full transition-all duration-500 ease-out" style={{ width: `${progress}%` }}></div>
        </div>

        <div 
          className="flex-1 bg-white rounded-3xl shadow-xl border border-slate-100 cursor-pointer relative group mb-8 flex flex-col justify-center min-h-[400px] transition-all duration-500 hover:shadow-2xl"
          onClick={() => setIsFlipped(!isFlipped)}
          style={{ perspective: '1000px' }}
        >
          <div className="p-8 text-center flex flex-col items-center justify-center h-full">
            <span className="inline-block px-4 py-1.5 bg-blue-50 text-blue-600 text-xs font-bold rounded-full mb-8 border border-blue-100">
              🏷️ {card.category}
            </span>
            {!isFlipped ? (
              <div className="w-full px-4">
                <h3 className="text-2xl font-bold text-slate-800 leading-snug">{card.q}</h3>
                <p className="text-blue-400 mt-12 text-sm flex items-center justify-center font-bold animate-pulse">
                  点击卡片回想答案
                </p>
              </div>
            ) : (
              <div className="animate-fade-in w-full h-full flex items-center">
                <div className="text-lg text-slate-700 leading-relaxed text-left bg-slate-50 p-6 rounded-2xl border border-slate-100 w-full shadow-inner">
                   {card.a.split('\n').map((line, i) => <span key={i}>{line}<br/></span>)}
                </div>
              </div>
            )}
          </div>
        </div>

        <div className={`grid grid-cols-2 gap-4 mt-auto transition-all duration-300 ${isFlipped ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}`}>
          <button onClick={(e) => { e.stopPropagation(); handleFcNext('review'); }} className="py-4 bg-white text-red-500 border-2 border-red-100 rounded-2xl font-bold flex items-center justify-center hover:bg-red-50 hover:border-red-200 transition shadow-sm">
            <XCircle size={20} className="mr-2" /> 没记住 (重来)
          </button>
          <button onClick={(e) => { e.stopPropagation(); handleFcNext('mastered'); }} className="py-4 bg-emerald-500 text-white rounded-2xl font-bold flex items-center justify-center hover:bg-emerald-600 transition shadow-md shadow-emerald-200">
            <CheckCircle2 size={20} className="mr-2" /> 掌握了 (过关)
          </button>
        </div>
      </div>
    );
  };

  // 5. 测试渲染逻辑 (保留原有算法，升级UI)
  const renderQuiz = () => {
    if (quizComplete) {
      return (
        <div className="max-w-md mx-auto text-center py-12 bg-white rounded-3xl shadow-xl border border-slate-100 p-8 animate-fade-in mt-10">
          <div className="w-24 h-24 bg-gradient-to-br from-orange-100 to-orange-200 text-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-inner">
            <BrainCircuit size={48} />
          </div>
          <h2 className="text-3xl font-black text-slate-800 mb-3">特训完成！</h2>
          <p className="text-slate-500 mb-8 text-lg">
            得分：<span className="font-black text-orange-500 text-4xl mx-2">{quizScore}</span> / {QUIZ_SESSION_LIMIT}
          </p>
          <button onClick={startQuiz} className="w-full py-4 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-2xl font-bold hover:shadow-lg transition flex items-center justify-center shadow-md shadow-orange-200">
            <RotateCcw size={18} className="mr-2"/> 再抽 5 题强化
          </button>
        </div>
      );
    }
    if (quizQueue.length === 0) return null;
    const question = quizQueue[currentQuizIdx];
    const progress = (currentQuizIdx / QUIZ_SESSION_LIMIT) * 100;

    return (
      <div className="max-w-2xl mx-auto flex flex-col h-full animate-fade-in py-4 pb-12">
        <div className="flex items-center justify-between mb-4">
          <div className="text-sm font-bold text-slate-500 bg-white px-4 py-1.5 rounded-full border border-slate-200 shadow-sm">
            题号 {currentQuizIdx + 1} / {QUIZ_SESSION_LIMIT}
          </div>
        </div>
        <div className="w-full bg-slate-200 h-2.5 rounded-full mb-8 overflow-hidden shadow-inner">
          <div className="bg-gradient-to-r from-orange-400 to-orange-500 h-full transition-all duration-500 ease-out" style={{ width: `${progress}%` }}></div>
        </div>

        <div className="bg-white rounded-3xl shadow-xl border border-slate-100 p-8 mb-6 transition-all">
          <h3 className="text-xl font-bold text-slate-800 leading-relaxed mb-8">{question.question}</h3>
          <div className="space-y-4">
            {question.options.map((opt, idx) => {
              let btnClass = "w-full text-left p-5 rounded-2xl border-2 transition-all flex items-start ";
              if (!showExplanation) {
                btnClass += "border-slate-100 hover:border-orange-300 hover:bg-orange-50 hover:shadow-md text-slate-700 font-medium";
              } else {
                if (idx === question.correct) btnClass += "border-emerald-500 bg-emerald-50 text-emerald-900 font-bold shadow-md";
                else if (idx === selectedOption) btnClass += "border-red-400 bg-red-50 text-red-900 font-medium opacity-80";
                else btnClass += "border-slate-50 bg-slate-50 text-slate-400 opacity-50";
              }
              return (
                <button key={idx} onClick={() => handleOptionSelect(idx)} disabled={showExplanation} className={btnClass}>
                  <span className="w-8 shrink-0 text-current opacity-60 font-black mt-0.5">{String.fromCharCode(65 + idx)}.</span>
                  <span className="leading-relaxed">{opt}</span>
                </button>
              );
            })}
          </div>
        </div>

        {showExplanation && (
          <div className="animate-fade-in bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-100 rounded-2xl p-6 mb-6 text-blue-900 shadow-sm">
            <h4 className="font-bold flex items-center mb-3 text-blue-800"><BrainCircuit size={20} className="mr-2" /> 导师解析</h4>
            <p className="text-[15px] leading-relaxed">{question.explanation}</p>
          </div>
        )}

        {showExplanation && (
          <button onClick={handleQuizNext} className="mt-4 w-full py-5 bg-slate-900 text-white rounded-2xl font-bold hover:bg-slate-800 transition flex items-center justify-center shadow-xl shadow-slate-300 hover:-translate-y-1">
            下一题 <ChevronRight size={20} className="ml-2" />
          </button>
        )}
      </div>
    );
  };

  // ==========================================
  // 主界面框架 (Sidebar + Content)
  // ==========================================
  const NavItem = ({ view, icon: Icon, label, colorClass }) => (
    <button 
      onClick={() => { setCurrentView(view); setIsMobileMenuOpen(false); }}
      className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all font-medium ${
        currentView === view 
          ? `${colorClass} shadow-sm` 
          : 'text-slate-500 hover:bg-slate-100 hover:text-slate-800'
      }`}
    >
      <Icon size={20} />
      <span>{label}</span>
    </button>
  );

  return (
    <div className="min-h-screen bg-[#F1F5F9] text-slate-900 font-sans flex overflow-hidden">
      <style dangerouslySetInnerHTML={{__html: `
        .animate-fade-in { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      `}} />

      {/* 侧边栏 (Desktop) */}
      <aside className="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 px-4 py-6 shadow-sm z-20">
        <div className="flex items-center space-x-3 mb-10 px-2">
          <div className="bg-indigo-600 text-white p-2 rounded-lg"><TrendingUp size={24} /></div>
          <span className="text-xl font-black tracking-tight text-slate-800">投放研习社</span>
        </div>
        
        <nav className="flex-1 space-y-2">
          <NavItem view="dashboard" icon={LayoutDashboard} label="数据总览" colorClass="bg-indigo-50 text-indigo-700" />
          <div className="pt-4 pb-1 px-2 text-xs font-bold text-slate-400 uppercase tracking-wider">训练与测试</div>
          <NavItem view="flashcards" icon={BookOpen} label="错题闪卡" colorClass="bg-blue-50 text-blue-700" />
          <NavItem view="quiz" icon={BrainCircuit} label="情景自测" colorClass="bg-orange-50 text-orange-700" />
          <div className="pt-4 pb-1 px-2 text-xs font-bold text-slate-400 uppercase tracking-wider">业务工具</div>
          <NavItem view="calculator" icon={Calculator} label="诊断计算器" colorClass="bg-emerald-50 text-emerald-700" />
          <NavItem view="dictionary" icon={Search} label="术语词典" colorClass="bg-purple-50 text-purple-700" />
        </nav>
      </aside>

      {/* 移动端顶栏 */}
      <div className="md:hidden fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-200 z-30 flex items-center justify-between px-4 shadow-sm">
        <div className="flex items-center space-x-2">
          <div className="bg-indigo-600 text-white p-1.5 rounded-lg"><TrendingUp size={20} /></div>
          <span className="font-bold text-slate-800">投放研习社</span>
        </div>
        <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="p-2 text-slate-600">
          {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {/* 移动端菜单下拉 */}
      {isMobileMenuOpen && (
        <div className="md:hidden fixed inset-0 top-16 bg-white z-20 p-4 space-y-2 animate-fade-in border-b border-slate-200 shadow-xl">
          <NavItem view="dashboard" icon={LayoutDashboard} label="数据总览" colorClass="bg-indigo-50 text-indigo-700" />
          <NavItem view="flashcards" icon={BookOpen} label="错题闪卡" colorClass="bg-blue-50 text-blue-700" />
          <NavItem view="quiz" icon={BrainCircuit} label="情景自测" colorClass="bg-orange-50 text-orange-700" />
          <NavItem view="calculator" icon={Calculator} label="诊断计算器" colorClass="bg-emerald-50 text-emerald-700" />
          <NavItem view="dictionary" icon={Search} label="术语词典" colorClass="bg-purple-50 text-purple-700" />
        </div>
      )}

      {/* 主内容区 */}
      <main className="flex-1 h-screen overflow-y-auto pt-20 pb-10 px-4 md:pt-10 md:px-10 relative">
        <div className="max-w-5xl mx-auto h-full">
          {currentView === 'dashboard' && renderDashboard()}
          {currentView === 'flashcards' && renderFlashcards()}
          {currentView === 'quiz' && renderQuiz()}
          {currentView === 'dictionary' && renderDictionary()}
          {currentView === 'calculator' && <CalculatorView />}
        </div>
      </main>
    </div>
  );
}