/**
 * ClassroomPreviewer - 课堂预览器组件
 *
 * 预览 classroom-generator Pipeline 生成的课堂内容：
 * - 幻灯片导航
 * - 大纲视图
 * - 场景切换
 * - 全屏播放模式
 * - AI 教师讲解展示
 */

import { useState, useCallback, useEffect } from 'react';
import {
  ChevronLeft,
  ChevronRight,
  Play,
  Pause,
  Maximize,
  Minimize,
  List,
  Grid,
  Volume2,
  VolumeX,
  Download,
  Share2,
} from 'lucide-react';
import { useToast } from './ui/Toast';

// === Types ===

export interface ClassroomScene {
  id: string;
  title: string;
  type: 'title' | 'content' | 'quiz' | 'summary' | 'interactive';
  content: {
    heading?: string;
    bullets?: string[];
    image?: string;
    explanation?: string;
    quiz?: {
      question: string;
      options: string[];
      answer: number;
    };
  };
  narration?: string;
  duration?: number; // seconds
}

export interface ClassroomData {
  id: string;
  title: string;
  subject: string;
  difficulty: '初级' | '中级' | '高级';
  duration: number; // minutes
  scenes: ClassroomScene[];
  outline: {
    sections: {
      title: string;
      scenes: string[];
    }[];
  };
  createdAt: string;
}

interface ClassroomPreviewerProps {
  data: ClassroomData;
  onClose?: () => void;
  onExport?: (format: 'pptx' | 'html' | 'pdf') => void;
  onOpenFullPlayer?: () => void;
}

// === Sub-Components ===

interface SceneRendererProps {
  scene: ClassroomScene;
  isPlaying: boolean;
  showNarration: boolean;
}

