import { useState, useRef, useMemo } from 'react';
import { Template } from '../../store/types';
import { useI18n } from '../../hooks/useI18n';
import './index.css';

interface TemplateCardProps {
  template: Template;
  onClick: (template: Template) => void;
}

export default function TemplateCard({ template, onClick }: TemplateCardProps) {
  const { t } = useI18n();
  const [splitPosition, setSplitPosition] = useState(50); // 分割线位置百分比
  const [isDragging, setIsDragging] = useState(false);
  const [containerInfo, setContainerInfo] = useState<any>(null);
  const containerRef = useRef<any>(null);
  const containerId = `container-${template.code}`; // 为每个容器创建唯一ID

  // 检测output是否为视频
  const isOutputVideo = useMemo(() => {
    return /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(template.outputExampleUrl || '');
  }, [template.outputExampleUrl]);

  // 检测input是否为视频
  const isInputVideo = useMemo(() => {
    return /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(template.inputExampleUrl || ``);
  }, [template.inputExampleUrl]);

  const handleClick = () => {
    if (!isDragging) {
      onClick(template);
    }
  };

  // 获取容器信息
  const getContainerInfo = () => {
    return new Promise(resolve => {
      const element = document.getElementById(containerId);
      if (element) {
        const rect = element.getBoundingClientRect();
        setContainerInfo(rect);
        resolve(rect);
      }
    });
  };

  // 处理触摸开始
  const handleTouchStart = async (e: any) => {
    e.stopPropagation();
    setIsDragging(true);
    // 获取容器信息用于后续计算
    await getContainerInfo();
  };

  // 处理触摸移动 - 优化：添加节流，减少计算频率
  const handleTouchMove = (e: any) => {
    if (!isDragging || !containerInfo) return;
    e.stopPropagation();

    const touch = e.touches[0];
    if (!touch) return;

    // 使用requestAnimationFrame节流，提升性能
    requestAnimationFrame(() => {
      // 计算触摸点相对于容器的位置
      const touchX = touch.clientX - containerInfo.left;
      const percentage = Math.max(10, Math.min(90, (touchX / containerInfo.width) * 100));

      setSplitPosition(percentage);
    });
  };

  // 处理触摸结束
  const handleTouchEnd = (e: any) => {
    e.stopPropagation();
    setTimeout(() => setIsDragging(false), 100); // 延迟重置，避免触发点击
  };

  return (
    <div className="template-card" onClick={handleClick}>
      {/* 根据output类型显示不同的内容 */}
      {isOutputVideo ? (
        // 当output是视频时，只显示单个视频
        <div className="single-video-container">
          <img className="video-poster" src={template.inputExampleUrl || ``} alt="poster" />
          <video className="single-video" src={template.outputExampleUrl || ``} autoPlay muted loop style={{ objectFit: 'cover' }} controls={false} />
          {/* 模板名称悬浮 - 视频底部 */}
          <div className="name-overlay">
            <span className="name-badge">✨{template.name}</span>
          </div>
        </div>
      ) : (
        // 原有的图片对比逻辑
        <div className="image-comparison">
          <div id={containerId} className="merged-image-container" ref={containerRef} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
            {/* 原图层 - 完整图片/视频 */}
            <div className="image-layer">
              {isInputVideo ? (
                <video
                  className="full-video"
                  src={template.inputExampleUrl || ``}
                  autoPlay
                  muted
                  loop
                  style={{ objectFit: 'cover' }}
                  controls={false}
                />
              ) : (
                <img className="full-image" src={template.inputExampleUrl || ``} alt="input" loading="lazy" />
              )}
            </div>

            {/* 效果图层 - 完整图片，通过遮罩显示右半部分 */}
            <div
              className="image-layer overlay-layer"
              style={{
                clipPath: `polygon(${splitPosition}% 0%, 100% 0%, 100% 100%, ${splitPosition}% 100%)`,
              }}
            >
              <img className="full-image" src={template.outputExampleUrl || ``} alt="output" loading="lazy" />
            </div>

            {/* 可拖拽的分割线 */}
            <div
              className="split-line"
              style={{ left: `${splitPosition}%` }}
              onTouchStart={handleTouchStart}
              onTouchMove={handleTouchMove}
              onTouchEnd={handleTouchEnd}
            >
              <div className="split-handle">
                <span className="split-icon">⟷</span>
              </div>
            </div>

            {/* 模板名称悬浮 - 图片底部 */}
            <div className="name-overlay">
              <span className="name-badge">✨{template.name}</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
