import React, { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import {
  ArrowLeft,
  RotateCcw,
  Trash2,
  ZoomIn,
  ZoomOut,
  Download,
  Share2,
  Edit3,
  Tag,
  Clock,
  Monitor,
  Layers,
  Cloud,
  User,
  Calendar,
  BarChart3
} from 'lucide-react'
import { TemplateServiceV2, type TemplateInfo, type TemplateDetail } from '../services/TemplateServiceV2'
import { TimelineRuler, TrackTimeline } from '../components/timeline'
import { useTemplateOperationV2 } from '../hooks/useTemplateProgressV2'

const TemplateDetailPageV2: React.FC = () => {
  const { templateId } = useParams<{ templateId: string }>()
  const navigate = useNavigate()

  const [template, setTemplate] = useState<TemplateInfo | null>(null)
  const [templateDetail, setTemplateDetail] = useState<TemplateDetail | null>(null)
  const [loading, setLoading] = useState(true)
  const [currentTime, setCurrentTime] = useState(0)
  const [timelineScale, setTimelineScale] = useState(100) // pixels per second
  const [showAdvancedInfo, setShowAdvancedInfo] = useState(false)

  // 使用操作Hook
  const { loading: deleting, error: deleteError, execute: executeDelete } = useTemplateOperationV2()

  useEffect(() => {
    if (templateId) {
      loadTemplateDetail()
    }
  }, [templateId])

  const loadTemplateDetail = async () => {
    if (!templateId) return

    try {
      setLoading(true)

      // 并行加载基本信息和详细信息
      const [templateInfo, detail] = await Promise.all([
        TemplateServiceV2.getTemplate(templateId),
        TemplateServiceV2.getTemplateDetail(templateId)
      ])

      setTemplate(templateInfo)
      setTemplateDetail(detail)

      // 调试信息：显示加载的模板详情
      console.log('Template detail loaded:', {
        templateId: templateInfo.id,
        tracksCount: detail?.tracks?.length || 0,
        segments: detail?.tracks?.flatMap(track =>
          track.segments?.map(seg => ({ id: seg.id, name: seg.name })) || []
        ) || []
      })
    } catch (error) {
      console.error('Failed to load template detail:', error)
    } finally {
      setLoading(false)
    }
  }

  const formatTime = (seconds: number): string => {
    const minutes = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    const ms = Math.floor((seconds % 1) * 100)
    return `${minutes}:${secs.toString().padStart(2, '0')}.${ms.toString().padStart(2, '0')}`
  }

  const formatDuration = (duration: number) => {
    // 如果duration是微秒，转换为秒
    const seconds = duration > 1000000 ? Math.floor(duration / 1000000) : duration
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
  }

  const handleDeleteTemplate = async () => {
    if (!template || !confirm('确定要删除这个模板吗？此操作不可撤销。')) return

    const success = await executeDelete(() => TemplateServiceV2.deleteTemplate(template.id))

    if (success) {
      navigate('/templates')
    } else if (deleteError) {
      alert('删除失败: ' + deleteError.message)
    }
  }

  const handleSegmentNameChange = async (segmentId: string, newName: string) => {
    if (!templateDetail || !template) return

    try {
      // 先更新本地状态中的片段名称（立即响应用户操作）
      const updatedDetail = {
        ...templateDetail,
        tracks: templateDetail.tracks.map(track => ({
          ...track,
          segments: track.segments.map(segment =>
            segment.id === segmentId ? { ...segment, name: newName } : segment
          )
        }))
      }

      setTemplateDetail(updatedDetail)

      // 保存到后端
      const success = await TemplateServiceV2.updateSegmentName(
        template.id,
        segmentId,
        newName
      )

      if (success) {
        console.log(`Segment ${segmentId} renamed to: ${newName} - saved to database`)

        // 重新加载模板详情以确保数据一致性
        const freshDetail = await TemplateServiceV2.getTemplateDetail(template.id)
        if (freshDetail) {
          setTemplateDetail(freshDetail)
          console.log('Template detail reloaded from database')
        }
      } else {
        console.error('Failed to save segment name change to database')
        // 回滚本地状态
        await loadTemplateDetail()
        alert('保存片段名称失败，已恢复原始状态')
      }
    } catch (error) {
      console.error('Error updating segment name:', error)
      // 回滚本地状态
      await loadTemplateDetail()
      alert('保存片段名称失败: ' + (error instanceof Error ? error.message : '未知错误'))
    }
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        <span className="ml-3 text-gray-600">加载模板详情中...</span>
      </div>
    )
  }

  if (!template) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-2">模板未找到</h2>
          <p className="text-gray-600 mb-4">请检查模板ID是否正确</p>
          <button
            onClick={() => navigate('/templates')}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            返回模板列表
          </button>
        </div>
      </div>
    )
  }

  const totalDuration = templateDetail ?
    (templateDetail.duration > 1000000 ? templateDetail.duration / 1000000 : templateDetail.duration) :
    template.duration

  const isCloudTemplate = TemplateServiceV2.isCloudTemplate(template)
  const isUserTemplate = TemplateServiceV2.isUserTemplate(template)
  const thumbnailUrl = TemplateServiceV2.getThumbnailUrl(template)

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between py-4">
            <div className="flex items-center space-x-4">
              <button
                onClick={() => navigate('/templates')}
                className="flex items-center text-gray-600 hover:text-gray-900"
              >
                <ArrowLeft size={20} />
                <span className="ml-2">返回</span>
              </button>
              <div className="flex items-center space-x-3">
                {thumbnailUrl && (
                  <img
                    src={thumbnailUrl}
                    alt={template.name}
                    className="w-12 h-8 object-cover rounded border"
                  />
                )}
                <div>
                  <div className="flex items-center space-x-2">
                    <h1 className="text-2xl font-bold text-gray-900">{template.name}</h1>
                    {isCloudTemplate && (
                      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                        <Cloud size={12} className="mr-1" />
                        云端模板
                      </span>
                    )}
                    {isUserTemplate && (
                      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <User size={12} className="mr-1" />
                        我的模板
                      </span>
                    )}
                  </div>
                  <p className="text-gray-600">{template.description}</p>
                </div>
              </div>
            </div>
            <div className="flex items-center space-x-3">
              <button
                onClick={() => setShowAdvancedInfo(!showAdvancedInfo)}
                className="flex items-center px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
              >
                <BarChart3 size={16} />
                <span className="ml-2">详细信息</span>
              </button>
              <button
                onClick={handleDeleteTemplate}
                disabled={deleting}
                className="flex items-center px-4 py-2 text-red-600 border border-red-600 rounded-lg hover:bg-red-50 disabled:opacity-50"
              >
                <Trash2 size={16} />
                <span className="ml-2">{deleting ? '删除中...' : '删除模板'}</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {/* Template Info Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          {/* 基本信息卡片 */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-medium text-gray-900">基本信息</h3>
              <Monitor className="text-blue-500" size={20} />
            </div>
            <div className="space-y-3">
              <div>
                <label className="block text-sm font-medium text-gray-700">画布尺寸</label>
                <p className="text-gray-900">
                  {templateDetail?.canvas_config?.width || template.canvas_config?.width || 0} × {templateDetail?.canvas_config?.height || template.canvas_config?.height || 0}
                </p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">帧率</label>
                <p className="text-gray-900">{templateDetail?.fps || 30} FPS</p>
              </div>
            </div>
          </div>

          {/* 时长信息卡片 */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-medium text-gray-900">时长信息</h3>
              <Clock className="text-green-500" size={20} />
            </div>
            <div className="space-y-3">
              <div>
                <label className="block text-sm font-medium text-gray-700">总时长</label>
                <p className="text-gray-900">{formatDuration(totalDuration)}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">轨道数量</label>
                <p className="text-gray-900">{templateDetail?.tracks.length || template.track_count}</p>
              </div>
            </div>
          </div>

          {/* 素材信息卡片 */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-medium text-gray-900">素材信息</h3>
              <Layers className="text-purple-500" size={20} />
            </div>
            <div className="space-y-3">
              <div>
                <label className="block text-sm font-medium text-gray-700">素材数量</label>
                <p className="text-gray-900">{template.material_count}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">片段总数</label>
                <p className="text-gray-900">
                  {templateDetail?.tracks.reduce((total, track) => total + track.segments.length, 0) || 0}
                </p>
              </div>
            </div>
          </div>

          {/* 创建信息卡片 */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-medium text-gray-900">创建信息</h3>
              <Calendar className="text-orange-500" size={20} />
            </div>
            <div className="space-y-3">
              <div>
                <label className="block text-sm font-medium text-gray-700">创建时间</label>
                <p className="text-gray-900">{TemplateServiceV2.formatDate(template.created_at)}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">更新时间</label>
                <p className="text-gray-900">{TemplateServiceV2.formatDate(template.updated_at)}</p>
              </div>
            </div>
          </div>
        </div>

        {/* 标签信息 */}
        {template.tags.length > 0 && (
          <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
            <div className="flex items-center mb-4">
              <Tag className="text-blue-500 mr-2" size={20} />
              <h3 className="text-lg font-medium text-gray-900">标签</h3>
            </div>
            <div className="flex flex-wrap gap-2">
              {template.tags.map((tag) => (
                <span
                  key={tag}
                  className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800"
                >
                  {tag}
                </span>
              ))}
            </div>
          </div>
        )}

        {/* 高级信息 */}
        {showAdvancedInfo && (
          <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h3 className="text-lg font-medium text-gray-900 mb-4">高级信息</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">模板ID</label>
                <p className="text-gray-900 font-mono text-sm bg-gray-50 p-2 rounded">{template.id}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">用户ID</label>
                <p className="text-gray-900 font-mono text-sm bg-gray-50 p-2 rounded">{template.user_id}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">草稿路径</label>
                <p className="text-gray-900 text-sm bg-gray-50 p-2 rounded break-all">{template.draft_content_path}</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">资源路径</label>
                <p className="text-gray-900 text-sm bg-gray-50 p-2 rounded break-all">{template.resources_path}</p>
              </div>
              {templateDetail?.sample_rate && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">采样率</label>
                  <p className="text-gray-900">{templateDetail.sample_rate} Hz</p>
                </div>
              )}
            </div>
          </div>
        )}

        {/* 时间轴预览 */}
        {templateDetail && (
          <>
            {/* Timeline Controls */}
            <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-semibold text-gray-900">时间轴预览</h2>
                <div className="flex items-center space-x-4">
                  <div className="flex items-center space-x-2">
                    <button
                      onClick={() => setTimelineScale(Math.max(50, timelineScale - 25))}
                      className="p-2 text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
                      title="缩小"
                    >
                      <ZoomOut size={16} />
                    </button>
                    <span className="text-sm text-gray-600 min-w-[60px] text-center">
                      {timelineScale}px/s
                    </span>
                    <button
                      onClick={() => setTimelineScale(Math.min(200, timelineScale + 25))}
                      className="p-2 text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
                      title="放大"
                    >
                      <ZoomIn size={16} />
                    </button>
                  </div>
                  <button
                    onClick={() => setCurrentTime(0)}
                    className="flex items-center px-3 py-2 text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
                  >
                    <RotateCcw size={14} />
                    <span className="ml-1">重置</span>
                  </button>
                </div>
              </div>

              {/* Time Ruler */}
              <div className="mb-4">
                <TimelineRuler
                  duration={totalDuration}
                  currentTime={currentTime}
                  scale={timelineScale}
                  onTimeClick={setCurrentTime}
                />
              </div>

              {/* Current Time Display */}
              <div className="mb-4">
                <div className="flex items-center space-x-4">
                  <span className="text-sm text-gray-700">当前时间:</span>
                  <span className="font-mono text-lg">{formatTime(currentTime)}</span>
                  <span className="text-sm text-gray-500">/ {formatTime(totalDuration)}</span>
                </div>
              </div>
            </div>

            {/* Timeline Tracks */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">轨道时间轴</h2>
              <div className="space-y-4">
                {templateDetail.tracks.map((track) => {
                  return (
                    <TrackTimeline
                      key={track.id}
                      track={track}
                      totalDuration={totalDuration}
                      currentTime={currentTime}
                      onSegmentClick={(segment) => {
                        // 跳转到片段开始时间
                        setCurrentTime(segment.start_time)
                      }}
                      onSegmentHover={(segment) => {
                        // 可以在工具提示中显示片段详情
                        console.log('Hovering segment:', segment?.name)
                      }}
                      onSegmentNameChange={handleSegmentNameChange}
                    />
                  )
                })}
              </div>
            </div>
          </>
        )}

        {/* 如果没有详细信息 */}
        {!templateDetail && (
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="text-center py-8">
              <div className="text-gray-400 mb-4">
                <Layers size={48} className="mx-auto" />
              </div>
              <h3 className="text-lg font-medium text-gray-900 mb-2">暂无详细信息</h3>
              <p className="text-gray-600">该模板的详细轨道信息暂时无法加载</p>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default TemplateDetailPageV2
