/**
 * 步骤3: AI 分析 — AI Cinema Studio Redesign
 * 神经网络可视化 + 进度大数字 + 逐项 stagger 动画
 */
import React, { useState, useEffect, memo } from 'react';
import { useStoryFab } from '../context';
import { visionService } from '../../../core/services/ai/visionService';
import { notify } from '@/shared';
import { logger } from '../../../shared/utils/logging';
import { useTimeout } from '../../../hooks/useTimeout';
import { formatTime } from '../../../shared/utils/formatting';
import type { AIAnalyzeProps, Scene } from '@/core/types';
import styles from './AIVisualizer.module.css';
import { Highlights } from './Highlights';

// 分析任务配置
interface AnalysisTask {
  key: string;
  label: string;
  icon: React.ReactNode;
  desc: string;
}

const ANALYSIS_TASKS: AnalysisTask[] = [
  {
    key: 'scene',
    label: '场景识别',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.configCardIconSvg}>
        <circle cx="12" cy="12" r="3" />
        <path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83" />
      </svg>
    ),
    desc: '自动识别视频中的不同场景',
  },
  {
    key: 'ocr',
    label: 'OCR 文字识别',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.configCardIconSvg}>
        <path d="M4 7V4h16v3M9 20h6M12 4v16" />
      </svg>
    ),
    desc: '提取视频中的文字内容（即将上线）',
  },
  {
    key: 'asr',
    label: '语音转写',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.configCardIconSvg}>
        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
        <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" />
      </svg>
    ),
    desc: '将语音转换为文字',
  },
  {
    key: 'emotion',
    label: '情感分析',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.configCardIconSvg}>
        <circle cx="12" cy="12" r="10" />
        <path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" />
      </svg>
    ),
    desc: '分析视频的情感倾向',
  },
  {
    key: 'summary',
    label: '内容摘要',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.configCardIconSvg}>
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
        <polyline points="14,2 14,8 20,8" />
        <line x1="16" y1="13" x2="8" y2="13" />
        <line x1="16" y1="17" x2="8" y2="17" />
        <polyline points="10,9 9,9 8,9" />
      </svg>
    ),
    desc: '生成视频内容摘要',
  },
];

// 任务图标映射
const TASK_ICONS: Record<string, React.ReactNode> = {
  scene: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.taskIconSvg}>
      <circle cx="12" cy="12" r="3" />
      <path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4" />
    </svg>
  ),
  ocr: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.taskIconSvg}>
      <path d="M4 7V4h16v3M9 20h6M12 4v16" />
    </svg>
  ),
  asr: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.taskIconSvg}>
      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
    </svg>
  ),
  emotion: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.taskIconSvg}>
      <circle cx="12" cy="12" r="10" />
      <path d="M8 14s1.5 2 4 2 4-2 4-2" />
    </svg>
  ),
  summary: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={styles.taskIconSvg}>
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
      <polyline points="14,2 14,8 20,8" />
    </svg>
  ),
};

// 检查图标
const CheckIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className={styles.checkIcon}>
    <polyline points="20,6 9,17 4,12" />
  </svg>
);

