import React, { useState, useEffect } from 'react';
import { 
  FileText, Plus, Search, ChevronLeft, Download, Edit3, Eye, 
  ThumbsUp, ThumbsDown, BrainCircuit, History, LayoutTemplate, 
  Play, CheckCircle2, Loader2, BarChart3, PieChart, TrendingUp, Settings2, MoreVertical,
  X, Send, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, 
  List, ListOrdered, Heading1, Heading2, Heading3, Quote, Clock
} from 'lucide-react';

// --- Mock Data ---
const MOCK_REPORTS = [
  { id: 1, title: '2023年Q4华东区销售数据分析', summary: '深度分析华东大区Q4的销售趋势，重点指出了双十一期间客单价下滑及局部地区物流受阻导致的业绩波动。', status: 'completed', date: '2023-12-01', category: '销售', version: 'v1.2', templateId: 't1' },
  { id: 2, title: '双十一大促营销效果复盘报告', summary: '针对双十一全周期各投放渠道的ROI进行评估，分析流量与转化漏斗，为后续营销资源分配提供建议。', status: 'completed', date: '2023-11-15', category: '营销', version: 'v1.0', templateId: 't2' },
  { id: 3, title: 'Q3核心产品活跃度环比分析', summary: '对比分析Q3各核心产品线的DAU与用户留存率，找出活跃度下降的关键节点与用户群体。', status: 'generating', date: '2023-10-05', category: '用户', version: 'v1.0', templateId: 't3' },
  { id: 4, title: '年度渠道转化率对比模型', summary: '建立各获客渠道的转化率评估模型，追踪从点击到最终成单的全链路数据，优化渠道投放策略。', status: 'completed', date: '2023-09-20', category: '销售', version: 'v2.1', templateId: 't4' },
];

const MOCK_TEMPLATES = {
  't1': { id: 't1', name: '销售复盘通用模板', metrics: ['总销售额', '客单价', '退货率'], dimensions: ['时间(按周)', '地区', '商品类目'], prompt: '请根据所选指标和维度，分析Q4的销售趋势，重点指出业绩异常波动的区域，并给出可执行的促销建议。', content: '<h3>报告标题：【销售复盘自动分析报告】</h3><p><br></p><h4>一、 整体数据概览</h4><p>根据您选择的维度（时间、地区、商品类目），我们对核心指标（总销售额、客单价、退货率）进行了整体分析。</p><p class="text-gray-400">[此处将由AI自动填入整体数据表现和同环比情况]</p><p><br></p><h4>二、 核心指标拆解分析</h4><p><strong>1. 总销售额的趋势与分布</strong></p><p class="text-gray-400">[此处将由AI结合时间维度展开详细的图表描述与数据拆解]</p><p><br></p><h4>三、 关键异常与业务洞察</h4><p class="text-gray-400">[此处将由AI提取数据中的异常点，并给出针对性的促销建议]</p><p><br></p><h4>四、 总结与建议</h4><p class="text-gray-400">[此处将由AI总结全文核心结论，并输出可落地的Action Item]</p>' },
  't2': { id: 't2', name: '大促营销分析模板', metrics: ['曝光量', '点击率', '转化率'], dimensions: ['投放渠道', '活动时间段'], prompt: '分析各渠道的ROI，评估本次大促的营销资源分配是否合理。', content: '<h3>报告标题：【大促营销分析报告】</h3><p><br></p><h4>一、 流量与转化漏斗</h4><p class="text-gray-400">[漏斗数据概览]</p><p><br></p><h4>二、 渠道ROI评估</h4><p class="text-gray-400">[AI评估结果与资源分配建议]</p>' },
};

// --- 富文本通用样式 ---
const proseStyles = "prose max-w-none [&>h1]:text-3xl [&>h1]:font-bold [&>h2]:text-2xl [&>h2]:font-bold [&>h3]:text-xl [&>h3]:font-bold [&>h4]:text-lg [&>h4]:font-semibold [&>p]:mb-3 [&>ul]:list-disc [&>ul]:pl-5 [&>ol]:list-decimal [&>ol]:pl-5 [&>blockquote]:border-l-4 [&>blockquote]:border-gray-300 [&>blockquote]:pl-4 [&>blockquote]:italic [&>blockquote]:text-gray-500";

// --- 在线文档工具栏组件 (用于直接在已有div上使用) ---
function EditorToolbar() {
  const execCmd = (cmd, arg = null) => document.execCommand(cmd, false, arg);
  const Btn = ({ icon: Icon, cmd, arg, title }) => (
    <button
      type="button"
      onMouseDown={(e) => { e.preventDefault(); execCmd(cmd, arg); }}
      className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
      title={title}
    >
      <Icon className="w-4 h-4" />
    </button>
  );

  return (
    <div className="flex items-center gap-1 px-3 py-2 bg-white border border-gray-200 rounded-lg shadow-sm flex-wrap sticky top-4 z-10 mb-4 animate-in slide-in-from-top-2">
      <Btn icon={Bold} cmd="bold" title="加粗" />
      <Btn icon={Italic} cmd="italic" title="斜体" />
      <Btn icon={Underline} cmd="underline" title="下划线" />
      <div className="w-px h-4 bg-gray-200 mx-1"></div>
      <Btn icon={Heading1} cmd="formatBlock" arg="H1" title="大标题" />
      <Btn icon={Heading2} cmd="formatBlock" arg="H2" title="中标题" />
      <Btn icon={Heading3} cmd="formatBlock" arg="H3" title="小标题" />
      <div className="w-px h-4 bg-gray-200 mx-1"></div>
      <Btn icon={List} cmd="insertUnorderedList" title="无序列表" />
      <Btn icon={ListOrdered} cmd="insertOrderedList" title="有序列表" />
      <Btn icon={Quote} cmd="formatBlock" arg="BLOCKQUOTE" title="引用" />
      <div className="w-px h-4 bg-gray-200 mx-1"></div>
      <Btn icon={AlignLeft} cmd="justifyLeft" title="左对齐" />
      <Btn icon={AlignCenter} cmd="justifyCenter" title="居中对齐" />
      <Btn icon={AlignRight} cmd="justifyRight" title="右对齐" />
    </div>
  );
}

