"use client";
import { useEffect, useRef } from "react";
import Reveal from 'reveal.js';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/white.css';
import { marked } from 'marked';

export default function UI({ data, showNavButtons = false }) {
  const deckRef = useRef(null);
  const revealRef = useRef(null);

  useEffect(() => {
    if (!data) return;

    // 配置 marked 解析器
    marked.setOptions({
      breaks: true,
      gfm: true,
      headerIds: false,
      mangle: false,
    });

    // 将 markdown 内容转换为幻灯片
    const slides = parseMarkdownToSlides(data);
    
    // 更新 deck 内容
    if (deckRef.current) {
      deckRef.current.innerHTML = slides;
    }

    // 初始化 Reveal.js
    if (revealRef.current) {
      revealRef.current.destroy();
    }

    revealRef.current = new Reveal(deckRef.current, {
      hash: true,
      transition: 'slide',
      transitionSpeed: 'default',
      backgroundTransition: 'fade',
      controls: true,
      progress: true,
      center: true,
      touch: true,
      loop: false,
      rtl: false,
      navigationMode: 'default',
      shuffle: false,
      fragments: true,
      fragmentInURL: false,
      embedded: false,
      help: true,
      showNotes: false,
      autoPlayMedia: null,
      preloadIframes: null,
      autoSlide: 0,
      autoSlideStoppable: true,
      autoSlideMethod: Reveal.navigateNext,
      defaultTiming: null,
      mouseWheel: false,
      hideInactiveCursor: true,
      hideCursorTime: 5000,
      previewLinks: false,
      postMessage: true,
      postMessageEvents: false,
      focusBodyOnPageVisibilityChange: true,
      viewDistance: 3,
      mobileViewDistance: 2,
      display: 'block',
      hideAnchorsOnUrl: false,
      plugins: []
    });

    revealRef.current.initialize();

    // 清理函数
    return () => {
      if (revealRef.current) {
        revealRef.current.destroy();
      }
    };
  }, [data]);

  // 将数据解析为幻灯片
  const parseMarkdownToSlides = (data) => {
    if (!data) {
      return `<section><h1>演示文稿</h1><p>暂无内容</p></section>`;
    }

    // 如果有 content 字段，直接使用 markdown 内容
    if (data.content) {
      const slideSeparators = /^---$/gm;
      const sections = data.content.split(slideSeparators);
      
      return sections.map((section, index) => {
        const trimmedSection = section.trim();
        if (!trimmedSection) return '';
        
        const htmlContent = marked(trimmedSection);
        
        // 如果是第一个幻灯片且没有标题，添加标题
        if (index === 0 && !htmlContent.includes('<h1>') && data.title) {
          return `<section><h1>${data.title}</h1>${htmlContent}</section>`;
        }
        
        return `<section>${htmlContent}</section>`;
      }).join('');
    }

    // 如果没有 content 字段，使用 items 数据构建幻灯片
    const items = data.items || [];
    if (items.length === 0) {
      // 使用主数据构建单个幻灯片
      return `<section>
        <h1>${data.title || '演示文稿'}</h1>
        ${data.subtitle ? `<p class="lead">${data.subtitle}</p>` : ''}
        ${data.description ? `<div class="mt-4">${marked(data.description)}</div>` : ''}
        ${data.image ? `<img src="${data.image}" alt="${data.title}" style="max-width: 100%; height: auto; margin: 1rem 0;" />` : ''}
      </section>`;
    }

    // 使用 items 构建多个幻灯片
    return items.map((item, index) => {
      const slideContent = [];
      
      // 标题
      if (item.item_title) {
        slideContent.push(`<h1>${item.item_title}</h1>`);
      }
      
      // 副标题
      if (item.item_subtitle) {
        slideContent.push(`<p class="lead">${item.item_subtitle}</p>`);
      }
      
      // 描述
      if (item.item_description) {
        slideContent.push(`<div class="mt-4">${marked(item.item_description)}</div>`);
      }
      
      // 图片
      if (item.item_image) {
        slideContent.push(`<img src="${item.item_image}" alt="${item.item_title || 'Slide'}" style="max-width: 100%; height: auto; margin: 1rem 0;" />`);
      }
      
      // 视频
      if (item.item_video_src) {
        slideContent.push(`<video controls style="max-width: 100%; height: auto; margin: 1rem 0;">
          <source src="${item.item_video_src}" type="video/mp4">
          您的浏览器不支持视频播放。
        </video>`);
      }
      
      // 按钮
      if (item.item_button_text && item.item_button_link) {
        slideContent.push(`<div class="mt-6">
          <a href="${item.item_button_link}" class="btn btn-primary" target="_blank" rel="noopener noreferrer">
            ${item.item_button_text}
          </a>
        </div>`);
      }
      
      return `<section>${slideContent.join('')}</section>`;
    }).join('');
  };

  return (
    <div className="reveal-container" style={{ height: '100vh', width: '100%', position: 'fixed', top: 0, left: 0, zIndex: 1000, background: 'white' }}>
      <style jsx global>{`
        .reveal-container .reveal {
          height: 100% !important;
          width: 100% !important;
        }
        
        .reveal-container .reveal .slides {
          height: 100% !important;
        }
        
        .reveal-container .reveal .slides section {
          height: 100% !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
          align-items: center !important;
          text-align: center !important;
          padding: 2rem !important;
        }
        
        .reveal-container .reveal .slides section h1,
        .reveal-container .reveal .slides section h2,
        .reveal-container .reveal .slides section h3,
        .reveal-container .reveal .slides section h4,
        .reveal-container .reveal .slides section h5,
        .reveal-container .reveal .slides section h6 {
          margin-bottom: 1rem !important;
          color: #333 !important;
        }
        
        .reveal-container .reveal .slides section p {
          margin-bottom: 0.5rem !important;
          line-height: 1.6 !important;
        }
        
        .reveal-container .reveal .slides section ul,
        .reveal-container .reveal .slides section ol {
          text-align: left !important;
          margin: 1rem 0 !important;
        }
        
        .reveal-container .reveal .slides section li {
          margin-bottom: 0.5rem !important;
        }
        
        .reveal-container .reveal .slides section code {
          background: #f4f4f4 !important;
          padding: 0.2rem 0.4rem !important;
          border-radius: 3px !important;
          font-family: 'Courier New', monospace !important;
        }
        
        .reveal-container .reveal .slides section pre {
          background: #f4f4f4 !important;
          padding: 1rem !important;
          border-radius: 5px !important;
          text-align: left !important;
          overflow-x: auto !important;
        }
        
        .reveal-container .reveal .slides section blockquote {
          border-left: 4px solid #ddd !important;
          padding-left: 1rem !important;
          margin: 1rem 0 !important;
          text-align: left !important;
        }
        
        .reveal-container .reveal .slides section table {
          border-collapse: collapse !important;
          width: 100% !important;
          margin: 1rem 0 !important;
        }
        
        .reveal-container .reveal .slides section th,
        .reveal-container .reveal .slides section td {
          border: 1px solid #ddd !important;
          padding: 0.5rem !important;
          text-align: left !important;
        }
        
        .reveal-container .reveal .slides section th {
          background: #f4f4f4 !important;
        }
        
        .reveal-container .reveal .slides section img {
          max-width: 100% !important;
          height: auto !important;
          margin: 1rem 0 !important;
        }
        
        .reveal-container .reveal .slides section .btn {
          display: inline-block !important;
          padding: 0.5rem 1rem !important;
          background: #007bff !important;
          color: white !important;
          text-decoration: none !important;
          border-radius: 0.25rem !important;
          margin: 0.5rem !important;
        }
        
        .reveal-container .reveal .slides section .btn:hover {
          background: #0056b3 !important;
        }
      `}</style>
      <div 
        ref={deckRef} 
        className="reveal"
        style={{ height: '100%', width: '100%' }}
      >
        {/* 初始内容，会被 JavaScript 替换 */}
        <section>
          <h1>{data?.title || '演示文稿'}</h1>
          <p>正在加载内容...</p>
        </section>
      </div>
    </div>
  );
}