'use client';

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, ChevronDown } from 'lucide-react';
import { cn } from '@/public/lib/utils';

interface GenerateCharacterModalProps {
  isOpen: boolean;
  onClose: () => void;
  onGenerate: (params: { text: string; duration: string }) => void;
}

export function GenerateCharacterModal({
  isOpen,
  onClose,
  onGenerate
}: GenerateCharacterModalProps) {
  const [text, setText] = useState('');
  const [duration, setDuration] = useState('5');
  const [characterUrl, setCharacterUrl] = useState('');

  const handleGenerate = () => {
    onGenerate({ text, duration });
  };

  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">generate character</h2>
                </div>
              </div>

              {/* 主要内容区域 */}
              <div className="p-6 space-y-6 h-[80vh] flex flex-col overflow-y-auto hide-scrollbar">
                
                {/* 文本输入区域 */}
                <div className="space-y-2 flex-shrink-0">
                  <label className="text-sm text-white/70">describe the character</label>
                  <textarea
                    className="w-full h-32 p-4 bg-white/5 border border-white/10 rounded-lg 
                      text-white placeholder-white/30 resize-none focus:outline-none focus:border-blue-500"
                    placeholder="describe the gender, age, and appearance of the character you want to generate..."
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                  />
                </div>

                {/* 生成按钮 */}
                <div className="flex justify-end flex-shrink-0">
                  <motion.button
                    className="px-6 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg 
                      transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    onClick={handleGenerate}
                    disabled={!text.trim()}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    generate character
                  </motion.button>
                </div>

                {/* 角色预览区 图片 16/9 */}
                <div className="flex justify-center flex-1 h-[450px]">
                  <div className="w-[800px] h-full bg-white/5 rounded-lg">
                    <img src={characterUrl} className="w-full object-contain" />
                  </div>
                </div>
              </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-blue-500/10 text-blue-400 hover:bg-blue-500/20 transition-colors"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    add to library
                  </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>
        </>
      )}
    </AnimatePresence>
  );
}