import React from 'react'
import type { TemplateInfo } from '../../hooks/useProgressCommand'

interface TrackSegment {
  id: string
  type: 'video' | 'audio' | 'image' | 'text' | 'effect'
  name: string
  start_time: number
  end_time: number
  duration: number
  resource_path?: string
  properties?: any
  effects?: any[]
}

interface Track {
  id: string
  name: string
  type: 'video' | 'audio' | 'subtitle'
  index: number
  segments: TrackSegment[]
  properties?: any
}

interface TemplateDetail {
  id: string
  name: string
  description: string
  canvas_config: any
  tracks: Track[]
  duration: number
  fps: number
  sample_rate?: number
}

interface TemplateDetailModalProps {
  isOpen: boolean
  template: TemplateInfo | null
  templateDetail: TemplateDetail | null
  loadingDetail: boolean
  onClose: () => void
  onDelete: (templateId: string) => void
  formatDuration: (duration: number) => string
  formatTime: (seconds: number) => string
}

export const TemplateDetailModal: React.FC<TemplateDetailModalProps> = ({
  isOpen,
  template,
  templateDetail,
  loadingDetail,
  onClose,
  onDelete,
  formatDuration,
  formatTime
}) => {
  if (!isOpen || !template) return null

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold text-gray-900">模板详情</h2>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600"
            >
              ×
            </button>
          </div>

          <div className="space-y-4">
            {/* Basic Info */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">名称</label>
              <p className="text-gray-900">{template.name}</p>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">描述</label>
              <p className="text-gray-900">{template.description}</p>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">时长</label>
                <p className="text-gray-900">{formatDuration(template.duration)}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">素材数量</label>
                <p className="text-gray-900">{template.material_count}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">轨道数量</label>
                <p className="text-gray-900">{template.track_count}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">画布尺寸</label>
                <p className="text-gray-900">
                  {template.canvas_config?.width || 0} × {template.canvas_config?.height || 0}
                </p>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">创建时间</label>
              <p className="text-gray-900">{new Date(template.created_at).toLocaleString('zh-CN')}</p>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">更新时间</label>
              <p className="text-gray-900">{new Date(template.updated_at).toLocaleString('zh-CN')}</p>
            </div>

            {/* Track and Segment Details */}
            <div className="border-t border-gray-200 pt-4">
              <label className="block text-sm font-medium text-gray-700 mb-3">轨道和片段信息</label>
              
              {loadingDetail ? (
                <div className="flex items-center justify-center py-8">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                  <span className="ml-2 text-gray-600">加载详情中...</span>
                </div>
              ) : templateDetail ? (
                <div className="space-y-4">
                  {/* Canvas Config */}
                  <div className="bg-gray-50 rounded-lg p-3">
                    <h4 className="font-medium text-gray-900 mb-2">画布配置</h4>
                    <div className="grid grid-cols-2 gap-2 text-sm">
                      <div>尺寸: {templateDetail.canvas_config?.width || 0} × {templateDetail.canvas_config?.height || 0}</div>
                      <div>帧率: {templateDetail.fps || 30} FPS</div>
                      <div>时长: {formatDuration(templateDetail.duration)}</div>
                      {templateDetail.sample_rate && (
                        <div>采样率: {templateDetail.sample_rate} Hz</div>
                      )}
                    </div>
                  </div>

                  {/* Tracks */}
                  <div className="space-y-3">
                    {templateDetail.tracks.map((track) => (
                      <div key={track.id} className="border border-gray-200 rounded-lg p-3">
                        <div className="flex items-center justify-between mb-2">
                          <h4 className="font-medium text-gray-900">
                            轨道 {track.index + 1}: {track.name}
                          </h4>
                          <span className={`px-2 py-1 rounded text-xs font-medium ${
                            track.type === 'video' ? 'bg-blue-100 text-blue-800' :
                            track.type === 'audio' ? 'bg-green-100 text-green-800' :
                            'bg-purple-100 text-purple-800'
                          }`}>
                            {track.type === 'video' ? '视频' : track.type === 'audio' ? '音频' : '字幕'}
                          </span>
                        </div>
                        
                        {/* Segments */}
                        <div className="space-y-2">
                          {track.segments.length > 0 ? (
                            track.segments.map((segment) => (
                              <div key={segment.id} className="bg-gray-50 rounded p-2 text-sm">
                                <div className="flex items-center justify-between mb-1">
                                  <span className="font-medium">{segment.name}</span>
                                  <span className={`px-1.5 py-0.5 rounded text-xs ${
                                    segment.type === 'video' ? 'bg-blue-100 text-blue-700' :
                                    segment.type === 'audio' ? 'bg-green-100 text-green-700' :
                                    segment.type === 'image' ? 'bg-yellow-100 text-yellow-700' :
                                    segment.type === 'text' ? 'bg-purple-100 text-purple-700' :
                                    'bg-gray-100 text-gray-700'
                                  }`}>
                                    {segment.type === 'video' ? '视频' :
                                     segment.type === 'audio' ? '音频' :
                                     segment.type === 'image' ? '图片' :
                                     segment.type === 'text' ? '文本' : '特效'}
                                  </span>
                                </div>
                                <div className="grid grid-cols-3 gap-2 text-xs text-gray-600">
                                  <div>开始: {formatTime(segment.start_time)}</div>
                                  <div>结束: {formatTime(segment.end_time)}</div>
                                  <div>时长: {formatTime(segment.duration)}</div>
                                </div>
                                {segment.resource_path && (
                                  <div className="text-xs text-gray-500 mt-1 truncate">
                                    资源: {segment.resource_path}
                                  </div>
                                )}
                              </div>
                            ))
                          ) : (
                            <div className="text-sm text-gray-500 italic">该轨道暂无片段</div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500">
                  <p>无法加载模板详情</p>
                  <p className="text-sm">请检查模板文件是否完整</p>
                </div>
              )}
            </div>

            {/* Actions */}
            <div className="flex justify-end space-x-3 pt-4 border-t border-gray-200">
              <button
                onClick={onClose}
                className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
              >
                关闭
              </button>
              <button
                onClick={() => onDelete(template.id)}
                className="px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
              >
                删除模板
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