const AIAnalyze: React.FC<AIAnalyzeProps> = memo(({ onNext }) => {
  const { state, setAnalysis, goToNextStep, dispatch } = useStoryFab();
  const timeout = useTimeout();

  const [analyzing, setAnalyzing] = useState(false);
  const [progress, setProgress] = useState(0);
  const [currentTaskKey, setCurrentTaskKey] = useState('');
  const [completedTasks, setCompletedTasks] = useState<string[]>([]);
  const [visibleTasks, setVisibleTasks] = useState<string[]>([]);

  // 配置
  const [config, setConfig] = useState({
    sceneDetection: true,
    objectDetection: true,
    emotionAnalysis: true,
    ocrEnabled: true,
    asrEnabled: true,
  });

  const selectedCount = Object.values(config).filter(Boolean).length;

  // 任务可见性动画
  useEffect(() => {
    if (analyzing) {
      ANALYSIS_TASKS.forEach((task) => {
        timeout.set(() => {
          setVisibleTasks(prev => [...prev, task.key]);
        }, 100 + ANALYSIS_TASKS.findIndex(t => t.key === task.key) * 150);
      });
    } else {
      setVisibleTasks([]);
    }
  }, [analyzing, timeout]);

  // 切换配置
  const toggleConfig = (key: string) => {
    setConfig(prev => ({ ...prev, [key]: !prev[key as keyof typeof prev] }));
  };

  // 执行分析
  const runAnalysis = async () => {
    if (!state.currentVideo) {
      notify.warning('请先上传视频');
      return;
    }

    setAnalyzing(true);
    setProgress(0);
    setCompletedTasks([]);
    setVisibleTasks([]);
    setCurrentTaskKey('');

    const tasks = [
      config.sceneDetection && 'scene',
      config.objectDetection && 'object',
      config.emotionAnalysis && 'emotion',
      config.ocrEnabled && 'ocr',
      config.asrEnabled && 'asr',
    ].filter(Boolean) as string[];

    const totalTasks = tasks.length;
    let completedCount = 0;

    try {
      // 场景检测
      if (config.sceneDetection) {
        setCurrentTaskKey('scene');
        timeout.set(() => setVisibleTasks(prev => [...prev, 'scene']), 100);

        try {
          const { scenes, objects, emotions } = await visionService.detectScenesAdvanced(
            state.currentVideo,
            { minSceneDuration: 3, threshold: 0.3, detectObjects: config.objectDetection, detectEmotions: config.emotionAnalysis }
          );
          const emotionStrings = emotions?.map((e: { dominant?: string; emotion?: string }) => e.dominant || e.emotion || 'neutral') || [];
          setAnalysis({
            id: `analysis_${Date.now()}`,
            videoId: state.currentVideo.id,
            scenes,
            keyframes: [],
            objects,
            emotions: emotionStrings,
            summary: `检测到 ${scenes.length} 个场景`,
            stats: {
              sceneCount: scenes.length,
              objectCount: objects?.length || 0,
              avgSceneDuration: state.currentVideo.duration / scenes.length,
              sceneTypes: {},
              objectCategories: {},
              dominantEmotions: {},
            },
            createdAt: new Date().toISOString(),
          });
        } catch {
          notify.warning('场景检测功能待实现');
        }

        completedCount++;
        setCompletedTasks(prev => [...prev, 'scene']);
        setProgress(Math.round((completedCount / totalTasks) * 100));
        await timeout.delay(600);
      }

      // 物体识别
      if (config.objectDetection) {
        setCurrentTaskKey('object');
        timeout.set(() => setVisibleTasks(prev => [...prev, 'object']), 100);
        await timeout.delay(800);
        completedCount++;
        setCompletedTasks(prev => [...prev, 'object']);
        setProgress(Math.round((completedCount / totalTasks) * 100));
      }

      // 情感分析
      if (config.emotionAnalysis) {
        setCurrentTaskKey('emotion');
        timeout.set(() => setVisibleTasks(prev => [...prev, 'emotion']), 100);
        await timeout.delay(700);
        completedCount++;
        setCompletedTasks(prev => [...prev, 'emotion']);
        setProgress(Math.round((completedCount / totalTasks) * 100));
      }

      // OCR — stub: 功能即将上线（依赖 Rust OCR 后端）
      if (config.ocrEnabled) {
        setCurrentTaskKey('ocr');
        timeout.set(() => setVisibleTasks(prev => [...prev, 'ocr']), 100);
        // 占位：OCR 后端尚未实现，跳过真实识别
        await timeout.delay(500);
        setCompletedTasks(prev => [...prev, 'ocr']);
        completedCount++;
        setProgress(Math.round((completedCount / totalTasks) * 100));
      }

      // ASR
      if (config.asrEnabled) {
        setCurrentTaskKey('asr');
        timeout.set(() => setVisibleTasks(prev => [...prev, 'asr']), 100);
        try {
          const { asrService } = await import('../../../core/services/asr/asrService');
          const asrResult = await asrService.recognizeSpeech(state.currentVideo, { language: 'zh_cn' });
          if (asrResult && asrResult.text) {
            setCompletedTasks(prev => [...prev, 'asr_done']);
          }
        } catch (asrError) {
          logger.error('ASR failed', { error: asrError });
        }
        completedCount++;
        setCompletedTasks(prev => [...prev, 'asr']);
        setProgress(Math.round((completedCount / totalTasks) * 100));
        await timeout.delay(500);
      }

      setCurrentTaskKey('');
      setProgress(100);
      dispatch({ type: 'SET_STEP_COMPLETE', payload: { step: 'ai-analyze', complete: true } });
      notify.success('AI 分析完成！');

      timeout.set(() => {
        if (onNext) onNext();
        else goToNextStep();
      }, 800);

    } catch (error) {
      logger.error('分析失败:', { error });
      notify.error(error, '分析过程出错，请重试');
    } finally {
      setAnalyzing(false);
    }
  };

  // 重新分析
  const handleReAnalyze = () => {
    setProgress(0);
    setCompletedTasks([]);
    setVisibleTasks([]);
    setCurrentTaskKey('');
    runAnalysis();
  };

  const hasAnalysis = state.analysis && state.stepStatus['ai-analyze'];

  // === 无视频状态 ===
  if (!state.currentVideo) {
    return (
      <div className={styles.stepContent}>
        <div className={styles.stepTitle}>
          <h2>AI 智能分析</h2>
          <p>请先上传视频，再进行 AI 分析</p>
        </div>
        <div className={styles.noVideoWarning}>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" >
            <circle cx="12" cy="12" r="10" />
            <line x1="12" y1="8" x2="12" y2="12" />
            <line x1="12" y1="16" x2="12.01" y2="16" />
          </svg>
          <p style={{ margin: 0 }}>请先上传视频，再进行 AI 分析</p>
        </div>
      </div>
    );
  }

  // === 已完成分析 ===
  if (hasAnalysis) {
    return (
      <div className={styles.stepContent}>
        <div className={styles.stepTitle}>
          <h2>AI 分析结果</h2>
          <p>分析已完成，您可以查看结果或重新分析</p>
        </div>

        <div className={styles.completionCard}>
          <div className={styles.completionHeader}>
            <div className={styles.completionBadge}>
              <svg className={styles.completionBadgeSvg} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                <polyline points="20,6 9,17 4,12" />
              </svg>
            </div>
            <div>
              <h3 className={styles.completionTitle}>分析完成</h3>
              <p className={styles.completionSubtitle}>视频内容已全面分析，您可以继续下一步</p>
            </div>
          </div>

          <div className={styles.resultGrid}>
            <div className={styles.resultItem}>
              <div className={styles.resultValue}>{state.analysis?.scenes?.length || 0}</div>
              <div className={styles.resultLabel}>场景数</div>
            </div>
            <div className={styles.resultItem}>
              <div className={styles.resultValue}>{state.analysis?.stats?.objectCount || 0}</div>
              <div className={styles.resultLabel}>识别物体</div>
            </div>
            <div className={styles.resultItem}>
              <div className={styles.resultValue}>{(state.subtitleData.ocr?.length || 0) + (state.subtitleData.asr?.length || 0)}</div>
              <div className={styles.resultLabel}>字幕条目</div>
            </div>
          </div>

          <div className={styles.sceneSection}>
            <h4 className={styles.sceneSectionTitle}>
              <svg className={styles.sceneSectionIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18" />
                <line x1="7" y1="2" x2="7" y2="22" />
                <line x1="17" y1="2" x2="17" y2="22" />
                <line x1="2" y1="12" x2="22" y2="12" />
              </svg>
              场景列表
            </h4>
            <ul className={styles.sceneList}>
              {(state.analysis?.scenes || []).slice(0, 5).map((scene: Scene, i: number) => (
                <li key={`scene_${scene.startTime}_${i}`} className={styles.sceneItem}>
                  <span className={styles.sceneTime}>{formatTime(scene.startTime)}</span>
                  <span className={styles.sceneDesc}>{scene.description || scene.type}</span>
                  <span className={styles.sceneTag}>{scene.type}</span>
                </li>
              ))}
              {(state.analysis?.scenes?.length || 0) > 5 && (
                <li className={styles.sceneMore}>还有 {(state.analysis?.scenes?.length || 0) - 5} 个场景...</li>
              )}
            </ul>
          </div>

          {/* 高光时刻 — Rust highlight_detector.rs */}
          {state.currentVideo && (
            <div style={{ marginTop: 16 }}>
              <Highlights videoInfo={state.currentVideo} />
            </div>
          )}

          <div className={styles.actionBar}>
            <button className={`${styles.actionBtn} ${styles.actionBtnSecondary}`} onClick={handleReAnalyze}>
              <svg className={styles.actionBtnSvg} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M23 4v6h-6M1 20v-6h6" />
                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
              </svg>
              重新分析
            </button>
            <button className={`${styles.actionBtn} ${styles.actionBtnPrimary}`} onClick={goToNextStep}>
              下一步：生成文案
              <svg className={styles.actionBtnSvg} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M12 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    );
  }

  // === 分析中状态 ===
  if (analyzing) {
    const isComplete = progress === 100;

    return (
      <div className={styles.stepContent}>
        <div className={styles.stepTitle}>
          <h2>AI 智能分析</h2>
          <p>正在分析视频内容，请稍候...</p>
        </div>

        <div className={styles.analyzingCard}>
          <div className={styles.neuralViz}>
            {/* SVG 神经网络连接线 */}
            <svg className={styles.neuralLines} viewBox="0 0 280 120" preserveAspectRatio="none">
              <line x1="14" y1="60" x2="45" y2="24" className={`${styles.neuralLine} ${completedTasks.includes('scene') ? styles.completed : ''}`} />
              <line x1="14" y1="60" x2="45" y2="96" className={`${styles.neuralLine} ${completedTasks.includes('scene') ? styles.completed : ''}`} />
              <line x1="45" y1="24" x2="112" y2="36" className={`${styles.neuralLine} ${completedTasks.includes('scene') ? styles.completed : ''}`} />
              <line x1="45" y1="96" x2="112" y2="84" className={`${styles.neuralLine} ${completedTasks.includes('scene') ? styles.completed : ''}`} />
              <line x1="45" y1="24" x2="112" y2="84" className={`${styles.neuralLine} ${completedTasks.includes('emotion') ? styles.completed : ''}`} />
              <line x1="45" y1="96" x2="112" y2="36" className={`${styles.neuralLine} ${completedTasks.includes('emotion') ? styles.completed : ''}`} />
              <line x1="112" y1="36" x2="179" y2="18" className={`${styles.neuralLine} ${completedTasks.includes('emotion') ? styles.completed : ''}`} />
              <line x1="112" y1="84" x2="179" y2="60" className={`${styles.neuralLine} ${completedTasks.includes('emotion') ? styles.completed : ''}`} />
              <line x1="112" y1="36" x2="179" y2="102" className={`${styles.neuralLine} ${completedTasks.includes('ocr') ? styles.completed : ''}`} />
              <line x1="112" y1="84" x2="179" y2="102" className={`${styles.neuralLine} ${completedTasks.includes('ocr') ? styles.completed : ''}`} />
              <line x1="179" y1="18" x2="246" y2="42" className={`${styles.neuralLine} ${completedTasks.includes('ocr') ? styles.completed : ''}`} />
              <line x1="179" y1="60" x2="246" y2="78" className={`${styles.neuralLine} ${completedTasks.includes('ocr') ? styles.completed : ''}`} />
              <line x1="179" y1="102" x2="246" y2="78" className={`${styles.neuralLine} ${completedTasks.includes('asr') ? styles.completed : ''}`} />
            </svg>

            {/* 神经网络节点 */}
            <div className={styles.neuralNode} style={{ left: '0%', top: '50%' }} />
            <div className={`${styles.neuralNode} ${completedTasks.includes('scene') ? styles.completed : ''}`} style={{ left: '16%', top: '20%' }} />
            <div className={`${styles.neuralNode} ${completedTasks.includes('scene') ? styles.completed : ''}`} style={{ left: '16%', top: '80%' }} />
            <div className={`${styles.neuralNode} ${completedTasks.includes('emotion') || completedTasks.includes('object') ? styles.completed : ''}`} style={{ left: '40%', top: '30%' }} />
            <div className={`${styles.neuralNode} ${completedTasks.includes('emotion') || completedTasks.includes('object') ? styles.completed : ''}`} style={{ left: '40%', top: '70%' }} />
            <div className={`${styles.neuralNode} ${completedTasks.includes('ocr') ? styles.completed : ''}`} style={{ left: '64%', top: '15%' }} />
            <div className={`${styles.neuralNode} ${completedTasks.includes('ocr') || completedTasks.includes('emotion') ? styles.completed : ''}`} style={{ left: '64%', top: '50%' }} />
            <div className={`${styles.neuralNode} ${completedTasks.includes('ocr') || completedTasks.includes('emotion') ? styles.completed : ''}`} style={{ left: '64%', top: '85%' }} />
            <div className={`${styles.neuralNode} ${completedTasks.includes('asr') ? styles.completed : ''}`} style={{ left: '88%', top: '35%' }} />
            <div className={`${styles.neuralNode} ${completedTasks.includes('asr') || completedTasks.includes('ocr') ? styles.completed : ''}`} style={{ left: '88%', top: '65%' }} />

            {/* 活跃节点脉冲环 */}
            {!isComplete && currentTaskKey && (
              <div className={styles.pulseRing} />
            )}
          </div>

          {/* 进度数字 */}
          <div className={`${styles.progressNumber} ${isComplete ? styles.completed : ''}`}>
            {progress}%
          </div>
          <div className={styles.progressLabel}>
            {isComplete ? '分析完成' : '正在分析...'}
          </div>

          {/* 任务列表 */}
          <ul className={styles.taskList}>
            {ANALYSIS_TASKS.map((task) => {
              const isCompleted = completedTasks.includes(task.key);
              const isActive = currentTaskKey === task.key && !isCompleted;
              const isVisible = visibleTasks.includes(task.key);

              return (
                <li
                  key={task.key}
                  className={`
                    ${styles.taskItem}
                    ${isVisible ? styles.visible : ''}
                    ${isActive ? styles.active : ''}
                    ${isCompleted ? styles.completed : ''}
                  `}
                >
                  <span className={styles.taskIcon}>
                    {isCompleted ? <CheckIcon /> : TASK_ICONS[task.key]}
                  </span>
                  <span className={styles.taskLabel}>
                    {task.label}
                    {isCompleted && ' ✓'}
                  </span>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }

  // === 未分析状态（配置页面）===
  return (
    <div className={styles.stepContent}>
      <div className={styles.stepTitle}>
        <h2>AI 智能分析</h2>
        <p>选择要开启的分析功能，AI 将自动识别视频内容</p>
      </div>

      {/* 视频信息条 */}
      <div className={styles.videoInfoStrip}>
        <div className={styles.videoInfoDot} />
        <span className={styles.videoInfoName}>{state.currentVideo?.name}</span>
        <div className={styles.videoInfoMeta}>
          <span className={styles.videoInfoTag}>{Math.floor(state.currentVideo?.duration || 0)}秒</span>
          <span className={styles.videoInfoTag}>{state.currentVideo?.width}×{state.currentVideo?.height}</span>
        </div>
      </div>

      {/* 分析配置 */}
      <div className={styles.configSection}>
        <div className={styles.configGrid}>
          {ANALYSIS_TASKS.map((task) => {
            const isActive = config[task.key as keyof typeof config];
            return (
              <div
                key={task.key}
                className={`${styles.configCard} ${isActive ? styles.active : ''}`}
                onClick={() => toggleConfig(task.key)}
                role="checkbox"
                aria-checked={isActive}
                tabIndex={0}
                onKeyDown={(e) => e.key === 'Enter' && toggleConfig(task.key)}
              >
                <div className={styles.configCardCheckbox}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className={styles.configCardCheckmark}>
                    <polyline points="20,6 9,17 4,12" />
                  </svg>
                </div>
                <div className={styles.configCardIcon}>{task.icon}</div>
                <div className={styles.configCardInfo}>
                  <div className={styles.configCardName}>{task.label}</div>
                  <div className={styles.configCardDesc}>{task.desc}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* 开始分析按钮 */}
      <div className={styles.startSection}>
        <button
          className={styles.startButton}
          onClick={runAnalysis}
          disabled={selectedCount === 0}
        >
          <svg className={styles.startButtonSvg} viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
          </svg>
          开始 AI 分析
        </button>
        <div className={styles.taskCount}>已选择 {selectedCount} 项分析任务</div>
      </div>
    </div>
  );
});

AIAnalyze.displayName = 'AIAnalyze';
export default AIAnalyze;