import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronLeft, ChevronRight, Clock, Calendar, Tag, Film, BookOpen, Info } from 'lucide-react';
import { ScriptMeta } from '../pages/script-overview';

interface ScriptMetaInfoProps {
  meta: ScriptMeta;
}

export function ScriptMetaInfo({ meta }: ScriptMetaInfoProps) {
  const [isExpanded, setIsExpanded] = useState(true);

  return (
    <div className="relative h-full">
      {/* 收起时的触发按钮 */}
      <AnimatePresence initial={false}>
        {!isExpanded && (
          <motion.button
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.8 }}
            onClick={() => setIsExpanded(true)}
            className="absolute left-0 top-8 z-10 p-3 bg-white/5 hover:bg-white/10
              backdrop-blur-sm rounded-r-xl border-l-2 border-blue-500/50
              shadow-[0_0_15px_rgba(59,130,246,0.2)] transition-colors group"
          >
            <Info className="w-6 h-6 text-blue-400 group-hover:text-blue-300 transition-colors" />
          </motion.button>
        )}
      </AnimatePresence>

      {/* 主内容区域 */}
      <motion.div
        initial={false}
        animate={{
          width: isExpanded ? 'auto' : 0,
          opacity: isExpanded ? 1 : 0,
          x: isExpanded ? 0 : -20,
        }}
        transition={{ type: "spring", stiffness: 300, damping: 30 }}
        className={`
          bg-white/5 backdrop-blur-sm rounded-xl overflow-hidden h-full
          ${isExpanded ? 'border border-white/10' : ''}
        `}
      >
        <div className="w-[320px] h-full">
          <div className="p-6">
            {/* 标题和展开/收起按钮 */}
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-xl font-semibold">剧本信息</h2>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setIsExpanded(false)}
                className="p-2 hover:bg-white/10 rounded-lg transition-colors
                  text-white/60 hover:text-white"
              >
                <ChevronLeft className="w-5 h-5" />
              </motion.button>
            </div>

            {/* 剧本标题 */}
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-white/60">
                <BookOpen className="w-4 h-4" />
                <span>剧本标题</span>
              </div>
              <h1 className="text-2xl font-bold">{meta.title}</h1>
            </div>

            {/* 类型和体裁 */}
            <div className="mt-6 space-y-4">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-2">
                  <Film className="w-4 h-4 text-white/60" />
                  <span className="text-white/60">类型</span>
                </div>
                <span>{meta.type}</span>
              </div>
              <div>
                <span className="text-white/60 mr-4">体裁</span>
                <span>{meta.genre}</span>
              </div>
            </div>

            {/* 标签 */}
            <div className="mt-6 space-y-2">
              <div className="flex items-center gap-2 text-white/60">
                <Tag className="w-4 h-4" />
                <span>标签</span>
              </div>
              <div className="flex flex-wrap gap-2">
                {meta.tags.map(tag => (
                  <span
                    key={tag}
                    className="px-3 py-1 bg-white/10 rounded-full text-sm"
                  >
                    {tag}
                  </span>
                ))}
              </div>
            </div>

            {/* 时长和上传时间 */}
            <div className="mt-6 space-y-4 pt-4 border-t border-white/10">
              <div className="flex items-center gap-2">
                <Clock className="w-4 h-4 text-white/60" />
                <span className="text-white/60">建议时长</span>
                <span className="ml-2">{meta.duration}</span>
              </div>
              <div className="flex items-center gap-2">
                <Calendar className="w-4 h-4 text-white/60" />
                <span className="text-white/60">上传时间</span>
                <span className="ml-2">{meta.uploadTime}</span>
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  );
}