// --- 完整的在线文档编辑器组件 ---
function RichTextEditor({ value, onChange, placeholder, minHeight = '300px' }) {
  const editorRef = React.useRef(null);

  React.useEffect(() => {
    if (editorRef.current && editorRef.current.innerHTML !== value) {
      editorRef.current.innerHTML = value || '';
    }
  }, [value]);

  const handleInput = () => {
    if (onChange && editorRef.current) {
      onChange(editorRef.current.innerHTML);
    }
  };

  return (
    <div className="flex flex-col border border-gray-200 rounded-xl bg-white overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-transparent transition-all">
      <div className="bg-gray-50 border-b border-gray-200">
        <EditorToolbar />
      </div>
      <div
        ref={editorRef}
        className={`p-6 outline-none w-full overflow-y-auto ${proseStyles}`}
        style={{ minHeight }}
        contentEditable
        onInput={handleInput}
        onBlur={handleInput}
        placeholder={placeholder}
      />
    </div>
  );
}

export default function App() {
  const [currentView, setCurrentView] = useState('list'); // 'list', 'create', 'reportDetail', 'templateDetail'
  const [selectedReportId, setSelectedReportId] = useState(null);
  const [selectedTemplateId, setSelectedTemplateId] = useState(null);
  const [reports, setReports] = useState(MOCK_REPORTS);

  // 导航辅助函数
  const goToList = () => setCurrentView('list');
  const goToCreate = () => setCurrentView('create');
  const goToReportDetail = (id) => { setSelectedReportId(id); setCurrentView('reportDetail'); };
  const goToTemplateDetail = (id) => { setSelectedTemplateId(id); setCurrentView('templateDetail'); };

  const handleCreateComplete = (newReport) => {
    setReports([newReport, ...reports]); // 将新报告插入列表最前方
    setCurrentView('list'); // 提交后返回列表页查看生成状态，不再直接跳入详情
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 font-sans">
      {/* 顶部导航栏 */}
      <header className="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between sticky top-0 z-10">
        <div className="flex items-center space-x-2 cursor-pointer" onClick={goToList}>
          <div className="bg-blue-600 p-2 rounded-lg">
            <BarChart3 className="text-white w-5 h-5" />
          </div>
          <h1 className="text-xl font-bold text-gray-900 tracking-tight">AI数据洞察平台</h1>
        </div>
        <div className="flex items-center space-x-4">
          <div className="w-8 h-8 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center font-semibold">
            Admin
          </div>
        </div>
      </header>

      {/* 主体内容区域 */}
      <main className="max-w-6xl mx-auto p-6">
        {currentView === 'list' && <ReportList onGoToCreate={goToCreate} onGoToDetail={goToReportDetail} reports={reports} />}
        {currentView === 'create' && <CreateReportFlow onComplete={handleCreateComplete} onCancel={goToList} />}
        {currentView === 'reportDetail' && <ReportDetail reportId={selectedReportId} onBack={goToList} onGoToTemplate={goToTemplateDetail} />}
        {currentView === 'templateDetail' && <TemplateDetail templateId={selectedTemplateId} onBack={() => setCurrentView('reportDetail')} />}
      </main>
    </div>
  );
}

// ==========================================
// 1. 报告列表页 Component
// ==========================================
function ReportList({ onGoToCreate, onGoToDetail, reports }) {
  const [activeTab, setActiveTab] = useState('全部');
  const [searchQuery, setSearchQuery] = useState('');
  const tabs = ['全部', '销售', '营销', '用户'];

  const filteredReports = reports.filter(r => 
    (activeTab === '全部' || r.category === activeTab) &&
    r.title.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">数据报告</h2>
          <p className="text-gray-500 text-sm mt-1">管理和查看所有AI生成的分析报告</p>
        </div>
        <button 
          onClick={onGoToCreate}
          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center shadow-sm transition-colors"
        >
          <Plus className="w-4 h-4 mr-2" />
          创建报告
        </button>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div className="flex flex-col sm:flex-row justify-between gap-4 mb-6 border-b border-gray-100 pb-4">
          <div className="flex space-x-6">
            {tabs.map(tab => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`pb-4 -mb-4 px-1 text-sm font-medium transition-colors ${
                  activeTab === tab ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-800'
                }`}
              >
                {tab}
              </button>
            ))}
          </div>
          <div className="relative">
            <Search className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
            <input 
              type="text" 
              placeholder="搜索报告名称..." 
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full sm:w-64 transition-all"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {filteredReports.map(report => (
            <div 
              key={report.id} 
              onClick={() => onGoToDetail(report.id)}
              className="group border border-gray-100 rounded-xl p-5 hover:shadow-md hover:border-blue-100 transition-all cursor-pointer bg-white relative overflow-hidden flex flex-col h-full"
            >
              <div className="absolute top-1/2 -translate-y-1/2 right-4 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 -translate-x-2 transition-all bg-white/90 rounded-full p-1 shadow-sm border border-gray-100 z-10">
                <ChevronLeft className="w-5 h-5 text-blue-500 rotate-180" />
              </div>
              
              {/* 第一行：报告标题 */}
              <h3 className="font-semibold text-gray-900 text-lg mb-2 pr-6 line-clamp-1" title={report.title}>
                {report.title}
              </h3>
              
              {/* 第二行：报告内容简述 */}
              <p className="text-sm text-gray-500 mb-6 line-clamp-2 flex-1">
                {report.summary || '暂无内容简述...'}
              </p>
              
              {/* 第三行：最近更新时间 + 生成状态 */}
              <div className="flex items-center mt-auto pt-4 border-t border-gray-50">
                {report.status === 'completed' ? (
                  <div className="flex items-center text-xs">
                    <span className="text-gray-400 flex items-center">
                      <Clock className="w-3.5 h-3.5 mr-1" />
                      更新于 {report.date}
                    </span>
                    <span className="ml-2 px-1.5 py-0.5 rounded text-green-600 bg-green-50 flex items-center font-medium">
                      <CheckCircle2 className="w-3 h-3 mr-1" />
                      已生成
                    </span>
                  </div>
                ) : (
                  <div className="text-xs px-2.5 py-1 rounded-md font-medium flex items-center bg-amber-50 text-amber-700">
                    <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" />
                    报告生成中...
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
        {filteredReports.length === 0 && (
          <div className="py-12 text-center text-gray-500">
            没有找到相关报告
          </div>
        )}
      </div>
    </div>
  );
}

