"use client";

import { useState } from 'react';
import { motion } from 'framer-motion';
import { DragDropContext, DropResult } from 'react-beautiful-dnd';
import { ScriptMetaInfo } from '../script-overview/script-meta-info';
import { SceneFilmstrip } from '../script-overview/scene-filmstrip';
import { SceneCardList } from '../script-overview/scene-card-list';
import { FloatingToolbar } from '../script-overview/floating-toolbar';

// 场景数据结构
export interface Scene {
  id: string;
  name: string;
  description: string;
  plot: string;
  dialogue: string;
  narration: string;
  imageUrl: string;
}

// 剧本元信息数据结构
export interface ScriptMeta {
  title: string;
  type: string;
  genre: string;
  tags: string[];
  duration: string;
  uploadTime: string;
}

export default function ScriptOverview() {
  // Example Data
  const [scriptMeta] = useState<ScriptMeta>({
    title: "Lost Stars",
    type: "Short Drama",
    genre: "Sci-Fi/Mystery",
    tags: ["Space", "Psychology", "Future"],
    duration: "20-25 minutes",
    uploadTime: "2024-03-20"
  });

  const [scenes, setScenes] = useState<Scene[]>([
    {
      id: "scene-1",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-2",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-3",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-5",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-6",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-7",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-8",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-9",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-10",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-11",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-12",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-13",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    },
    {
      id: "scene-14",
      name: "Space Station Interior",
      description: "Main control room of the International Space Station",
      plot: "Protagonist discovers an anomalous signal",
      dialogue: "Captain: This signal... it's not from Earth",
      narration: "In the darkness of space, a faint light blinks",
      imageUrl: "https://smart-video-ai.oss-cn-beijing.aliyuncs.com/frames/d877fa43-4856-4acb-9a3b-627c28275343/frame_000007.jpg/1750507514_tmphfb431oc_000007.jpg",
    }
    // ... 更多场景数据
  ]);

  const [selectedSceneId, setSelectedSceneId] = useState<string>();

  // Handle scene drag and drop sorting
  const handleDragEnd = (result: DropResult) => {
    if (!result.destination) return;

    const items = Array.from(scenes);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    setScenes(items);
  };

  // Handle scene updates
  const handleSceneUpdate = (sceneId: string, updates: Partial<Scene>) => {
    setScenes(scenes.map(scene => 
      scene.id === sceneId ? { ...scene, ...updates } : scene
    ));
  };

  // Handle scene deletion
  const handleSceneDelete = (sceneId: string) => {
    setScenes(scenes.filter(scene => scene.id !== sceneId));
    if (selectedSceneId === sceneId) {
      setSelectedSceneId(undefined);
    }
  };

  // Handle scene duplication
  const handleSceneDuplicate = (sceneId: string) => {
    const sceneToDuplicate = scenes.find(scene => scene.id === sceneId);
    if (!sceneToDuplicate) return;

    const newScene = {
      ...sceneToDuplicate,
      id: `scene-${Date.now()}`,
      name: `${sceneToDuplicate.name} (Copy)`
    };

    setScenes([...scenes, newScene]);
  };

  return (
    <div className="h-full bg-[#0C0E11] text-white">
      <div className="h-full flex">
        {/* Left: Script Meta Info */}
        <div className="flex-shrink-0 h-full">
          <ScriptMetaInfo meta={scriptMeta} />
        </div>

        {/* Right: Scene Content */}
        <div className="flex-grow min-w-0 h-full overflow-hidden flex flex-col">
          {/* Scene Card List */}
          <div className="flex-grow overflow-y-auto px-8">
            <DragDropContext onDragEnd={handleDragEnd}>
              <SceneCardList
                scenes={scenes}
                selectedSceneId={selectedSceneId}
                onSceneUpdate={handleSceneUpdate}
                onSceneDelete={handleSceneDelete}
                onSceneDuplicate={handleSceneDuplicate}
              />
            </DragDropContext>
          </div>

          {/* Filmstrip Preview */}
          <div className="flex-shrink-0 py-6 px-8">
            <SceneFilmstrip 
              scenes={scenes}
              selectedSceneId={selectedSceneId}
              onSceneSelect={(sceneId: string) => {
                setSelectedSceneId(sceneId);
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}