import React, { useState, useEffect } from 'react';
import { useTheme } from '../contexts/ThemeContext';
import {
  ArrowLeft,
  Save,
  Download,
  Send,
  RotateCcw,
  PlayCircle,
  CheckCircle2,
  Circle,
  Loader2,
  ChevronDown,
  ChevronRight,
  FileText,
  Link2,
  Upload,
  Clock,
  AlertTriangle,
  Sparkles,
  Users,
  Copy,
  CheckCheck,
  RefreshCw,
  Database,
  BarChart3,
  PieChart,
  LineChart,
  Table,
  User,
  MessageSquare,
  Network,
  Target,
  BookOpen,
  Calendar,
  Search,
} from 'lucide-react';
import { LightAppType } from './LightAppSquare';

// 应用配置接口
interface AppConfig {
  id: LightAppType;
  name: string;
  description: string;
  icon: React.ElementType;
  iconColor: string;
  bgColor: string;
  inputs: {
    name: string;
    label: string;
    placeholder: string;
    type: 'text' | 'textarea' | 'link' | 'upload';
    required: boolean;
  }[];
  params: {
    name: string;
    label: string;
    options: { value: string; label: string }[];
    default: string;
  }[];
  dimensions: {
    name: string;
    label: string;
    default: boolean;
  }[];
  steps: string[];
  previewFields: { key: string; label: string }[];
}

interface LightAppRunProps {
  onNavigate: (page: string, appId?: string) => void;
  appId?: LightAppType;
}