// --- 多选下拉组件 (支持搜索) ---
function MultiSelect({ options, selected, onChange, placeholder }) {
  const [isOpen, setIsOpen] = React.useState(false);
  const [searchTerm, setSearchTerm] = React.useState('');
  const wrapperRef = React.useRef(null);

  React.useEffect(() => {
    function handleClickOutside(event) {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [wrapperRef]);

  const filteredOptions = options.filter(o => o.toLowerCase().includes(searchTerm.toLowerCase()));

  const toggleOption = (opt) => {
    if (selected.includes(opt)) {
      onChange(selected.filter(i => i !== opt));
    } else {
      onChange([...selected, opt]);
    }
  };

  const removeOption = (e, opt) => {
    e.stopPropagation();
    onChange(selected.filter(i => i !== opt));
  };

  return (
    <div className="relative w-full" ref={wrapperRef}>
      <div 
        className="min-h-[48px] w-full px-3 py-2 border border-gray-200 rounded-xl bg-white flex flex-wrap gap-2 items-center cursor-pointer hover:border-blue-400 transition-colors" 
        onClick={() => setIsOpen(!isOpen)}
      >
        {selected.length === 0 && <span className="text-gray-400 px-1">{placeholder}</span>}
        {selected.map(s => (
          <span key={s} className="bg-blue-50 text-blue-700 text-sm px-2.5 py-1 rounded-md flex items-center border border-blue-100">
            {s}
            <button onClick={(e) => removeOption(e, s)} className="ml-1.5 text-blue-400 hover:text-blue-600 focus:outline-none">
              <X className="w-3.5 h-3.5" />
            </button>
          </span>
        ))}
      </div>
      {isOpen && (
        <div className="absolute z-20 w-full mt-2 bg-white border border-gray-100 rounded-xl shadow-xl max-h-72 flex flex-col overflow-hidden">
          <div className="p-3 border-b border-gray-50 bg-gray-50/50">
            <div className="relative">
              <Search className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
              <input 
                type="text" 
                className="w-full pl-9 pr-3 py-2 bg-white border border-gray-200 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" 
                placeholder="搜索选项..." 
                value={searchTerm} 
                onChange={e => setSearchTerm(e.target.value)} 
                onClick={e => e.stopPropagation()} 
              />
            </div>
          </div>
          <div className="overflow-y-auto p-2 flex-1">
            {filteredOptions.map(o => (
              <div 
                key={o} 
                onClick={(e) => {
                  e.stopPropagation();
                  toggleOption(o);
                }}
                className="flex items-center px-3 py-2.5 hover:bg-gray-50 rounded-lg cursor-pointer group transition-colors"
              >
                <div className={`w-4 h-4 rounded border flex items-center justify-center mr-3 ${selected.includes(o) ? 'bg-blue-500 border-blue-500 text-white' : 'border-gray-300 bg-white group-hover:border-blue-400'}`}>
                  {selected.includes(o) ? <CheckCircle2 className="w-3 h-3 text-white" /> : null}
                </div>
                <span className={`text-sm ${selected.includes(o) ? 'text-blue-700 font-medium' : 'text-gray-700'}`}>{o}</span>
              </div>
            ))}
            {filteredOptions.length === 0 && <div className="p-4 text-center text-sm text-gray-500">无匹配选项</div>}
          </div>
        </div>
      )}
    </div>
  );
}

// ==========================================
// 2. 创建报告页 (包含模板创建流程)
// ==========================================
function CreateReportFlow({ onComplete, onCancel }) {
  // steps: 1: 配置参数, 1.5: 生成模版中, 2: 确认并编辑模版, 2.5: 提交生成中, 3: 提交成功
  const [step, setStep] = useState(1); 
  const [formData, setFormData] = useState({
    name: '新数据分析报告',
    metrics: ['销售额', '客单价'],
    dimensions: ['时间', '地区'],
    prompt: '请分析近期数据趋势，总结关键发现。'
  });
  const [templateContent, setTemplateContent] = useState('');

  // 扩展了指标和维度的数量，以体现下拉搜索组件的优势
  const availableMetrics = ['销售额', '订单量', '客单价', '转化率', 'DAU', '留存率', '退款率', '毛利率', '净利润', '新客获取成本(CAC)', '客户终身价值(LTV)', '复购率', 'ARPU', '页面浏览量(PV)', '独立访客(UV)'];
  const availableDimensions = ['时间', '地区', '渠道', '新老客', '商品类目', '终端类型', '用户等级', '支付方式', '营销活动', '门店', '省份', '城市', '年龄段', '性别'];

  const handleGenerateTemplate = () => {
    setStep(1.5);
    // 模拟 LLM 生成模版框架的过程
    setTimeout(() => {
      const mockGeneratedTemplate = `<h3>报告标题：【${formData.name}】自动分析报告</h3>
<p><br></p>
<h4>一、 整体数据概览</h4>
<p>根据您选择的维度（${formData.dimensions.join('、')}），我们对核心指标（${formData.metrics.join('、')}）进行了整体分析。</p>
<p class="text-blue-500 bg-blue-50 p-1 rounded inline-block">[此处将由AI自动填入整体数据表现和同环比情况]</p>
<p><br></p>
<h4>二、 核心指标拆解分析</h4>
<p><strong>1. ${formData.metrics[0] || '核心指标'}的趋势与分布</strong></p>
<p class="text-blue-500 bg-blue-50 p-1 rounded inline-block">[此处将由AI结合${formData.dimensions[0] || '所选维度'}展开详细的图表描述与数据拆解]</p>
<p><br></p>
<h4>三、 关键异常与业务洞察</h4>
<p class="text-blue-500 bg-blue-50 p-1 rounded inline-block">[此处将由AI根据提示词： "${formData.prompt}" 提取数据中的异常点，并给出针对性的业务建议]</p>
<p><br></p>
<h4>四、 总结与建议</h4>
<p class="text-blue-500 bg-blue-50 p-1 rounded inline-block">[此处将由AI总结全文核心结论，并输出可落地的Action Item]</p>`;
      
      setTemplateContent(mockGeneratedTemplate);
      setStep(2);
    }, 2000);
  };

  const handleGenerateReport = () => {
    setStep(2.5);
    // 模拟提交生成报告的任务
    setTimeout(() => {
      setStep(3);
    }, 1500);
  };

  // 渲染步骤条的辅助函数
  const getStepStatus = (stepNum) => {
    if (Math.floor(step) === stepNum || (step === 2.5 && stepNum === 3)) return 'active';
    if (Math.floor(step) > stepNum) return 'completed';
    return 'pending';
  };

  return (
    <div className="max-w-4xl mx-auto">
      {/* Stepper */}
      <div className="flex items-center justify-between mb-8 relative px-12">
        <div className="absolute left-16 right-16 top-1/2 h-0.5 bg-gray-200 -z-10 transform -translate-y-1/2"></div>
        {[
          { num: 1, label: '配置参数并生成模版' },
          { num: 2, label: '查看与编辑模版正文' },
          { num: 3, label: '生成数据报告' }
        ].map((s) => {
          const status = getStepStatus(s.num);
          return (
            <div key={s.num} className="flex flex-col items-center bg-gray-50 px-4">
              <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm mb-2 transition-colors ${
                status === 'active' ? 'bg-blue-600 text-white shadow-lg ring-4 ring-blue-100' : 
                status === 'completed' ? 'bg-blue-100 text-blue-600' : 'bg-gray-200 text-gray-500'
              }`}>
                {status === 'completed' ? <CheckCircle2 className="w-5 h-5" /> : s.num}
              </div>
              <span className={`text-xs ${status !== 'pending' ? 'text-gray-900 font-medium' : 'text-gray-400'}`}>{s.label}</span>
            </div>
          );
        })}
      </div>

      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
        {step === 1 && (
          <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-bold text-gray-900">1. 配置报告参数</h2>
              <button onClick={onCancel} className="text-gray-500 hover:text-gray-700 text-sm">取消创建</button>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-4 flex items-center"><Settings2 className="w-5 h-5 mr-2 text-blue-600" /> 报告基础信息</h3>
              <input 
                type="text" 
                value={formData.name}
                onChange={e => setFormData({...formData, name: e.target.value})}
                className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none font-medium text-lg"
                placeholder="输入报告名称"
              />
            </div>

            <div>
              <h3 className="text-sm font-semibold text-gray-700 mb-3">1. 选择分析指标 (Metrics)</h3>
              <MultiSelect 
                options={availableMetrics} 
                selected={formData.metrics} 
                onChange={(newMetrics) => setFormData({...formData, metrics: newMetrics})} 
                placeholder="请选择或搜索分析指标..." 
              />
            </div>

            <div>
              <h3 className="text-sm font-semibold text-gray-700 mb-3">2. 选择分析维度 (Dimensions)</h3>
              <MultiSelect 
                options={availableDimensions} 
                selected={formData.dimensions} 
                onChange={(newDimensions) => setFormData({...formData, dimensions: newDimensions})} 
                placeholder="请选择或搜索分析维度..." 
              />
            </div>

            <div>
              <h3 className="text-sm font-semibold text-gray-700 mb-3 flex justify-between">
                <span>3. 编写AI提示词 (Prompt)</span>
                <span className="text-blue-500 font-normal cursor-pointer hover:underline">使用预设提示词</span>
              </h3>
              <textarea 
                value={formData.prompt}
                onChange={e => setFormData({...formData, prompt: e.target.value})}
                className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none h-32 resize-none text-gray-700 leading-relaxed"
                placeholder="描述你希望AI如何分析这些数据..."
              />
            </div>

            <div className="flex justify-end pt-4 border-t border-gray-100">
              <button 
                onClick={handleGenerateTemplate}
                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg flex items-center transition-colors shadow-md shadow-blue-200"
              >
                <BrainCircuit className="w-4 h-4 mr-2" /> 
                一键生成模版
              </button>
            </div>
          </div>
        )}

        {step === 1.5 && (
          <div className="py-20 flex flex-col items-center justify-center text-center animate-in fade-in">
            <Loader2 className="w-12 h-12 text-blue-500 animate-spin mb-4" />
            <h2 className="text-xl font-bold text-gray-900 mb-2">LLM 正在构建报告模版...</h2>
            <p className="text-gray-500">正在根据您的指标和维度，规划最合理的分析框架与段落结构</p>
          </div>
        )}

        {step === 2 && (
          <div className="space-y-6 animate-in fade-in slide-in-from-right-4">
            <div className="flex justify-between items-center mb-2">
              <div>
                <h2 className="text-xl font-bold text-gray-900 flex items-center">
                  <LayoutTemplate className="w-5 h-5 mr-2 text-indigo-500" />
                  2. 查看并编辑模版正文
                </h2>
                <p className="text-gray-500 text-sm mt-1">这是 LLM 为您生成的报告框架，您可以直接编辑文本、调整排版和布局。</p>
              </div>
            </div>

            <RichTextEditor 
              value={templateContent}
              onChange={setTemplateContent}
              minHeight="400px"
              placeholder="开始编辑您的模版正文..."
            />

            <div className="flex justify-between pt-4">
              <button 
                onClick={() => setStep(1)}
                className="text-gray-600 hover:bg-gray-100 px-6 py-2.5 rounded-lg transition-colors flex items-center"
              >
                <ChevronLeft className="w-4 h-4 mr-1" /> 返回修改参数
              </button>
              <button 
                onClick={handleGenerateReport}
                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg flex items-center transition-colors shadow-md shadow-blue-200"
              >
                <Play className="w-4 h-4 mr-2 fill-current" /> 确认模版并生成报告
              </button>
            </div>
          </div>
        )}

        {step === 2.5 && (
          <div className="py-20 flex flex-col items-center justify-center text-center animate-in fade-in">
            <Loader2 className="w-12 h-12 text-blue-500 animate-spin mb-4" />
            <h2 className="text-xl font-bold text-gray-900 mb-2">正在提交报告生成任务...</h2>
            <p className="text-gray-500">正在封装模版和数据参数，即将提交给AI引擎进行深度分析</p>
          </div>
        )}

        {step === 3 && (
          <div className="py-20 flex flex-col items-center justify-center text-center animate-in fade-in slide-in-from-bottom-4">
            <div className="w-24 h-24 bg-green-50 border-4 border-green-100 text-green-500 rounded-full flex items-center justify-center mb-6 shadow-sm">
              <CheckCircle2 className="w-12 h-12" />
            </div>
            <h2 className="text-3xl font-bold text-gray-900 mb-4">报告生成任务已提交</h2>
            <p className="text-gray-500 max-w-md mb-8 leading-relaxed">
              系统正在后台为您深度分析数据并生成报告。预计需要 1-3 分钟，您可以随时在列表页查看生成状态。
            </p>
            <div className="flex gap-4">
              <button 
                onClick={() => {
                  const newReport = {
                    id: Date.now(),
                    title: formData.name,
                    status: 'generating', // 状态变更为 generating
                    date: new Date().toISOString().split('T')[0],
                    category: '自定义',
                    version: 'v1.0',
                    templateId: 't_new_' + Date.now(),
                    content: templateContent
                  };
                  onComplete(newReport);
                }}
                className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl flex items-center font-medium transition-colors shadow-md shadow-blue-200"
              >
                返回列表页查看
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ==========================================
// 3. 报告详情页 Component
// ==========================================
function ReportDetail({ reportId, onBack, onGoToTemplate }) {
  const [isEditing, setIsEditing] = useState(false);
  const [showCoT, setShowCoT] = useState(false);
  
  // 评价系统状态
  const [feedbackType, setFeedbackType] = useState(null); // 'up' | 'down' | null
  const [feedbackText, setFeedbackText] = useState('');
  const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState(false);

  // 定时生成配置状态
  const [showScheduleModal, setShowScheduleModal] = useState(false);
  const [scheduleConfig, setScheduleConfig] = useState({ enabled: false, time: '09:00' });
  const [tempSchedule, setTempSchedule] = useState({ ...scheduleConfig }); // 用于弹窗内的临时修改状态

  const report = MOCK_REPORTS.find(r => r.id === reportId) || MOCK_REPORTS[0];
  const isGenerating = report.status === 'generating';

  const handleFeedbackSubmit = () => {
    if (feedbackText.trim()) {
      setIsFeedbackSubmitted(true);
      // 实际应用中这里会调用接口提交反馈
    }
  };

  const handleSaveSchedule = () => {
    setScheduleConfig({ ...tempSchedule });
    setShowScheduleModal(false);
    // 实际应用中这里会调用接口保存定时任务配置
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-200 flex flex-col animate-in fade-in relative overflow-hidden">
      {/* 头部信息与操作区 */}
      <div className="border-b border-gray-100 px-6 py-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-gray-50/50 rounded-t-2xl">
        <div className="flex items-center">
          <button onClick={onBack} className="mr-4 text-gray-400 hover:text-gray-800 transition-colors p-1 hover:bg-gray-100 rounded-full">
            <ChevronLeft className="w-6 h-6" />
          </button>
          <div>
            <h2 className="text-xl font-bold text-gray-900 flex items-center gap-3">
              {report.title}
            </h2>
            <div className="text-sm text-gray-500 mt-1 flex items-center space-x-4">
              <span>生成时间: {report.date}</span>
              <button 
                onClick={() => onGoToTemplate(report.templateId)}
                className="flex items-center text-blue-600 hover:text-blue-800 hover:underline"
              >
                <LayoutTemplate className="w-3.5 h-3.5 mr-1" /> 查看关联模板
              </button>
            </div>
          </div>
        </div>

        {/* 右上角操作按钮 */}
        <div className="flex items-center space-x-2">
          {!isEditing ? (
            <>
              <div className="relative group mr-2">
                <button className="flex items-center px-3 py-1.5 border border-gray-200 rounded-lg text-sm bg-white hover:bg-gray-50 text-gray-700">
                  <History className="w-4 h-4 mr-1.5" /> {report.version} 
                </button>
                {/* 模拟下拉菜单 */}
                <div className="absolute right-0 mt-1 w-32 bg-white border border-gray-100 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity z-10">
                  <div className="p-1">
                    <div className="px-3 py-2 text-sm hover:bg-gray-50 cursor-pointer text-blue-600 font-medium">{report.version} (当前)</div>
                    <div className="px-3 py-2 text-sm hover:bg-gray-50 cursor-pointer text-gray-600">v1.1</div>
                    <div className="px-3 py-2 text-sm hover:bg-gray-50 cursor-pointer text-gray-600">v1.0</div>
                  </div>
                </div>
              </div>

              {!isGenerating && (
                <>
                  <button 
                    onClick={() => {
                      setTempSchedule({ ...scheduleConfig });
                      setShowScheduleModal(true);
                    }}
                    className={`p-2 border rounded-lg transition-colors ${scheduleConfig.enabled ? 'bg-indigo-50 border-indigo-200 text-indigo-600' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}
                    title={scheduleConfig.enabled ? `已开启每日定时 (${scheduleConfig.time})` : "定时生成配置"}
                  >
                    <Clock className="w-4 h-4" />
                  </button>

                  <button 
                    onClick={() => setIsEditing(true)}
                    className="p-2 bg-white border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors"
                    title="编辑报告"
                  >
                    <Edit3 className="w-4 h-4" />
                  </button>
                  
                  <button className="p-2 bg-white border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors" title="下载PDF">
                    <Download className="w-4 h-4" />
                  </button>
                </>
              )}
            </>
          ) : (
            <div className="flex items-center gap-2">
              <button 
                onClick={() => setIsEditing(false)}
                className="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium"
              >
                取消
              </button>
              <button 
                onClick={() => setIsEditing(false)}
                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center shadow-sm transition-colors text-sm font-medium"
              >
                保存修改
              </button>
            </div>
          )}
        </div>
      </div>

      {/* 报告正文 */}
      <div className="p-8 flex-1">
        {isGenerating ? (
          <div className="h-full flex flex-col items-center justify-center text-center animate-in fade-in py-20">
            <Loader2 className="w-12 h-12 text-blue-500 animate-spin mb-4" />
            <h3 className="text-xl font-bold text-gray-900 mb-2">报告生成中...</h3>
            <p className="text-gray-500 max-w-sm">AI正在深度分析您的数据，这可能需要1-3分钟时间，请耐心等待或返回列表处理其他工作。</p>
          </div>
        ) : (
          <>
            {isEditing ? (
              <>
                <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 p-3 rounded-lg text-sm mb-4 flex items-center">
                  <Edit3 className="w-4 h-4 mr-2" /> 您当前处于编辑模式，可以使用上方工具栏修改下方文本排版。
                </div>
                <EditorToolbar />
              </>
            ) : null}

            <div className={`${proseStyles} ${isEditing ? 'outline-dashed outline-2 outline-gray-200 p-4 rounded-lg bg-white/50 min-h-[500px]' : ''}`} contentEditable={isEditing} suppressContentEditableWarning>
              <h3 className="text-lg font-bold text-gray-800 border-l-4 border-blue-600 pl-3 mb-4">执行摘要</h3>
              <p className="text-gray-600 leading-relaxed mb-6">
                根据2023年Q4数据分析，华东区整体销售额达到 <strong>￥12,450,000</strong>，环比Q3增长 <strong>15.2%</strong>。然而，客单价出现小幅下滑（-3%），主要由于双十一期间的大额满减活动导致。退货率稳定在 4.5% 的健康区间。
              </p>

              <h3 className="text-lg font-bold text-gray-800 border-l-4 border-blue-600 pl-3 mb-4 mt-8">关键图表视图</h3>
              <div className="grid grid-cols-2 gap-6 mb-8" contentEditable={false}>
                {/* 模拟图表区域 1 */}
                <div className="border border-gray-100 rounded-xl p-4 bg-gray-50/30 flex flex-col items-center justify-center h-48">
                  <div className="flex items-end space-x-2 h-24 mb-4">
                    <div className="w-8 bg-blue-200 rounded-t-md h-12"></div>
                    <div className="w-8 bg-blue-300 rounded-t-md h-16"></div>
                    <div className="w-8 bg-blue-400 rounded-t-md h-20"></div>
                    <div className="w-8 bg-blue-600 rounded-t-md h-24"></div>
                  </div>
                  <span className="text-sm font-medium text-gray-500">Q4各月度销售额趋势</span>
                </div>
                {/* 模拟图表区域 2 */}
                <div className="border border-gray-100 rounded-xl p-4 bg-gray-50/30 flex flex-col items-center justify-center h-48 relative">
                  <PieChart className="w-20 h-20 text-purple-400 mb-4" />
                  <span className="text-sm font-medium text-gray-500">商品类目销售占比</span>
                </div>
              </div>

              <h3 className="text-lg font-bold text-gray-800 border-l-4 border-blue-600 pl-3 mb-4">异常发现与建议</h3>
              <ul className="list-disc pl-5 text-gray-600 space-y-2 mb-8">
                <li><strong>异常预警：</strong> 浙江大区在12月第二周出现了罕见的销量暴跌（环比下降22%），结合外部数据，初步判断受局部物流受阻影响。</li>
                <li><strong>策略建议：</strong> 针对客单价下滑问题，建议在接下来的Q1开展"高客单商品连带销售"策略，提升关联组合搭配的推荐权重。</li>
              </ul>
            </div>
          </>
        )}
      </div>

      {/* 底部功能区：评价与思维链 */}
      {!isGenerating && (
        <div className="border-t border-gray-100 px-6 py-4 bg-gray-50 flex flex-col rounded-b-2xl transition-all">
          <div className="flex justify-between items-center w-full">
            <button 
              onClick={() => setShowCoT(true)}
              className="flex items-center text-sm px-3 py-1.5 rounded-lg transition-colors text-gray-500 hover:bg-gray-200 hover:text-gray-800"
            >
              <BrainCircuit className="w-4 h-4 mr-1.5" /> 
              查看 AI 思维链
            </button>

            <div className="flex items-center space-x-3">
              {!isFeedbackSubmitted ? (
                <>
                  <span className="text-sm text-gray-500 mr-2">报告质量如何？</span>
                  <button 
                    onClick={() => setFeedbackType('up')}
                    className={`p-1.5 rounded transition-colors ${feedbackType === 'up' ? 'text-green-600 bg-green-100' : 'text-gray-400 hover:text-green-600 hover:bg-green-50'}`} 
                    title="有用"
                  >
                    <ThumbsUp className="w-4 h-4" />
                  </button>
                  <button 
                    onClick={() => setFeedbackType('down')}
                    className={`p-1.5 rounded transition-colors ${feedbackType === 'down' ? 'text-red-600 bg-red-100' : 'text-gray-400 hover:text-red-600 hover:bg-red-50'}`} 
                    title="不准确"
                  >
                    <ThumbsDown className="w-4 h-4" />
                  </button>
                </>
              ) : (
                <span className="text-sm text-green-600 flex items-center bg-green-50 px-3 py-1 rounded-full">
                  <CheckCircle2 className="w-4 h-4 mr-1.5" /> 感谢您的反馈！
                </span>
              )}
            </div>
          </div>

        {/* 展开的评价输入框 */}
        {feedbackType && !isFeedbackSubmitted && (
          <div className="mt-4 flex items-center bg-white border border-gray-200 rounded-lg p-1.5 pr-2 shadow-sm animate-in slide-in-from-top-2">
            <input 
              type="text"
              value={feedbackText}
              onChange={(e) => setFeedbackText(e.target.value)}
              placeholder="请描述您的具体建议或报告中不准确的地方..."
              className="flex-1 px-3 py-1.5 text-sm border-none focus:ring-0 outline-none text-gray-700 bg-transparent"
              onKeyDown={(e) => e.key === 'Enter' && handleFeedbackSubmit()}
            />
            <button 
              onClick={handleFeedbackSubmit}
              disabled={!feedbackText.trim()}
              className={`p-1.5 rounded-md flex items-center transition-colors ${feedbackText.trim() ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 text-gray-400'}`}
            >
              <Send className="w-4 h-4" />
            </button>
          </div>
        )}
      </div>
      )}

      {/* 定时生成配置弹窗 */}
      {showScheduleModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/40 backdrop-blur-sm animate-in fade-in">
          <div className="bg-white rounded-2xl shadow-2xl w-[400px] overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
              <h3 className="text-lg font-bold text-gray-900 flex items-center">
                <Clock className="w-5 h-5 mr-2 text-indigo-500" /> 定时生成配置
              </h3>
              <button 
                onClick={() => setShowScheduleModal(false)}
                className="text-gray-400 hover:text-gray-700 transition-colors p-1"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            
            <div className="p-6 space-y-6">
              <div className="flex justify-between items-center">
                <div>
                  <h4 className="font-semibold text-gray-800">开启每日自动生成</h4>
                  <p className="text-xs text-gray-500 mt-1">系统将基于当前模板，自动为您更新数据并生成新报告</p>
                </div>
                <div 
                  onClick={() => setTempSchedule({ ...tempSchedule, enabled: !tempSchedule.enabled })}
                  className={`w-11 h-6 rounded-full flex items-center p-1 cursor-pointer transition-colors ${tempSchedule.enabled ? 'bg-indigo-500' : 'bg-gray-300'}`}
                >
                  <div className={`w-4 h-4 rounded-full bg-white shadow-sm transform transition-transform ${tempSchedule.enabled ? 'translate-x-5' : 'translate-x-0'}`}></div>
                </div>
              </div>

              {tempSchedule.enabled && (
                <div className="pt-4 border-t border-gray-100 animate-in slide-in-from-top-2 fade-in">
                  <label className="block text-sm font-medium text-gray-700 mb-2">选择每日生成时间</label>
                  <input 
                    type="time" 
                    value={tempSchedule.time}
                    onChange={(e) => setTempSchedule({ ...tempSchedule, time: e.target.value })}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800"
                  />
                  <p className="text-xs text-amber-600 mt-3 flex items-start bg-amber-50 p-2 rounded border border-amber-100">
                    * 报告生成可能会因数据量大小有一定的延迟，通常在设置时间后的 5-10 分钟内完成。
                  </p>
                </div>
              )}
            </div>

            <div className="px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-end gap-3">
              <button 
                onClick={() => setShowScheduleModal(false)}
                className="px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-200 rounded-lg transition-colors"
              >
                取消
              </button>
              <button 
                onClick={handleSaveSchedule}
                className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg shadow-sm transition-colors"
              >
                保存配置
              </button>
            </div>
          </div>
        </div>
      )}

      {/* AI 思维链侧边抽屉 */}
      {showCoT && !isGenerating && (
        <div className="fixed inset-0 z-40 bg-gray-900/20 backdrop-blur-sm transition-opacity" onClick={() => setShowCoT(false)}></div>
      )}
      <div 
        className={`fixed top-0 right-0 h-full w-full sm:w-96 bg-slate-900 shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${(showCoT && !isGenerating) ? 'translate-x-0' : 'translate-x-full'}`}
      >
        <div className="p-5 border-b border-slate-700 flex justify-between items-center text-white bg-slate-800/50">
          <h3 className="font-bold flex items-center text-lg">
            <BrainCircuit className="w-5 h-5 mr-2 text-blue-400" /> AI 推理思维链
          </h3>
          <button 
            onClick={() => setShowCoT(false)}
            className="p-1.5 rounded-full hover:bg-slate-700 text-slate-400 hover:text-white transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>
        <div className="p-6 text-slate-300 font-mono text-sm overflow-y-auto space-y-4 flex-1">
          <div className="border-l-2 border-blue-500/50 pl-4 py-1">
            <span className="text-blue-400 font-bold block mb-1">Step 1: 提取与解析</span>
            <p className="opacity-80">提取输入：华东区 Q4 销售数据集 (包含订单、退款、SKU维度).</p>
            <p className="opacity-80">识别模板指令："重点指出业绩异常波动的区域".</p>
          </div>
          <div className="border-l-2 border-purple-500/50 pl-4 py-1">
            <span className="text-purple-400 font-bold block mb-1">Step 2: 计算与推理</span>
            <p className="opacity-80">执行计算：按省份计算每周环比增长率...</p>
            <p className="opacity-80 text-yellow-300">发现异常值：浙江省 12周2 销售额(X) 较 12周1 销售额(Y) 下降 22.4%, Z-score {">"} 3.</p>
          </div>
          <div className="border-l-2 border-emerald-500/50 pl-4 py-1">
            <span className="text-emerald-400 font-bold block mb-1">Step 3: 归因与生成</span>
            <p className="opacity-80">交叉对比：物流时效表显示该时段该区域平均延迟送达率飙升.</p>
            <p className="opacity-80">生成结论：将异常归因为物流受阻，整合入报告正文.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

// ==========================================
// 4. 模板详情页 Component
// ==========================================
function TemplateDetail({ templateId, onBack }) {
  const [isEditing, setIsEditing] = useState(false);
  const [hasChanges, setHasChanges] = useState(false);
  
  const originalTemplate = MOCK_TEMPLATES[templateId] || MOCK_TEMPLATES['t1'];
  const [templateData, setTemplateData] = useState({...originalTemplate});

  const handlePromptChange = (e) => {
    setTemplateData({...templateData, prompt: e.target.value});
    setHasChanges(true);
  };

  return (
    <div className="max-w-4xl mx-auto bg-white rounded-2xl shadow-sm border border-gray-200 animate-in fade-in">
      {/* 头部 */}
      <div className="border-b border-gray-100 px-6 py-5 flex justify-between items-center">
        <div className="flex items-center">
          <button onClick={onBack} className="mr-4 text-gray-400 hover:text-gray-800 transition-colors p-1 hover:bg-gray-100 rounded-full">
            <ChevronLeft className="w-6 h-6" />
          </button>
          <div>
            <div className="flex items-center gap-2 mb-1">
              <LayoutTemplate className="w-5 h-5 text-indigo-500" />
              <h2 className="text-xl font-bold text-gray-900">模板配置详情</h2>
            </div>
            <p className="text-sm text-gray-500">ID: {templateData.id}</p>
          </div>
        </div>

        <div className="flex items-center space-x-3">
          {!isEditing ? (
            <button 
              onClick={() => setIsEditing(true)}
              className="bg-white border border-gray-200 text-gray-700 hover:bg-gray-50 px-4 py-2 rounded-lg flex items-center shadow-sm transition-colors text-sm font-medium"
            >
              <Edit3 className="w-4 h-4 mr-2" /> 编辑模板
            </button>
          ) : (
            <div className="flex items-center gap-2">
              <button 
                onClick={() => { setIsEditing(false); setTemplateData({...originalTemplate}); setHasChanges(false); }}
                className="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm"
              >
                取消
              </button>
              <button 
                onClick={() => { setIsEditing(false); /* 实际应用中这里会调用API保存 */ }}
                className={`px-4 py-2 rounded-lg flex items-center shadow-sm transition-colors text-sm font-medium ${
                  hasChanges ? 'bg-indigo-600 hover:bg-indigo-700 text-white' : 'bg-gray-100 text-gray-400 cursor-not-allowed'
                }`}
                disabled={!hasChanges}
              >
                保存配置
              </button>
            </div>
          )}
        </div>
      </div>

      {/* 提示信息 */}
      {isEditing && hasChanges && (
        <div className="bg-amber-50 border-b border-amber-200 px-6 py-3 flex items-start sm:items-center justify-between">
          <div className="flex items-center text-amber-800 text-sm">
            <MoreVertical className="w-4 h-4 mr-2 text-amber-500" />
            <span>模板已修改。保存后，基于此模板的历史报告 <strong>需要重新生成</strong> 才能应用新配置。</span>
          </div>
          <button className="whitespace-nowrap bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ml-4 shadow-sm border border-amber-200">
            重新生成相关报告
          </button>
        </div>
      )}

      {/* 内容区 */}
      <div className="p-6 space-y-8">
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-2">模板名称</label>
          <input 
            type="text" 
            value={templateData.name}
            onChange={(e) => { setTemplateData({...templateData, name: e.target.value}); setHasChanges(true); }}
            disabled={!isEditing}
            className={`w-full px-4 py-2 rounded-lg outline-none transition-all ${
              isEditing ? 'border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white' : 'border border-transparent bg-gray-50 text-gray-700'
            }`}
          />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-gray-50/80 p-5 rounded-xl border border-gray-100">
            <h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center">
              <TrendingUp className="w-4 h-4 mr-2 text-blue-500" /> 分析指标 (Metrics)
            </h3>
            <div className="flex flex-wrap gap-2">
              {templateData.metrics.map(m => (
                <span key={m} className={`text-sm px-3 py-1.5 rounded-md ${isEditing ? 'bg-white border border-gray-200 flex items-center group cursor-pointer hover:border-red-300' : 'bg-blue-100 text-blue-700'}`}>
                  {m}
                  {isEditing && <span className="ml-2 text-gray-300 group-hover:text-red-500 text-xs">×</span>}
                </span>
              ))}
              {isEditing && <button className="text-sm px-3 py-1.5 rounded-md border border-dashed border-gray-300 text-gray-500 hover:text-indigo-600 hover:border-indigo-400 flex items-center"><Plus className="w-3 h-3 mr-1" /> 添加指标</button>}
            </div>
          </div>

          <div className="bg-gray-50/80 p-5 rounded-xl border border-gray-100">
            <h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center">
              <PieChart className="w-4 h-4 mr-2 text-purple-500" /> 分析维度 (Dimensions)
            </h3>
            <div className="flex flex-wrap gap-2">
              {templateData.dimensions.map(d => (
                <span key={d} className={`text-sm px-3 py-1.5 rounded-md ${isEditing ? 'bg-white border border-gray-200 flex items-center group cursor-pointer hover:border-red-300' : 'bg-purple-100 text-purple-700'}`}>
                  {d}
                  {isEditing && <span className="ml-2 text-gray-300 group-hover:text-red-500 text-xs">×</span>}
                </span>
              ))}
              {isEditing && <button className="text-sm px-3 py-1.5 rounded-md border border-dashed border-gray-300 text-gray-500 hover:text-indigo-600 hover:border-indigo-400 flex items-center"><Plus className="w-3 h-3 mr-1" /> 添加维度</button>}
            </div>
          </div>
        </div>

        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
            <BrainCircuit className="w-4 h-4 mr-2 text-emerald-500" /> AI 核心提示词 (Prompt)
          </label>
          {isEditing ? (
            <textarea 
              value={templateData.prompt}
              onChange={handlePromptChange}
              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none h-32 resize-y text-gray-700 leading-relaxed font-mono text-sm"
            />
          ) : (
            <div className="bg-gray-50 p-5 rounded-xl border border-gray-100 text-gray-700 leading-relaxed font-mono text-sm shadow-inner relative">
              <div className="absolute top-0 left-0 w-1 h-full bg-emerald-400 rounded-l-xl"></div>
              {templateData.prompt}
            </div>
          )}
        </div>

        {/* 模板正文内容区 */}
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
            <FileText className="w-4 h-4 mr-2 text-blue-500" /> 模版正文框架 (包含占位符)
          </label>
          {isEditing ? (
            <RichTextEditor 
              value={templateData.content}
              onChange={(val) => { setTemplateData({...templateData, content: val}); setHasChanges(true); }}
              minHeight="350px"
              placeholder="在此编辑模版正文排版与内容..."
            />
          ) : (
            <div 
              className={`bg-white p-6 rounded-xl border border-gray-200 text-gray-700 leading-relaxed shadow-sm ${proseStyles}`}
              dangerouslySetInnerHTML={{ __html: templateData.content || '暂无模版正文内容' }}
            />
          )}
        </div>
      </div>
    </div>
  );
}