'use client';

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Upload, Library, Wand2, Search, FileVideo, Plus, ChevronDown } from 'lucide-react';
import { cn } from '@/public/lib/utils';
import { GenerateVideoModal } from './generate-video-modal';

interface ReplaceVideoModalProps {
  isOpen: boolean;
  activeReplaceMethod: string;
  onClose: () => void;
  onVideoSelect: (video: any) => void;
}

export function ReplaceVideoModal({
  isOpen,
  activeReplaceMethod,
  onClose,
  onVideoSelect
}: ReplaceVideoModalProps) {
  const [activeMethod, setActiveMethod] = useState(activeReplaceMethod);
  const [searchQuery, setSearchQuery] = useState('');
  const [isGenerateModalOpen, setIsGenerateModalOpen] = React.useState(false);

  useEffect(() => {
    setActiveMethod(activeReplaceMethod);
  }, [activeReplaceMethod]);

  // 模拟素材库视频数据
  const mockLibraryVideos = [
    { id: 1, url: 'https://example.com/video1.mp4', title: '烟花绽放', duration: '00:15' },
    { id: 2, url: 'https://example.com/video2.mp4', title: '城市夜景', duration: '00:20' },
    { id: 3, url: 'https://example.com/video3.mp4', title: '海浪声音', duration: '00:30' },
  ];

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      // 处理文件上传
      console.log('Uploading file:', file);
    }
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* 背景遮罩 */}
          <motion.div
            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
          />

          {/* 弹窗内容 */}
          <div className="fixed inset-x-0 bottom-0 z-50 flex justify-center">
            <motion.div
              className="w-[66%] min-w-[800px] bg-[#1a1b1e] rounded-t-2xl overflow-hidden"
              initial={{ y: '100%' }}
              animate={{ y: 0 }}
              exit={{ y: '100%' }}
              transition={{
                type: 'spring',
                damping: 25,
                stiffness: 200,
              }}
            >
              {/* 标题栏 */}
              <div className="flex items-center justify-between p-4 border-b border-white/10">
                <div className="flex items-center gap-2">
                  <button 
                    className="p-1 hover:bg-white/10 rounded-full transition-colors"
                    onClick={onClose}
                  >
                    <ChevronDown className="w-5 h-5" />
                  </button>
                  <h2 className="text-lg font-medium">Video replacement</h2>
                </div>
              </div>

              {/* 主要内容区域 */}
              <div className="p-6 space-y-6 h-[80vh]">
                {/* 替换方式选择 */}
                <div className="flex gap-4">
                  <motion.button
                    className={cn(
                      'flex-1 flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-colors',
                      activeMethod === 'upload' 
                        ? 'border-blue-500 bg-blue-500/10' 
                        : 'border-white/10 hover:border-white/20'
                    )}
                    onClick={() => setActiveMethod('upload')}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <Upload className="w-6 h-6" />
                    <span>Upload video</span>
                  </motion.button>

                  <motion.button
                    className={cn(
                      'flex-1 flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-colors',
                      activeMethod === 'library' 
                        ? 'border-blue-500 bg-blue-500/10' 
                        : 'border-white/10 hover:border-white/20'
                    )}
                    onClick={() => setActiveMethod('library')}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <Library className="w-6 h-6" />
                    <span>Library</span>
                  </motion.button>

                  <motion.button
                    className={cn(
                      'flex-1 flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-colors',
                      activeMethod === 'generate' 
                        ? 'border-blue-500 bg-blue-500/10' 
                        : 'border-white/10 hover:border-white/20'
                    )}
                    onClick={() => setActiveMethod('generate')}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <Wand2 className="w-6 h-6" />
                    <span>Generate video</span>
                  </motion.button>
                </div>

                {/* 内容区域 */}
                <AnimatePresence mode="wait">
                  {activeMethod === 'upload' && (
                    <motion.div
                      key="upload"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -20 }}
                      className="flex flex-col items-center justify-center p-8 border-2 border-dashed border-white/10 rounded-lg"
                    >
                      <input
                        type="file"
                        accept="video/*"
                        className="hidden"
                        id="video-upload"
                        onChange={handleFileUpload}
                      />
                      <label
                        htmlFor="video-upload"
                        className="flex flex-col items-center gap-4 cursor-pointer"
                      >
                        <motion.div
                          className="p-4 rounded-full bg-white/5"
                          whileHover={{ scale: 1.1, backgroundColor: 'rgba(255,255,255,0.1)' }}
                          whileTap={{ scale: 0.9 }}
                        >
                          <FileVideo className="w-8 h-8 text-white/70" />
                        </motion.div>
                        <div className="text-center">
                          <p className="text-white/70">Click to upload or drag and drop video files here</p>
                          <p className="text-sm text-white/50 mt-2">Supports MP4, MOV, AVI formats</p>
                        </div>
                      </label>
                    </motion.div>
                  )}

                  {activeMethod === 'library' && (
                    <motion.div
                      key="library"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -20 }}
                      className="space-y-4"
                    >
                      {/* 搜索框 */}
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/50" />
                        <input
                          type="text"
                          placeholder="Search video..."
                          className="w-full pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg 
                            focus:outline-none focus:border-blue-500 transition-colors"
                          value={searchQuery}
                          onChange={(e) => setSearchQuery(e.target.value)}
                        />
                      </div>

                      {/* 视频列表 */}
                      <div className="grid grid-cols-3 gap-4">
                        {mockLibraryVideos.map((video) => (
                          <motion.div
                            key={video.id}
                            className="group relative aspect-video rounded-lg overflow-hidden cursor-pointer"
                            whileHover={{ scale: 1.02 }}
                            whileTap={{ scale: 0.98 }}
                            onClick={() => onVideoSelect(video)}
                          >
                            <video
                              src={video.url}
                              className="w-full h-full object-cover"
                              muted
                              loop
                              playsInline
                              onMouseEnter={(e) => e.currentTarget.play()}
                              onMouseLeave={(e) => e.currentTarget.pause()}
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent 
                              opacity-0 group-hover:opacity-100 transition-opacity">
                              <div className="absolute bottom-0 left-0 right-0 p-2">
                                <p className="text-sm font-medium">{video.title}</p>
                                <p className="text-xs text-white/70">{video.duration}</p>
                              </div>
                            </div>
                          </motion.div>
                        ))}
                      </div>
                    </motion.div>
                  )}

                  {activeMethod === 'generate' && (
                    <motion.div
                      key="generate"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -20 }}
                      className="flex flex-col items-center gap-4"
                    >
                      <motion.button
                        className="flex items-start gap-2 px-6 py-3 bg-blue-500 hover:bg-blue-600 
                          rounded-lg transition-colors"
                        onClick={() => setIsGenerateModalOpen(true)}
                        whileHover={{ scale: 1.02 }}
                        whileTap={{ scale: 0.98 }}
                      >
                        <Plus className="w-5 h-5" />
                        <span>Generate new video</span>
                      </motion.button>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>

              {/* 底部操作栏 */}
              <div className="p-4 border-t border-white/10 bg-black/20">
                <div className="flex justify-end gap-3">
                  <motion.button
                    className="px-4 py-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                    onClick={onClose}
                  >
                    Reset
                  </motion.button>
                  <motion.button
                    className="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    Apply
                  </motion.button>
                </div>
              </div>
            </motion.div>
          </div>

          {/* 生成视频弹窗 */}
          <GenerateVideoModal
            isOpen={isGenerateModalOpen}
            onClose={() => setIsGenerateModalOpen(false)}
            onGenerate={(params) => {
              console.log('Generate video with params:', params);
              setIsGenerateModalOpen(false);
            }}
          />
        </>
      )}
    </AnimatePresence>
  );
}