import React, { useState } from 'react'
import { Sparkles, Info, Settings, HelpCircle, List, BookOpen } from 'lucide-react'
import AIVideoGenerator from '../components/AIVideoGenerator'
import VideoJobList from '../components/ai-video/VideoJobList'
import { useAIVideoStore } from '../stores/useAIVideoStore'

const AIVideoPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'tasks' | 'guide'>('tasks')

  // Get jobs from store
  const jobs = useAIVideoStore(state => state.jobs)
  const removeJob = useAIVideoStore(state => state.removeJob)
  const generateSingleVideo = useAIVideoStore(state => state.generateSingleVideo)
  const batchGenerateVideos = useAIVideoStore(state => state.batchGenerateVideos)

  // Job handlers
  const handlePreviewJob = (job: any) => {
    // TODO: Implement job preview
    console.log('Preview job:', job)
  }

  const handleDeleteJob = (jobId: string) => {
    removeJob(jobId)
  }

  const handleRetryJob = async (job: any) => {
    try {
      if (job.type === 'single') {
        await generateSingleVideo(job.request)
      } else if (job.type === 'batch') {
        await batchGenerateVideos(job.request)
      }
    } catch (error) {
      console.error('Retry failed:', error)
      alert(`重试失败: ${error instanceof Error ? error.message : '未知错误'}`)
    }
  }

  return (
    <div className="h-full flex flex-col bg-secondary-50">
      {/* Header */}
      <div className="bg-white border-b border-secondary-200 p-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
              <Sparkles className="text-white" size={20} />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-secondary-900">AI 视频生成</h1>
              <p className="text-secondary-600">使用 AI 技术将图片转换为动态视频</p>
            </div>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-hidden">
        <div className="h-full flex">
          {/* Main Content */}
          <div className="flex-1 p-6 overflow-y-auto">
            <AIVideoGenerator className="max-w-4xl mx-auto" />
          </div>

          {/* Sidebar */}
          <div className="w-80 bg-white border-l border-secondary-200 flex flex-col">
            {/* Tab Headers */}
            <div className="border-b border-secondary-200">
              <div className="flex">
                <button
                  onClick={() => setActiveTab('tasks')}
                  className={`flex-1 px-4 py-3 text-sm font-medium border-b-2 transition-colors flex items-center justify-center gap-2 ${
                    activeTab === 'tasks'
                      ? 'border-primary-500 text-primary-600 bg-primary-50'
                      : 'border-transparent text-secondary-600 hover:text-secondary-900 hover:bg-secondary-50'
                  }`}
                >
                  <List size={16} />
                  任务列表
                  {jobs.length > 0 && (
                    <span className="bg-primary-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                      {jobs.length}
                    </span>
                  )}
                </button>
                <button
                  onClick={() => setActiveTab('guide')}
                  className={`flex-1 px-4 py-3 text-sm font-medium border-b-2 transition-colors flex items-center justify-center gap-2 ${
                    activeTab === 'guide'
                      ? 'border-primary-500 text-primary-600 bg-primary-50'
                      : 'border-transparent text-secondary-600 hover:text-secondary-900 hover:bg-secondary-50'
                  }`}
                >
                  <BookOpen size={16} />
                  使用说明
                </button>
              </div>
            </div>

            {/* Tab Content */}
            <div className="flex-1 overflow-hidden">
              {activeTab === 'tasks' ? (
                <div className="h-full p-4">
                  <VideoJobList
                    jobs={jobs}
                    onPreview={handlePreviewJob}
                    onDelete={handleDeleteJob}
                    onRetry={handleRetryJob}
                  />
                </div>
              ) : (
                <div className="h-full p-6 overflow-y-auto">
                  <h3 className="text-lg font-semibold text-secondary-900 mb-4">使用说明</h3>
            
            <div className="space-y-4">
              {/* Info Card */}
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div className="flex items-start space-x-3">
                  <Info className="text-blue-500 mt-0.5" size={16} />
                  <div>
                    <h4 className="font-medium text-blue-900 mb-1">功能介绍</h4>
                    <p className="text-sm text-blue-700">
                      AI 视频生成功能可以将静态图片转换为动态视频，支持单张图片处理和批量处理模式。
                    </p>
                  </div>
                </div>
              </div>

              {/* Steps */}
              <div className="space-y-3">
                <h4 className="font-medium text-secondary-900">操作步骤</h4>
                
                <div className="space-y-2">
                  <div className="flex items-start space-x-3">
                    <div className="w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-sm font-medium">
                      1
                    </div>
                    <div>
                      <p className="text-sm font-medium text-secondary-900">选择模式</p>
                      <p className="text-xs text-secondary-600">单张图片或批量处理</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start space-x-3">
                    <div className="w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-sm font-medium">
                      2
                    </div>
                    <div>
                      <p className="text-sm font-medium text-secondary-900">选择文件</p>
                      <p className="text-xs text-secondary-600">上传图片文件或选择文件夹</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start space-x-3">
                    <div className="w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-sm font-medium">
                      3
                    </div>
                    <div>
                      <p className="text-sm font-medium text-secondary-900">输入提示词</p>
                      <p className="text-xs text-secondary-600">描述想要生成的视频内容</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start space-x-3">
                    <div className="w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-sm font-medium">
                      4
                    </div>
                    <div>
                      <p className="text-sm font-medium text-secondary-900">配置参数</p>
                      <p className="text-xs text-secondary-600">设置视频时长和模型类型</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start space-x-3">
                    <div className="w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-sm font-medium">
                      5
                    </div>
                    <div>
                      <p className="text-sm font-medium text-secondary-900">开始生成</p>
                      <p className="text-xs text-secondary-600">等待 AI 处理完成</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Tips */}
              <div className="space-y-3">
                <h4 className="font-medium text-secondary-900">使用技巧</h4>
                
                <div className="space-y-2 text-sm text-secondary-700">
                  <div className="flex items-start space-x-2">
                    <span className="text-primary-500">•</span>
                    <span>提示词越详细，生成的视频效果越好</span>
                  </div>
                  <div className="flex items-start space-x-2">
                    <span className="text-primary-500">•</span>
                    <span>Pro 模型质量更高但处理时间更长</span>
                  </div>
                  <div className="flex items-start space-x-2">
                    <span className="text-primary-500">•</span>
                    <span>批量处理时提示词会循环使用</span>
                  </div>
                  <div className="flex items-start space-x-2">
                    <span className="text-primary-500">•</span>
                    <span>建议图片分辨率不低于 512x512</span>
                  </div>
                </div>
              </div>

              {/* Model Comparison */}
              <div className="space-y-3">
                <h4 className="font-medium text-secondary-900">模型对比</h4>
                
                <div className="space-y-3">
                  <div className="border border-secondary-200 rounded-lg p-3">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-medium text-secondary-900">Lite 模型</span>
                      <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">推荐</span>
                    </div>
                    <div className="text-sm text-secondary-600 space-y-1">
                      <p>• 分辨率：720p</p>
                      <p>• 处理速度：快</p>
                      <p>• 适用场景：快速预览、批量处理</p>
                    </div>
                  </div>
                  
                  <div className="border border-secondary-200 rounded-lg p-3">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-medium text-secondary-900">Pro 模型</span>
                      <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">高质量</span>
                    </div>
                    <div className="text-sm text-secondary-600 space-y-1">
                      <p>• 分辨率：1080p</p>
                      <p>• 处理速度：较慢</p>
                      <p>• 适用场景：最终输出、高质量需求</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Support */}
              <div className="bg-secondary-50 border border-secondary-200 rounded-lg p-4">
                <h4 className="font-medium text-secondary-900 mb-2">需要帮助？</h4>
                <p className="text-sm text-secondary-600 mb-3">
                  如果遇到问题或需要技术支持，请联系我们。
                </p>
                <button className="btn-secondary text-sm px-3 py-1">
                  联系支持
                </button>
              </div>
            </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default AIVideoPage