// 应用配置数据
const appConfigs: Record<LightAppType, AppConfig> = {
  'info-ty': {
    id: 'info-ty',
    name: '信息TY',
    description: '围绕单条或多条信息进行TY向分析',
    icon: FileText,
    iconColor: 'text-blue-500',
    bgColor: 'bg-blue-500/10',
    inputs: [
      { name: 'mainInput', label: '信息文本', placeholder: '请输入信息内容...', type: 'textarea', required: true },
      { name: 'link', label: '信息链接', placeholder: '可选，粘贴信息链接', type: 'link', required: false },
      { name: 'materials', label: '上传材料', placeholder: '支持 txt, pdf, docx', type: 'upload', required: false },
    ],
    params: [
      { name: 'timeRange', label: '时间范围', options: [
        { value: '7d', label: '近7天' },
        { value: '30d', label: '近30天' },
        { value: '90d', label: '近90天' },
        { value: 'all', label: '全部' },
      ], default: '30d' },
      { name: 'dataRange', label: '数据范围', options: [
        { value: 'all', label: '全部' },
        { value: '国内', label: '国内' },
        { value: '境外', label: '境外' },
      ], default: 'all' },
      { name: 'depth', label: '输出深度', options: [
        { value: 'brief', label: '简略' },
        { value: 'standard', label: '标准' },
        { value: 'detailed', label: '详细' },
      ], default: 'standard' },
    ],
    dimensions: [
      { name: 'basic', label: '基础分析', default: true },
      { name: 'risk', label: '风险提示', default: true },
      { name: 'summary', label: '摘要结论', default: true },
    ],
    steps: ['已识别输入对象', '已获取数据', '已完成核心分析', '已生成结果'],
    previewFields: [
      { key: 'title', label: '信息标题' },
      { key: 'time', label: '发布时间' },
      { key: 'source', label: '信息来源' },
    ],
  },
  'info-pg': {
    id: 'info-pg',
    name: '信息PG',
    description: '围绕单条或多条信息进行PG向分析',
    icon: User,
    iconColor: 'text-cyan-500',
    bgColor: 'bg-cyan-500/10',
    inputs: [
      { name: 'mainInput', label: '信息文本', placeholder: '请输入信息内容...', type: 'textarea', required: true },
      { name: 'materials', label: '上传材料', placeholder: '支持 txt, pdf, docx', type: 'upload', required: false },
    ],
    params: [
      { name: 'timeRange', label: '时间范围', options: [
        { value: '30d', label: '近30天' },
        { value: '90d', label: '近90天' },
        { value: '180d', label: '近半年' },
        { value: 'all', label: '全部' },
      ], default: '30d' },
      { name: 'count', label: '抓取条数', options: [
        { value: '50', label: '50条' },
        { value: '100', label: '100条' },
        { value: '200', label: '200条' },
        { value: '500', label: '500条' },
      ], default: '100' },
    ],
    dimensions: [
      { name: 'profile', label: '画像分析', default: true },
      { name: 'tendency', label: '内容倾向', default: true },
      { name: 'behavior', label: '行为特征', default: true },
    ],
    steps: ['已识别输入对象', '已获取数据', '已完成画像分析', '已生成结果'],
    previewFields: [
      { key: 'title', label: '信息标题' },
      { key: 'author', label: '发布者' },
      { key: 'type', label: '内容类型' },
    ],
  },
  'info-spread': {
    id: 'info-spread',
    name: '信息传播分析',
    description: '分析信息传播路径、传播范围与传播表现',
    icon: Network,
    iconColor: 'text-teal-500',
    bgColor: 'bg-teal-500/10',
    inputs: [
      { name: 'link', label: '信息链接', placeholder: '请粘贴信息链接', type: 'link', required: true },
      { name: 'text', label: '信息文本', placeholder: '可选，补充信息文本', type: 'textarea', required: false },
    ],
    params: [
      { name: 'scope', label: '传播范围', options: [
        { value: 'all', label: '全部' },
        { value: 'domestic', label: '国内' },
        { value: 'overseas', label: '境外' },
      ], default: 'all' },
      { name: 'timeRange', label: '时间范围', options: [
        { value: '7d', label: '近7天' },
        { value: '30d', label: '近30天' },
        { value: '90d', label: '近90天' },
      ], default: '7d' },
    ],
    dimensions: [
      { name: 'path', label: '传播路径', default: true },
      { name: 'nodes', label: '传播节点', default: true },
      { name: 'performance', label: '传播表现', default: true },
      { name: 'impact', label: '影响摘要', default: true },
    ],
    steps: ['已识别信息', '已获取传播数据', '已完成传播路径分析', '已生成结果'],
    previewFields: [
      { key: 'title', label: '信息标题' },
      { key: 'originalPlatform', label: '原始平台' },
      { key: 'totalSpread', label: '总传播量' },
    ],
  },
  'account-pg': {
    id: 'account-pg',
    name: '账号PG',
    description: '围绕账号内容与行为特征进行PG分析',
    icon: Users,
    iconColor: 'text-purple-500',
    bgColor: 'bg-purple-500/10',
    inputs: [
      { name: 'accountId', label: '账号ID/链接', placeholder: '请输入账号ID或粘贴账号链接', type: 'text', required: true },
      { name: 'materials', label: '上传内容包', placeholder: '支持 json, csv, zip', type: 'upload', required: false },
    ],
    params: [
      { name: 'timeRange', label: '时间范围', options: [
        { value: '30d', label: '近30天' },
        { value: '90d', label: '近90天' },
        { value: '180d', label: '近半年' },
        { value: 'all', label: '全部' },
      ], default: '30d' },
      { name: 'count', label: '抓取条数', options: [
        { value: '50', label: '50条' },
        { value: '100', label: '100条' },
        { value: '200', label: '200条' },
        { value: '500', label: '500条' },
      ], default: '100' },
    ],
    dimensions: [
      { name: 'profile', label: '账号画像', default: true },
      { name: 'tendency', label: '内容倾向', default: true },
      { name: 'behavior', label: '行为特征', default: true },
      { name: 'impact', label: '影响判断', default: true },
    ],
    steps: ['已定位账号', '已抓取内容', '已完成内容倾向分析', '已完成账号画像分析', '已生成结果'],
    previewFields: [
      { key: 'accountName', label: '账号名称' },
      { key: 'accountType', label: '账号类型' },
      { key: 'followers', label: '粉丝数' },
    ],
  },
  'sentiment': {
    id: 'sentiment',
    name: '三情分析',
    description: '对事件进行舆情、社情、民情综合分析',
    icon: MessageSquare,
    iconColor: 'text-orange-500',
    bgColor: 'bg-orange-500/10',
    inputs: [
      { name: 'eventName', label: '事件名称', placeholder: '请输入事件名称', type: 'text', required: true },
      { name: 'eventLink', label: '事件链接', placeholder: '可选，粘贴事件相关链接', type: 'link', required: false },
      { name: 'materials', label: '上传材料', placeholder: '支持上传相关素材', type: 'upload', required: false },
    ],
    params: [
      { name: 'timeRange', label: '时间范围', options: [
        { value: '7d', label: '近7天' },
        { value: '30d', label: '近30天' },
        { value: '90d', label: '近90天' },
      ], default: '7d' },
      { name: 'dataRange', label: '数据范围', options: [
        { value: 'all', label: '全部' },
        { value: '国内', label: '国内' },
        { value: '境外', label: '境外' },
      ], default: 'all' },
    ],
    dimensions: [
      { name: 'publicSentiment', label: '舆情分析', default: true },
      { name: 'socialSentiment', label: '社情分析', default: true },
      { name: 'publicOpinion', label: '民情分析', default: true },
      { name: 'riskAlert', label: '风险提示', default: true },
    ],
    steps: ['已识别事件', '已聚合相关内容', '已完成舆情分析', '已完成社情分析', '已完成民情分析', '已生成结果'],
    previewFields: [
      { key: 'eventName', label: '事件名称' },
      { key: 'eventTime', label: '事件时间' },
      { key: 'relatedCount', label: '相关内容数' },
    ],
  },
  'event': {
    id: 'event',
    name: '事件分析',
    description: '围绕某个事件进行整体分析',
    icon: Target,
    iconColor: 'text-red-500',
    bgColor: 'bg-red-500/10',
    inputs: [
      { name: 'eventName', label: '事件名称', placeholder: '请输入事件名称', type: 'text', required: true },
      { name: 'eventDesc', label: '事件说明', placeholder: '请补充事件相关说明', type: 'textarea', required: false },
      { name: 'materials', label: '上传材料', placeholder: '支持上传事件相关材料', type: 'upload', required: false },
    ],
    params: [
      { name: 'timeRange', label: '时间范围', options: [
        { value: '30d', label: '近30天' },
        { value: '90d', label: '近90天' },
        { value: '180d', label: '近半年' },
        { value: 'all', label: '全部' },
      ], default: '30d' },
      { name: 'depth', label: '输出深度', options: [
        { value: 'brief', label: '简略' },
        { value: 'standard', label: '标准' },
        { value: 'detailed', label: '详细' },
      ], default: 'standard' },
    ],
    dimensions: [
      { name: 'context', label: '事件脉络', default: true },
      { name: 'keyPoints', label: '关键节点', default: true },
      { name: 'risk', label: '风险判断', default: true },
      { name: 'suggestions', label: '初步建议', default: true },
    ],
    steps: ['已识别事件', '已整理事件材料', '已完成脉络分析', '已完成风险判断', '已生成结果'],
    previewFields: [
      { key: 'eventName', label: '事件名称' },
      { key: 'eventStage', label: '所处阶段' },
      { key: 'keyPlayers', label: '关键参与者' },
    ],
  },
  'topic': {
    id: 'topic',
    name: '专题分析',
    description: '对某专题做集中分析',
    icon: BookOpen,
    iconColor: 'text-green-500',
    bgColor: 'bg-green-500/10',
    inputs: [
      { name: 'topicName', label: '专题名称', placeholder: '请输入专题名称', type: 'text', required: true },
      { name: 'materials', label: '上传材料', placeholder: '支持上传专题相关文本集合', type: 'upload', required: false },
    ],
    params: [
      { name: 'depth', label: '分析深度', options: [
        { value: 'surface', label: '表面' },
        { value: 'standard', label: '标准' },
        { value: 'deep', label: '深度' },
      ], default: 'standard' },
      { name: 'sourceRange', label: '来源范围', options: [
        { value: 'all', label: '全部' },
        { value: '国内', label: '国内' },
        { value: '境外', label: '境外' },
      ], default: 'all' },
    ],
    dimensions: [
      { name: 'structure', label: '专题结构', default: true },
      { name: 'coreIssues', label: '核心问题', default: true },
      { name: 'viewpoints', label: '观点聚合', default: true },
      { name: 'conclusions', label: '结论建议', default: true },
    ],
    steps: ['已识别专题', '已获取相关材料', '已完成结构分析', '已聚合核心观点', '已生成结果'],
    previewFields: [
      { key: 'topicName', label: '专题名称' },
      { key: 'relatedDocs', label: '相关文档' },
      { key: 'coverage', label: '覆盖范围' },
    ],
  },
};

