/**
 * Text Video Generator Page
 * 基于 Text Video Agent API 的智能内容生成页面
 */

import React, { useState } from 'react'
import { ArrowLeft, Info, ExternalLink } from 'lucide-react'
import { Link } from 'react-router-dom'
import TextVideoGenerator from '../components/TextVideoGenerator'

const TextVideoGeneratorPage: React.FC = () => {
  const [generatedContent, setGeneratedContent] = useState<{
    images: string[]
    videos: string[]
  }>({
    images: [],
    videos: []
  })

  const handleImageGenerated = (imageUrl: string) => {
    setGeneratedContent(prev => ({
      ...prev,
      images: [...prev.images, imageUrl]
    }))
  }

  const handleVideoGenerated = (videoUrl: string) => {
    setGeneratedContent(prev => ({
      ...prev,
      videos: [...prev.videos, videoUrl]
    }))
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 页面头部 */}
      <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 h-16">
            <div className="flex items-center">
              <Link
                to="/"
                className="flex items-center text-gray-600 hover:text-gray-900 transition-colors mr-4"
              >
                <ArrowLeft size={20} className="mr-2" />
                返回首页
              </Link>
              <div>
                <h1 className="text-xl font-semibold text-gray-900">AI 内容生成器</h1>
                <p className="text-sm text-gray-600">基于 Text Video Agent API 的智能内容生成</p>
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              <a
                href="https://bowongai-dev--text-video-agent-fastapi-app.modal.run/docs"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center text-blue-600 hover:text-blue-700 text-sm"
              >
                <ExternalLink size={16} className="mr-1" />
                API 文档
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* 主要内容区域 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* 左侧：生成器 */}
          <div className="lg:col-span-3">
            <TextVideoGenerator
              onImageGenerated={handleImageGenerated}
              onVideoGenerated={handleVideoGenerated}
            />
          </div>

          {/* 右侧：信息面板 */}
          <div className="lg:col-span-1 space-y-6">
            {/* 功能介绍 */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center mb-4">
                <Info className="text-blue-600 mr-2" size={20} />
                <h3 className="font-semibold text-gray-900">功能介绍</h3>
              </div>
              <div className="space-y-3 text-sm text-gray-600">
                <div>
                  <h4 className="font-medium text-gray-900 mb-1">🎨 图片生成</h4>
                  <p>基于 Midjourney 的高质量图片生成，支持参考图片和自定义提示词</p>
                </div>
                <div>
                  <h4 className="font-medium text-gray-900 mb-1">🎬 视频生成</h4>
                  <p>基于极梦的视频生成功能，将静态图片转换为动态视频</p>
                </div>
                <div>
                  <h4 className="font-medium text-gray-900 mb-1">🔄 端到端生成</h4>
                  <p>一键完成从提示词到最终视频的完整生成流程</p>
                </div>
                <div>
                  <h4 className="font-medium text-gray-900 mb-1">📊 实时进度</h4>
                  <p>实时显示生成进度和状态，支持取消和重试</p>
                </div>
              </div>
            </div>

            {/* 任务类型说明 */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <h3 className="font-semibold text-gray-900 mb-4">任务类型说明</h3>
              <div className="space-y-3 text-sm">
                <div className="flex justify-between">
                  <span className="font-medium text-gray-700">Vlog</span>
                  <span className="text-gray-600">生活记录风格</span>
                </div>
                <div className="flex justify-between">
                  <span className="font-medium text-gray-700">茶文化</span>
                  <span className="text-gray-600">茶艺相关内容</span>
                </div>
                <div className="flex justify-between">
                  <span className="font-medium text-gray-700">人物</span>
                  <span className="text-gray-600">人物肖像风格</span>
                </div>
                <div className="flex justify-between">
                  <span className="font-medium text-gray-700">烹饪</span>
                  <span className="text-gray-600">美食制作过程</span>
                </div>
              </div>
            </div>

            {/* 生成统计 */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <h3 className="font-semibold text-gray-900 mb-4">本次会话统计</h3>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-gray-600">生成图片</span>
                  <span className="font-semibold text-blue-600">{generatedContent.images.length}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-gray-600">生成视频</span>
                  <span className="font-semibold text-purple-600">{generatedContent.videos.length}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-gray-600">总计内容</span>
                  <span className="font-semibold text-green-600">
                    {generatedContent.images.length + generatedContent.videos.length}
                  </span>
                </div>
              </div>
            </div>

            {/* 最近生成的内容 */}
            {(generatedContent.images.length > 0 || generatedContent.videos.length > 0) && (
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 className="font-semibold text-gray-900 mb-4">最近生成</h3>
                <div className="space-y-3">
                  {/* 最新的图片 */}
                  {generatedContent.images.slice(-2).map((imageUrl, index) => (
                    <div key={index} className="flex items-center space-x-3">
                      <img
                        src={imageUrl}
                        alt={`Generated ${index}`}
                        className="w-12 h-12 object-cover rounded-md"
                      />
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-gray-900 truncate">
                          生成的图片
                        </p>
                        <p className="text-xs text-gray-500">
                          {new Date().toLocaleTimeString()}
                        </p>
                      </div>
                    </div>
                  ))}
                  
                  {/* 最新的视频 */}
                  {generatedContent.videos.slice(-2).map((_, index) => (
                    <div key={index} className="flex items-center space-x-3">
                      <div className="w-12 h-12 bg-purple-100 rounded-md flex items-center justify-center">
                        <span className="text-purple-600 text-xs font-medium">MP4</span>
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-gray-900 truncate">
                          生成的视频
                        </p>
                        <p className="text-xs text-gray-500">
                          {new Date().toLocaleTimeString()}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* 使用提示 */}
            <div className="bg-blue-50 rounded-lg border border-blue-200 p-6">
              <h3 className="font-semibold text-blue-900 mb-3">💡 使用提示</h3>
              <div className="space-y-2 text-sm text-blue-800">
                <p>• 提示词越详细，生成效果越好</p>
                <p>• 可以上传参考图片提高生成质量</p>
                <p>• 建议先生成图片，再基于图片生成视频</p>
                <p>• 生成过程可能需要1-3分钟，请耐心等待</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default TextVideoGeneratorPage