function SceneRenderer({ scene, showNarration }: SceneRendererProps) {
  const renderContent = () => {
    switch (scene.type) {
      case 'title':
        return (
          <div className="flex flex-col items-center justify-center h-full text-center p-8">
            <h1 className="text-4xl font-bold text-white mb-4">
              {scene.content.heading || scene.title}
            </h1>
            {scene.content.bullets && (
              <p className="text-xl text-white/80">
                {scene.content.bullets[0]}
              </p>
            )}
          </div>
        );

      case 'content':
        return (
          <div className="p-8">
            <h2 className="text-3xl font-bold text-white mb-6">
              {scene.content.heading || scene.title}
            </h2>
            {scene.content.bullets && (
              <ul className="space-y-4">
                {scene.content.bullets.map((bullet, index) => (
                  <li
                    key={index}
                    className="flex items-start gap-3 text-lg text-white/90"
                  >
                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-sm font-medium">
                      {index + 1}
                    </span>
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            )}
            {scene.content.image && (
              <div className="mt-6">
                <img
                  src={scene.content.image}
                  alt={scene.title}
                  className="max-h-48 rounded-lg shadow-lg"
                />
              </div>
            )}
          </div>
        );

      case 'quiz':
        return (
          <div className="p-8">
            <h2 className="text-2xl font-bold text-white mb-6">
              📝 小测验
            </h2>
            {scene.content.quiz && (
              <div className="space-y-4">
                <p className="text-xl text-white">
                  {scene.content.quiz.question}
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4">
                  {scene.content.quiz.options.map((option, index) => (
                    <button
                      key={index}
                      className="p-4 bg-white/10 hover:bg-white/20 rounded-lg text-left text-white transition-colors"
                    >
                      <span className="font-medium mr-2">
                        {String.fromCharCode(65 + index)}.
                      </span>
                      {option}
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
        );

      case 'summary':
        return (
          <div className="p-8">
            <h2 className="text-3xl font-bold text-white mb-6">
              📋 总结
            </h2>
            {scene.content.bullets && (
              <ul className="space-y-3">
                {scene.content.bullets.map((bullet, index) => (
                  <li
                    key={index}
                    className="flex items-center gap-2 text-lg text-white/90"
                  >
                    <span className="text-green-400">✓</span>
                    {bullet}
                  </li>
                ))}
              </ul>
            )}
          </div>
        );

      default:
        return (
          <div className="p-8">
            <h2 className="text-2xl font-bold text-white">
              {scene.title}
            </h2>
            <p className="text-white/80 mt-4">{scene.content.explanation}</p>
          </div>
        );
    }
  };

  return (
    <div className="relative h-full bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-700">
      {/* Scene Content */}
      <div className="h-full overflow-auto">
        {renderContent()}
      </div>

      {/* Narration Overlay */}
      {showNarration && scene.narration && (
        <div className="absolute bottom-0 left-0 right-0 bg-black/70 p-4">
          <div className="flex items-start gap-3">
            <div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
              <Volume2 className="w-5 h-5 text-white" />
            </div>
            <p className="text-white/90 text-sm leading-relaxed">
              {scene.narration}
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

interface OutlinePanelProps {
  outline: ClassroomData['outline'];
  scenes: ClassroomScene[];
  currentIndex: number;
  onSelectScene: (index: number) => void;
}

function OutlinePanel({
  outline,
  scenes,
  currentIndex,
  onSelectScene,
}: OutlinePanelProps) {
  return (
    <div className="h-full overflow-auto bg-gray-50 dark:bg-gray-800 p-4">
      <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
        课程大纲
      </h3>
      <div className="space-y-2">
        {outline.sections.map((section, sectionIndex) => (
          <div key={sectionIndex}>
            <p className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
              {section.title}
            </p>
            <div className="space-y-1">
              {section.scenes.map((sceneId) => {
                const globalIndex = scenes.findIndex(s => s.id === sceneId);
                const isActive = globalIndex === currentIndex;
                const scene = scenes.find(s => s.id === sceneId);

                return (
                  <button
                    key={sceneId}
                    onClick={() => onSelectScene(globalIndex)}
                    className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors ${
                      isActive
                        ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
                        : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300'
                    }`}
                  >
                    <span className="truncate">{scene?.title || sceneId}</span>
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// === Main Component ===

export function ClassroomPreviewer({
  data,
  onExport,
  onOpenFullPlayer,
}: ClassroomPreviewerProps) {
  const [currentSceneIndex, setCurrentSceneIndex] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const [showNarration, setShowNarration] = useState(true);
  const [showOutline, setShowOutline] = useState(true);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [viewMode, setViewMode] = useState<'slides' | 'grid'>('slides');

  const { toast } = useToast();
  const currentScene = data.scenes[currentSceneIndex];
  const totalScenes = data.scenes.length;

  // Navigation
  const goToScene = useCallback((index: number) => {
    if (index >= 0 && index < totalScenes) {
      setCurrentSceneIndex(index);
    }
  }, [totalScenes]);

  const nextScene = useCallback(() => {
    goToScene(currentSceneIndex + 1);
  }, [currentSceneIndex, goToScene]);

  const prevScene = useCallback(() => {
    goToScene(currentSceneIndex - 1);
  }, [currentSceneIndex, goToScene]);

  // Auto-play
  useEffect(() => {
    if (!isPlaying) return;

    const duration = currentScene?.duration ? currentScene.duration * 1000 : 5000;
    const timer = setTimeout(() => {
      if (currentSceneIndex < totalScenes - 1) {
        nextScene();
      } else {
        setIsPlaying(false);
        toast('课堂播放完成', 'success');
      }
    }, duration);

    return () => clearTimeout(timer);
  }, [isPlaying, currentSceneIndex, currentScene, totalScenes, nextScene, toast]);

  // Keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      switch (e.key) {
        case 'ArrowRight':
        case ' ':
          e.preventDefault();
          nextScene();
          break;
        case 'ArrowLeft':
          e.preventDefault();
          prevScene();
          break;
        case 'Escape':
          if (isFullscreen) {
            setIsFullscreen(false);
          }
          break;
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [nextScene, prevScene, isFullscreen]);

  // Fullscreen toggle
  const toggleFullscreen = () => {
    setIsFullscreen(!isFullscreen);
  };

  // Export handler
  const handleExport = (format: 'pptx' | 'html' | 'pdf') => {
    if (onExport) {
      onExport(format);
      return;
    }

    // Default export implementation
    toast(`正在导出 ${format.toUpperCase()} 格式...`, 'info');

    setTimeout(() => {
      try {
        if (format === 'html') {
          const htmlContent = generateClassroomHTML(data);
          downloadFile(htmlContent, `${data.title}.html`, 'text/html');
          toast('HTML 导出成功', 'success');
        } else if (format === 'pptx') {
          // Export as JSON for conversion
          const pptxData = JSON.stringify(data, null, 2);
          downloadFile(pptxData, `${data.title}.slides.json`, 'application/json');
          toast('幻灯片数据已导出（JSON格式）', 'success');
        } else if (format === 'pdf') {
          const htmlContent = generatePrintableHTML(data);
          const printWindow = window.open('', '_blank');
          if (printWindow) {
            printWindow.document.write(htmlContent);
            printWindow.document.close();
            printWindow.print();
            toast('已打开打印预览', 'success');
          }
        }
      } catch (err) {
        const errorMsg = err instanceof Error ? err.message : '导出失败';
        toast(`导出失败: ${errorMsg}`, 'error');
      }
    }, 300);
  };

  return (
    <div className={`bg-white dark:bg-gray-900 rounded-lg shadow-xl overflow-hidden ${
      isFullscreen ? 'fixed inset-0 z-50 rounded-none' : 'max-w-5xl w-full'
    }`}>
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
        <div>
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
            {data.title}
          </h2>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            {data.subject} · {data.difficulty} · {data.duration} 分钟
          </p>
        </div>
        <div className="flex items-center gap-2">
          {onOpenFullPlayer && (
            <button
              onClick={onOpenFullPlayer}
              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-md hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-colors"
            >
              <Play className="w-4 h-4" />
              完整播放器
            </button>
          )}
          <button
            onClick={() => handleExport('pptx')}
            className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-md hover:bg-orange-200 dark:hover:bg-orange-900/50 transition-colors"
          >
            <Download className="w-4 h-4" />
            PPTX
          </button>
          <button
            onClick={() => handleExport('html')}
            className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-md hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"
          >
            <Share2 className="w-4 h-4" />
            HTML
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex h-[500px]">
        {/* Outline Panel */}
        {showOutline && (
          <div className="w-64 border-r border-gray-200 dark:border-gray-700 flex-shrink-0">
            <OutlinePanel
              outline={data.outline}
              scenes={data.scenes}
              currentIndex={currentSceneIndex}
              onSelectScene={goToScene}
            />
          </div>
        )}

        {/* Slide Area */}
        <div className="flex-1 flex flex-col">
          {/* Scene Renderer */}
          <div className="flex-1 relative">
            {viewMode === 'slides' ? (
              <SceneRenderer
                scene={currentScene}
                isPlaying={isPlaying}
                showNarration={showNarration}
              />
            ) : (
              <div className="h-full overflow-auto p-4 bg-gray-100 dark:bg-gray-800">
                <div className="grid grid-cols-3 gap-3">
                  {data.scenes.map((scene, index) => (
                    <button
                      key={scene.id}
                      onClick={() => goToScene(index)}
                      className={`aspect-video rounded-lg overflow-hidden border-2 transition-colors ${
                        index === currentSceneIndex
                          ? 'border-blue-500'
                          : 'border-transparent hover:border-gray-300 dark:hover:border-gray-600'
                      }`}
                    >
                      <div className="h-full bg-gradient-to-br from-blue-600 to-purple-600 p-2">
                        <p className="text-xs text-white font-medium truncate">
                          {scene.title}
                        </p>
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Control Bar */}
          <div className="flex items-center justify-between p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
            {/* Left Controls */}
            <div className="flex items-center gap-2">
              <button
                onClick={() => setShowOutline(!showOutline)}
                className={`p-2 rounded-md transition-colors ${
                  showOutline
                    ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
                    : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300'
                }`}
                title="大纲"
              >
                <List className="w-5 h-5" />
              </button>
              <button
                onClick={() => setViewMode(viewMode === 'slides' ? 'grid' : 'slides')}
                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-gray-600 dark:text-gray-300"
                title={viewMode === 'slides' ? '网格视图' : '幻灯片视图'}
              >
                <Grid className="w-5 h-5" />
              </button>
            </div>

            {/* Center Controls */}
            <div className="flex items-center gap-3">
              <button
                onClick={prevScene}
                disabled={currentSceneIndex === 0}
                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-gray-600 dark:text-gray-300 disabled:opacity-50"
              >
                <ChevronLeft className="w-5 h-5" />
              </button>

              <button
                onClick={() => setIsPlaying(!isPlaying)}
                className="p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-colors"
              >
                {isPlaying ? (
                  <Pause className="w-5 h-5" />
                ) : (
                  <Play className="w-5 h-5" />
                )}
              </button>

              <button
                onClick={nextScene}
                disabled={currentSceneIndex === totalScenes - 1}
                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-gray-600 dark:text-gray-300 disabled:opacity-50"
              >
                <ChevronRight className="w-5 h-5" />
              </button>

              <span className="text-sm text-gray-500 dark:text-gray-400 min-w-[60px] text-center">
                {currentSceneIndex + 1} / {totalScenes}
              </span>
            </div>

            {/* Right Controls */}
            <div className="flex items-center gap-2">
              <button
                onClick={() => setShowNarration(!showNarration)}
                className={`p-2 rounded-md transition-colors ${
                  showNarration
                    ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400'
                    : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300'
                }`}
                title={showNarration ? '隐藏讲解' : '显示讲解'}
              >
                {showNarration ? (
                  <Volume2 className="w-5 h-5" />
                ) : (
                  <VolumeX className="w-5 h-5" />
                )}
              </button>
              <button
                onClick={toggleFullscreen}
                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-gray-600 dark:text-gray-300"
                title={isFullscreen ? '退出全屏' : '全屏'}
              >
                {isFullscreen ? (
                  <Minimize className="w-5 h-5" />
                ) : (
                  <Maximize className="w-5 h-5" />
                )}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ClassroomPreviewer;

// === Helper Functions ===

function downloadFile(content: string, filename: string, mimeType: string) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

function generateClassroomHTML(data: ClassroomData): string {
  const scenesHTML = data.scenes.map((scene, index) => `
    <section class="slide" data-index="${index}">
      <div class="slide-content ${scene.type}">
        <h2>${scene.content.heading || scene.title}</h2>
        ${scene.content.bullets ? `
          <ul>
            ${scene.content.bullets.map((b: string) => `<li>${b}</li>`).join('')}
          </ul>
        ` : ''}
        ${scene.narration ? `<p class="narration">${scene.narration}</p>` : ''}
      </div>
    </section>
  `).join('');

  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${data.title}</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6, #6366f1);
      min-height: 100vh;
      color: white;
    }
    .presentation { max-width: 1200px; margin: 0 auto; padding: 2rem; }
    header { text-align: center; padding: 2rem 0; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 2rem; }
    h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
    .meta { opacity: 0.8; font-size: 0.9rem; }
    .slide {
      background: rgba(255,255,255,0.1);
      border-radius: 1rem;
      padding: 2rem;
      margin-bottom: 1.5rem;
      backdrop-filter: blur(10px);
    }
    .slide h2 { font-size: 1.8rem; margin-bottom: 1rem; }
    .slide ul { list-style: none; padding-left: 1rem; }
    .slide li { margin-bottom: 0.75rem; font-size: 1.1rem; }
    .slide li::before { content: '•'; color: #60a5fa; margin-right: 0.5rem; }
    .narration {
      background: rgba(0,0,0,0.3);
      padding: 1rem;
      border-radius: 0.5rem;
      margin-top: 1rem;
      font-style: italic;
      opacity: 0.9;
    }
    .title .slide-content { text-align: center; min-height: 200px; display: flex; flex-direction: column; justify-content: center; }
    .quiz { background: rgba(34, 197, 94, 0.2); }
    .summary { background: rgba(168, 85, 247, 0.2); }
    footer { text-align: center; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,0.2); margin-top: 2rem; opacity: 0.6; }
  </style>
</head>
<body>
  <div class="presentation">
    <header>
      <h1>${data.title}</h1>
      <p class="meta">${data.subject} · ${data.difficulty} · ${data.duration} 分钟</p>
    </header>
    <main>${scenesHTML}</main>
    <footer><p>由 ZCLAW 课堂生成器创建</p></footer>
  </div>
</body>
</html>`;
}

function generatePrintableHTML(data: ClassroomData): string {
  const scenesHTML = data.scenes.map((scene, index) => `
    <div class="page" style="page-break-after: always;">
      <div class="slide-print">
        <h1 style="font-size: 24pt; margin-bottom: 20pt;">${scene.content.heading || scene.title}</h1>
        ${scene.content.bullets ? `
          <ul style="font-size: 14pt; line-height: 1.8;">
            ${scene.content.bullets.map((b: string) => `<li>${b}</li>`).join('')}
          </ul>
        ` : ''}
        ${scene.narration ? `<p style="background: #f0f0f0; padding: 10pt; margin-top: 20pt; font-style: italic;">${scene.narration}</p>` : ''}
        <p style="position: absolute; bottom: 20pt; right: 20pt; color: #999; font-size: 10pt;">${index + 1} / ${data.scenes.length}</p>
      </div>
    </div>
  `).join('');

  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>${data.title} - 打印版</title>
  <style>
    @media print {
      body { margin: 0; }
      .page { page-break-after: always; }
    }
    body { font-family: 'Microsoft YaHei', sans-serif; }
    .slide-print {
      width: 100%;
      height: 100vh;
      padding: 40pt;
      position: relative;
    }
  </style>
</head>
<body>
  <div class="document">
    <header style="text-align: center; margin-bottom: 30pt;">
      <h1 style="font-size: 32pt;">${data.title}</h1>
      <p style="color: #666;">${data.subject} · ${data.difficulty} · ${data.duration} 分钟</p>
    </header>
    ${scenesHTML}
  </div>
</body>
</html>`;
}