type ResultTab = 'overview' | 'details' | 'raw';

const LightAppRun: React.FC<LightAppRunProps> = ({ onNavigate, appId }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const [currentAppId, setCurrentAppId] = useState<LightAppType>(appId || 'sentiment');
  const [resultTab, setResultTab] = useState<ResultTab>('overview');
  const [isRunning, setIsRunning] = useState(false);
  const [currentStep, setCurrentStep] = useState(0);
  const [copied, setCopied] = useState(false);
  const [formData, setFormData] = useState<Record<string, string>>({});
  const [params, setParams] = useState<Record<string, string>>({});
  const [dimensions, setDimensions] = useState<Record<string, boolean>>({});
  const [hasResult, setHasResult] = useState(false);
  const [result, setResult] = useState<any>(null);

  const config = appConfigs[currentAppId];
  const Icon = config.icon;

  // 初始化表单数据
  useEffect(() => {
    console.log('当前应用:', currentAppId);
    if (config) {
      const initialForm: Record<string, string> = {};
      config.inputs.forEach(input => {
        initialForm[input.name] = '';
      });
      setFormData(initialForm);

      const initialParams: Record<string, string> = {};
      config.params.forEach(param => {
        initialParams[param.name] = param.default;
      });
      setParams(initialParams);

      const initialDims: Record<string, boolean> = {};
      config.dimensions.forEach(dim => {
        initialDims[dim.name] = dim.default;
      });
      setDimensions(initialDims);
    }
  }, [currentAppId]);

  // 执行分析
  const handleRun = async () => {
    setIsRunning(true);
    setCurrentStep(0);
    setHasResult(false);

    // 模拟执行步骤
    for (let i = 0; i < config.steps.length; i++) {
      await new Promise(resolve => setTimeout(resolve, 800));
      setCurrentStep(i + 1);
    }

    // 生成结果
    await new Promise(resolve => setTimeout(resolve, 500));
    setResult(generateMockResult());
    setHasResult(true);
    setIsRunning(false);
  };

  // 生成模拟结果
  const generateMockResult = () => {
    switch (currentAppId) {
      case 'sentiment':
        return {
          overview: {
            overallSentiment: '中偏负',
            mainConcerns: ['活动形式', '品牌调性', '执行成本'],
            riskAlert: '讨论热度上升，负向占比增加',
            sentimentTrend: '下行',
          },
          details: {
            publicSentiment: '舆情方面，主要关注点是活动本身的创新性和参与体验。部分用户对活动细节提出质疑，整体讨论呈现多元化特征。',
            socialSentiment: '社情方面，该事件引发了关于活动公平性的讨论，社交媒体上相关话题讨论量显著上升。',
            publicOpinion: '民情方面，公众对该活动的看法分化明显，支持和反对声音并存，需关注后续舆情走向。',
            riskAssessment: '当前风险等级：中。建议持续关注舆情变化，准备应对预案。',
          },
          raw: [
            { type: '正面评论', content: '活动创意很好，期待参与', count: 234 },
            { type: '中性评论', content: '等待活动正式开始', count: 567 },
            { type: '负面评论', content: '对活动细节表示质疑', count: 189 },
          ],
        };
      case 'event':
        return {
          overview: {
            eventStage: '发酵期',
            keyNodes: '活动公布期，关注度持续上升',
            riskLevel: '中',
            suggestion: '建议加强信息透明度，及时回应公众关切',
          },
          details: {
            context: '该事件起因于...，经过...，目前处于...阶段。',
            keyPoints: ['关键节点一：...', '关键节点二：...', '关键节点三：...'],
            riskJudgment: '风险可控，但需关注...',
            suggestions: '1. ... 2. ... 3. ...',
          },
          raw: [
            { time: '2026-03-18', title: '事件起因', content: '...' },
            { time: '2026-03-19', title: '初步发酵', content: '...' },
            { time: '2026-03-20', title: '关注度上升', content: '...' },
          ],
        };
      case 'account-pg':
        return {
          overview: {
            accountProfile: '该账号为...类型账号',
            contentTendency: '内容倾向明显偏...',
            influenceJudgment: '具有一定影响力，需关注...',
          },
          details: {
            profileAnalysis: '账号画像分析...',
            contentAnalysis: '内容倾向分析...',
            behaviorAnalysis: '行为特征分析...',
            influenceAnalysis: '影响判断分析...',
          },
          raw: [
            { date: '2026-03-15', content: '...' },
            { date: '2026-03-16', content: '...' },
            { date: '2026-03-17', content: '...' },
          ],
        };
      default:
        return {
          overview: { summary: '分析结果摘要...' },
          details: { analysis: '详细分析内容...' },
          raw: [],
        };
    }
  };

  // 重置
  const handleReset = () => {
    const initialForm: Record<string, string> = {};
    config.inputs.forEach(input => {
      initialForm[input.name] = '';
    });
    setFormData(initialForm);

    const initialParams: Record<string, string> = {};
    config.params.forEach(param => {
      initialParams[param.name] = param.default;
    });
    setParams(initialParams);

    const initialDims: Record<string, boolean> = {};
    config.dimensions.forEach(dim => {
      initialDims[dim.name] = dim.default;
    });
    setDimensions(initialDims);

    setHasResult(false);
    setResult(null);
    setCurrentStep(0);
  };

  // 复制结果
  const handleCopy = () => {
    navigator.clipboard.writeText(JSON.stringify(result, null, 2));
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  // 保存快照
  const handleSaveSnapshot = () => {
    // 模拟保存
    alert('快照已保存到运行记录');
    onNavigate('light-app-records');
  };

  // 导出
  const handleExport = () => {
    const blob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${config.name}_结果_${new Date().toISOString().split('T')[0]}.json`;
    a.click();
  };

  return (
    <div className="space-y-4">
      {/* 顶部操作栏 */}
      <div className={`rounded-xl border p-4 ${
        isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
      }`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <button
              onClick={() => onNavigate('light-app-square')}
              className={`p-2 rounded-lg transition-colors ${
                isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'
              }`}
            >
              <ArrowLeft className="w-5 h-5" />
            </button>
            <div className="flex items-center gap-3">
              <div className={`p-2 rounded-lg ${config.bgColor}`}>
                <Icon className={`w-5 h-5 ${config.iconColor}`} />
              </div>
              <div>
                <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                  {config.name}
                </h1>
                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                  {config.description}
                </p>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={handleSaveSnapshot}
              disabled={!hasResult}
              className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${
                hasResult
                  ? isDark
                    ? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  : isDark
                    ? 'bg-slate-800 text-slate-600 cursor-not-allowed'
                    : 'bg-gray-50 text-gray-400 cursor-not-allowed'
              }`}
            >
              <Save className="w-4 h-4" />
              保存快照
            </button>
            <button
              onClick={handleExport}
              disabled={!hasResult}
              className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${
                hasResult
                  ? isDark
                    ? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  : isDark
                    ? 'bg-slate-800 text-slate-600 cursor-not-allowed'
                    : 'bg-gray-50 text-gray-400 cursor-not-allowed'
              }`}
            >
              <Download className="w-4 h-4" />
              导出结果
            </button>
            <button
              onClick={() => onNavigate('task-create')}
              disabled={!hasResult}
              className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${
                hasResult
                  ? isDark
                    ? 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border border-blue-500/30'
                    : 'bg-red-50 text-red-600 hover:bg-red-100 border border-red-200'
                  : isDark
                    ? 'bg-slate-800 text-slate-600 cursor-not-allowed border border-transparent'
                    : 'bg-gray-50 text-gray-400 cursor-not-allowed border border-transparent'
              }`}
            >
              <Send className="w-4 h-4" />
              转正式任务
            </button>
          </div>
        </div>
      </div>

      {/* 主体内容区 - 三栏布局 */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
        {/* 左侧：输入与配置 */}
        <div className={`lg:col-span-4 rounded-xl border p-4 ${
          isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
        }`}>
          <div className="space-y-6">
            {/* 输入对象 */}
            <div>
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                输入对象
              </h3>
              <div className="space-y-3">
                {config.inputs.map(input => (
                  <div key={input.name}>
                    <label className={`block text-xs mb-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                      {input.label}
                      {input.required && <span className="text-red-500 ml-1">*</span>}
                    </label>
                    {input.type === 'textarea' ? (
                      <textarea
                        value={formData[input.name] || ''}
                        onChange={(e) => setFormData({ ...formData, [input.name]: e.target.value })}
                        placeholder={input.placeholder}
                        rows={4}
                        className={`w-full px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${
                          isDark
                            ? 'bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500'
                            : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500'
                        }`}
                      />
                    ) : input.type === 'upload' ? (
                      <div className={`border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
                        isDark
                          ? 'border-slate-600 hover:border-blue-500/50'
                          : 'border-gray-300 hover:border-red-500/50'
                      }`}>
                        <Upload className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
                        <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                          {input.placeholder}
                        </p>
                      </div>
                    ) : (
                      <input
                        type="text"
                        value={formData[input.name] || ''}
                        onChange={(e) => setFormData({ ...formData, [input.name]: e.target.value })}
                        placeholder={input.placeholder}
                        className={`w-full px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${
                          isDark
                            ? 'bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500'
                            : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500'
                        }`}
                      />
                    )}
                  </div>
                ))}
              </div>
            </div>

            {/* 参数配置 */}
            <div>
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                参数配置
              </h3>
              <div className="space-y-3">
                {config.params.map(param => (
                  <div key={param.name}>
                    <label className={`block text-xs mb-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                      {param.label}
                    </label>
                    <select
                      value={params[param.name] || param.default}
                      onChange={(e) => setParams({ ...params, [param.name]: e.target.value })}
                      className={`w-full px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${
                        isDark
                          ? 'bg-slate-900 border-slate-600 text-slate-200 focus:border-blue-500'
                          : 'bg-gray-50 border-gray-300 text-gray-900 focus:border-red-500'
                      }`}
                    >
                      {param.options.map(option => (
                        <option key={option.value} value={option.value}>
                          {option.label}
                        </option>
                      ))}
                    </select>
                  </div>
                ))}
              </div>
            </div>

            {/* 分析维度 */}
            <div>
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                分析维度
              </h3>
              <div className="space-y-2">
                {config.dimensions.map(dim => (
                  <label
                    key={dim.name}
                    className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-colors ${
                      isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'
                    }`}
                  >
                    <input
                      type="checkbox"
                      checked={dimensions[dim.name] ?? dim.default}
                      onChange={(e) => setDimensions({ ...dimensions, [dim.name]: e.target.checked })}
                      className="w-4 h-4 rounded border-gray-300"
                    />
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      {dim.label}
                    </span>
                  </label>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 中间：执行过程/对象预览 */}
        <div className={`lg:col-span-4 rounded-xl border p-4 ${
          isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
        }`}>
          <div className="space-y-6">
            {/* 执行过程 */}
            <div>
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                执行过程
              </h3>
              <div className="space-y-2">
                {config.steps.map((step, index) => (
                  <div key={index} className="flex items-center gap-3">
                    {isRunning && index === currentStep ? (
                      <Loader2 className={`w-4 h-4 animate-spin ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
                    ) : index < currentStep || hasResult ? (
                      <CheckCircle2 className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                    ) : (
                      <Circle className={`w-4 h-4 ${isDark ? 'text-slate-600' : 'text-gray-300'}`} />
                    )}
                    <span className={`text-sm ${
                      index < currentStep || hasResult
                        ? isDark ? 'text-slate-300' : 'text-gray-700'
                        : isDark ? 'text-slate-500' : 'text-gray-400'
                    }`}>
                      {index + 1}. {step}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* 对象预览 */}
            <div>
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                对象预览
              </h3>
              <div className={`rounded-lg p-4 ${
                isDark ? 'bg-slate-900/50' : 'bg-gray-50'
              }`}>
                {formData.mainInput || formData.eventName || formData.accountId || formData.link || formData.topicName ? (
                  <div className="space-y-2">
                    {config.previewFields.map(field => (
                      <div key={field.key} className="flex items-start gap-2">
                        <span className={`text-xs font-medium min-w-[60px] ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                          {field.label}：
                        </span>
                        <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                          {formData.mainInput?.slice(0, 30) || formData.eventName || formData.accountId || formData.link || formData.topicName}
                        </span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className={`text-sm text-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                    请在左侧输入对象后预览
                  </p>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* 右侧：结果区 */}
        <div className={`lg:col-span-4 rounded-xl border p-4 ${
          isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
        }`}>
          <div className="flex items-center justify-between mb-4">
            <h3 className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
              分析结果
            </h3>
            {hasResult && (
              <div className="flex items-center gap-1">
                <button
                  onClick={handleCopy}
                  className={`p-1.5 rounded-lg transition-colors ${
                    isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'
                  }`}
                >
                  {copied ? <CheckCheck className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
                </button>
              </div>
            )}
          </div>

          {/* 结果标签页 */}
          {hasResult ? (
            <>
              <div className="flex gap-1 mb-4">
                {(['overview', 'details', 'raw'] as ResultTab[]).map(tab => (
                  <button
                    key={tab}
                    onClick={() => setResultTab(tab)}
                    className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                      resultTab === tab
                        ? isDark
                          ? 'bg-blue-500/20 text-blue-400'
                          : 'bg-red-50 text-red-600'
                        : isDark
                          ? 'text-slate-400 hover:text-slate-300'
                          : 'text-gray-500 hover:text-gray-700'
                    }`}
                  >
                    {tab === 'overview' ? '概览' : tab === 'details' ? '详细结果' : '原始数据'}
                  </button>
                ))}
              </div>

              {/* 结果内容 */}
              <div className={`rounded-lg p-4 ${
                isDark ? 'bg-slate-900/50' : 'bg-gray-50'
              }`}>
                {resultTab === 'overview' && (
                  <div className="space-y-3">
                    {Object.entries(result?.overview || {}).map(([key, value]) => (
                      <div key={key}>
                        <span className={`text-xs font-medium ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                          {key === 'overallSentiment' ? '总体情绪' :
                           key === 'mainConcerns' ? '主要关注点' :
                           key === 'riskAlert' ? '风险提示' :
                           key === 'sentimentTrend' ? '情绪趋势' :
                           key === 'eventStage' ? '事件阶段' :
                           key === 'keyNodes' ? '关键节点' :
                           key === 'riskLevel' ? '风险等级' :
                           key === 'suggestion' ? '建议' :
                           key === 'accountProfile' ? '账号画像' :
                           key === 'contentTendency' ? '内容倾向' :
                           key === 'influenceJudgment' ? '影响判断' :
                           key === 'summary' ? '结果摘要' : key}:
                        </span>
                        <p className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                          {Array.isArray(value) ? value.join('、') : String(value)}
                        </p>
                      </div>
                    ))}
                  </div>
                )}
                {resultTab === 'details' && (
                  <div className="space-y-3">
                    {Object.entries(result?.details || {}).map(([key, value]) => (
                      <div key={key}>
                        <span className={`text-xs font-medium ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                          {key === 'publicSentiment' ? '舆情分析' :
                           key === 'socialSentiment' ? '社情分析' :
                           key === 'publicOpinion' ? '民情分析' :
                           key === 'riskAssessment' ? '风险评估' :
                           key === 'context' ? '事件脉络' :
                           key === 'keyPoints' ? '关键节点' :
                           key === 'riskJudgment' ? '风险判断' :
                           key === 'suggestions' ? '建议' :
                           key === 'profileAnalysis' ? '画像分析' :
                           key === 'contentAnalysis' ? '内容分析' :
                           key === 'behaviorAnalysis' ? '行为分析' :
                           key === 'influenceAnalysis' ? '影响分析' :
                           key === 'analysis' ? '分析' : key}:
                        </span>
                        <p className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                          {Array.isArray(value) ? value.join('\n') : String(value)}
                        </p>
                      </div>
                    ))}
                  </div>
                )}
                {resultTab === 'raw' && (
                  <div className="space-y-2">
                    {(result?.raw || []).length > 0 ? (
                      result.raw.map((item: any, index: number) => (
                        <div key={index} className={`p-2 rounded ${isDark ? 'bg-slate-800/50' : 'bg-white'}`}>
                          <div className="flex items-center gap-2 mb-1">
                            {item.type && (
                              <span className={`px-2 py-0.5 rounded text-xs ${
                                isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-50 text-blue-600'
                              }`}>
                                {item.type}
                              </span>
                            )}
                            {item.time && (
                              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                                {item.time}
                              </span>
                            )}
                            {item.date && (
                              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                                {item.date}
                              </span>
                            )}
                          </div>
                          <p className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                            {item.content || item.title || JSON.stringify(item)}
                          </p>
                        </div>
                      ))
                    ) : (
                      <p className={`text-sm text-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                        无原始数据
                      </p>
                    )}
                  </div>
                )}
              </div>
            </>
          ) : (
            <div className="text-center py-12">
              <Sparkles className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-slate-600' : 'text-gray-300'}`} />
              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                {isRunning ? '分析中...' : '点击下方按钮开始分析'}
              </p>
            </div>
          )}
        </div>
      </div>

      {/* 底部操作区 */}
      <div className={`rounded-xl border p-4 ${
        isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
      }`}>
        <div className="flex items-center justify-between">
          <button
            onClick={handleReset}
            disabled={isRunning}
            className={`px-6 py-2.5 rounded-lg font-medium flex items-center gap-2 transition-colors ${
              isRunning
                ? isDark
                  ? 'bg-slate-800 text-slate-600 cursor-not-allowed'
                  : 'bg-gray-50 text-gray-400 cursor-not-allowed'
                : isDark
                  ? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`}
          >
            <RotateCcw className="w-4 h-4" />
            重置
          </button>
          <button
            onClick={handleRun}
            disabled={isRunning || !formData.mainInput && !formData.eventName && !formData.accountId && !formData.link && !formData.topicName}
            className={`px-8 py-2.5 rounded-lg font-medium flex items-center gap-2 transition-all ${
              isRunning
                ? isDark
                  ? 'bg-blue-500/20 text-blue-400 cursor-wait'
                  : 'bg-red-50 text-red-400 cursor-wait'
                : formData.mainInput || formData.eventName || formData.accountId || formData.link || formData.topicName
                  ? isDark
                    ? 'bg-blue-600 text-white hover:bg-blue-500 shadow-lg shadow-blue-500/25'
                    : 'bg-red-500 text-white hover:bg-red-600 shadow-lg shadow-red-500/25'
                  : isDark
                    ? 'bg-slate-700 text-slate-500 cursor-not-allowed'
                    : 'bg-gray-200 text-gray-400 cursor-not-allowed'
            }`}
          >
            {isRunning ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                分析中...
              </>
            ) : (
              <>
                <PlayCircle className="w-4 h-4" />
                开始分析
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
};

export default LightAppRun;