import React, { useState, useRef, useEffect } from 'react';
import { 
  Play, Pause, Plus, Trash2, ChevronRight, ChevronLeft, 
  Save, Download, Settings, Clock, Volume2, Edit3, Copy,
  Scissors, Music, Image, FileText, RotateCcw, RotateCw,
  CheckCircle, UploadCloud, Maximize, Layers, ZoomIn, ZoomOut
} from 'lucide-react';

// Shadcn UI components
import { Button } from '@/components/ui/button';
import { Slider } from '@/components/ui/slider';
import { Input } from '@/components/ui/input';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent } from '@/components/ui/card';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Progress } from '@/components/ui/progress';
import { Badge } from '@/components/ui/badge';

const VideoEditor = () => {
  // Editor state
  const [projectName, setProjectName] = useState("My Video Project");
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(60); // Total duration in seconds
  const [zoom, setZoom] = useState(1);
  const [selectedSceneIndex, setSelectedSceneIndex] = useState(0);
  const [showSceneEditor, setShowSceneEditor] = useState(false);
  const [notification, setNotification] = useState(null);
  const [showExportDialog, setShowExportDialog] = useState(false);
  const [exportProgress, setExportProgress] = useState(0);
  const [isExporting, setIsExporting] = useState(false);
  
  // References
  const timelineRef = useRef(null);
  const previewRef = useRef(null);
  
  // Scenes data structure
  const [scenes, setScenes] = useState([
    {
      id: "scene-1",
      name: "Introduction",
      duration: 5,
      background: "linear-gradient(120deg, #1e3c72, #2a5298)",
      type: "title",
      content: {
        title: "Learning Spanish",
        subtitle: "Basic Vocabulary"
      }
    },
    {
      id: "scene-2",
      name: "Word 1",
      duration: 8,
      background: "linear-gradient(120deg, #2a5298, #4776E6)",
      type: "word",
      content: {
        word: "médico",
        translation: "doctor",
        example: "Quiero ser médico"
      }
    },
    {
      id: "scene-3",
      name: "Word 2",
      duration: 8,
      background: "linear-gradient(120deg, #4776E6, #8E54E9)",
      type: "word",
      content: {
        word: "abogado",
        translation: "lawyer",
        example: "Necesito un abogado"
      }
    },
    {
      id: "scene-4",
      name: "Conclusion",
      duration: 5,
      background: "linear-gradient(120deg, #8E54E9, #1e3c72)",
      type: "title",
      content: {
        title: "Keep Practicing!",
        subtitle: "Learn a new word every day"
      }
    }
  ]);
  
  // Scene templates
  const sceneTemplates = [
    { 
      id: "template-title", 
      name: "Title Scene",
      type: "title",
      thumbnail: "linear-gradient(120deg, #1e3c72, #2a5298)",
      duration: 5
    },
    {
      id: "template-word",
      name: "Vocabulary Word",
      type: "word",
      thumbnail: "linear-gradient(120deg, #4776E6, #8E54E9)",
      duration: 8
    },
    {
      id: "template-split",
      name: "Split Screen",
      type: "split",
      thumbnail: "linear-gradient(120deg, #11998e, #38ef7d)",
      duration: 6
    },
    {
      id: "template-blank",
      name: "Blank Scene",
      type: "blank",
      thumbnail: "linear-gradient(120deg, #333, #666)",
      duration: 5
    }
  ];
  
  // Get current scene
  const currentScene = scenes[selectedSceneIndex] || scenes[0];
  
  // Update the total duration when scenes change
  useEffect(() => {
    const total = scenes.reduce((sum, scene) => sum + scene.duration, 0);
    setDuration(total);
  }, [scenes]);
  
  // When scene selection changes, update current time
  useEffect(() => {
    if (selectedSceneIndex >= 0 && selectedSceneIndex < scenes.length) {
      let startTime = 0;
      for (let i = 0; i < selectedSceneIndex; i++) {
        startTime += scenes[i].duration;
      }
      setCurrentTime(startTime);
    }
  }, [selectedSceneIndex]);
  
  // Animation playback
  useEffect(() => {
    let interval;
    if (isPlaying) {
      interval = setInterval(() => {
        setCurrentTime(time => {
          const newTime = time + 0.1;
          if (newTime >= duration) {
            setIsPlaying(false);
            return 0;
          }
          
          // Update selected scene based on current time
          let timeSum = 0;
          for (let i = 0; i < scenes.length; i++) {
            timeSum += scenes[i].duration;
            if (newTime < timeSum) {
              if (selectedSceneIndex !== i) {
                setSelectedSceneIndex(i);
              }
              break;
            }
          }
          
          return newTime;
        });
      }, 100);
    }
    
    return () => clearInterval(interval);
  }, [isPlaying, duration, scenes, selectedSceneIndex]);
  
  // Handle timeline scrubbing
  const handleTimelineClick = (e) => {
    if (!timelineRef.current) return;
    
    const rect = timelineRef.current.getBoundingClientRect();
    const clickPosition = e.clientX - rect.left;
    const percentClicked = clickPosition / rect.width;
    const newTime = percentClicked * duration;
    
    setCurrentTime(Math.max(0, Math.min(newTime, duration)));
    
    // Update selected scene
    let timeSum = 0;
    for (let i = 0; i < scenes.length; i++) {
      timeSum += scenes[i].duration;
      if (newTime < timeSum) {
        setSelectedSceneIndex(i);
        break;
      }
    }
  };
  
  // Add a new scene
  const addScene = (templateId) => {
    const template = sceneTemplates.find(t => t.id === templateId);
    if (!template) return;
    
    const newScene = {
      id: `scene-${Date.now()}`,
      name: `New ${template.name}`,
      duration: template.duration,
      background: template.thumbnail,
      type: template.type,
      content: template.type === 'title' 
        ? { title: "New Title", subtitle: "Add a subtitle" }
        : template.type === 'word'
        ? { word: "palabra", translation: "word", example: "Una palabra nueva" }
        : template.type === 'split'
        ? { leftText: "Left side", rightText: "Right side" }
        : {}
    };
    
    // Insert after currently selected scene
    const newScenes = [...scenes];
    newScenes.splice(selectedSceneIndex + 1, 0, newScene);
    
    setScenes(newScenes);
    setSelectedSceneIndex(selectedSceneIndex + 1);
    showNotification("Scene added");
  };
  
  // Delete scene
  const deleteScene = (index) => {
    if (scenes.length <= 1) {
      showNotification("Cannot delete the only scene", "error");
      return;
    }
    
    const newScenes = [...scenes];
    newScenes.splice(index, 1);
    
    setScenes(newScenes);
    if (selectedSceneIndex >= newScenes.length) {
      setSelectedSceneIndex(newScenes.length - 1);
    }
    showNotification("Scene deleted");
  };
  
  // Duplicate scene
  const duplicateScene = (index) => {
    const sceneToClone = scenes[index];
    const clonedScene = {
      ...sceneToClone,
      id: `scene-${Date.now()}`,
      name: `${sceneToClone.name} (Copy)`
    };
    
    const newScenes = [...scenes];
    newScenes.splice(index + 1, 0, clonedScene);
    
    setScenes(newScenes);
    setSelectedSceneIndex(index + 1);
    showNotification("Scene duplicated");
  };
  
  // Update scene
  const updateScene = (sceneData) => {
    const newScenes = [...scenes];
    newScenes[selectedSceneIndex] = {
      ...newScenes[selectedSceneIndex],
      ...sceneData
    };
    
    setScenes(newScenes);
    setShowSceneEditor(false);
    showNotification("Scene updated");
  };
  
  // Show notification
  const showNotification = (message, type = "success") => {
    setNotification({ message, type });
    setTimeout(() => setNotification(null), 3000);
  };
  
  // Export video
  const exportVideo = (settings) => {
    setIsExporting(true);
    setExportProgress(0);
    
    // Simulate export process
    const interval = setInterval(() => {
      setExportProgress(prev => {
        const newValue = prev + 5;
        if (newValue >= 100) {
          clearInterval(interval);
          setTimeout(() => {
            setIsExporting(false);
            setShowExportDialog(false);
            showNotification("Video exported successfully!");
          }, 500);
          return 100;
        }
        return newValue;
      });
    }, 200);
  };
  
  // Get time at scene start
  const getSceneStartTime = (index) => {
    let startTime = 0;
    for (let i = 0; i < index; i++) {
      startTime += scenes[i].duration;
    }
    return startTime;
  };
  
  // Format time as MM:SS
  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };
  
  // Jump to previous scene
  const goToPreviousScene = () => {
    if (selectedSceneIndex > 0) {
      setSelectedSceneIndex(selectedSceneIndex - 1);
    }
  };
  
  // Jump to next scene
  const goToNextScene = () => {
    if (selectedSceneIndex < scenes.length - 1) {
      setSelectedSceneIndex(selectedSceneIndex + 1);
    }
  };
  
  // Render scene preview based on type
  const renderScenePreview = (scene) => {
    switch (scene.type) {
      case 'title':
        return (
          <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
            <h1 className="text-4xl font-bold mb-4 text-center">{scene.content.title}</h1>
            <h2 className="text-xl text-center">{scene.content.subtitle}</h2>
          </div>
        );
      case 'word':
        return (
          <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
            <h2 className="text-xl mb-1">New Word</h2>
            <h1 className="text-5xl font-bold mb-2">{scene.content.word}</h1>
            <p className="text-2xl mb-6 opacity-80">{scene.content.translation}</p>
            <div className="bg-white/20 p-4 rounded-lg text-xl">
              "{scene.content.example}"
            </div>
          </div>
        );
      case 'split':
        return (
          <div className="absolute inset-0 flex text-white">
            <div className="w-1/2 border-r border-white/20 flex items-center justify-center p-6">
              <p className="text-2xl text-center">{scene.content.leftText}</p>
            </div>
            <div className="w-1/2 flex items-center justify-center p-6">
              <p className="text-2xl text-center">{scene.content.rightText}</p>
            </div>
          </div>
        );
      default:
        return (
          <div className="absolute inset-0 flex items-center justify-center text-white">
            <p className="text-xl">Empty Scene</p>
          </div>
        );
    }
  };
  
  return (
    <div className="flex flex-col h-screen bg-gray-900 text-white overflow-hidden">
      {/* Top toolbar */}
      <header className="border-b border-gray-700 bg-gray-800 p-3 flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="text-white">Project</Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="bg-gray-800 border-gray-700 text-white">
                <DropdownMenuItem className="hover:bg-gray-700">New Project</DropdownMenuItem>
                <DropdownMenuItem className="hover:bg-gray-700">Open Project</DropdownMenuItem>
                <DropdownMenuItem className="hover:bg-gray-700">Save Project</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
            
            <Input 
              className="w-40 bg-gray-800 border-gray-600 text-white"
              value={projectName}
              onChange={(e) => setProjectName(e.target.value)}
            />
          </div>
          
          <div className="flex items-center space-x-2">
            <Button 
              variant="ghost" 
              size="sm" 
              className="text-white"
              onClick={() => setShowSceneEditor(true)}
            >
              <Edit3 className="h-4 w-4 mr-1" /> Edit Scene
            </Button>
            
            <Button 
              variant="ghost" 
              size="sm" 
              className="text-white"
              onClick={() => duplicateScene(selectedSceneIndex)}
            >
              <Copy className="h-4 w-4 mr-1" /> Duplicate
            </Button>
            
            <Button 
              variant="ghost" 
              size="sm" 
              className="text-white"
              onClick={() => deleteScene(selectedSceneIndex)}
            >
              <Trash2 className="h-4 w-4 mr-1" /> Delete
            </Button>
          </div>
        </div>
        
        <div className="flex items-center space-x-2">
          <Button 
            variant="ghost" 
            size="sm" 
            className="text-white"
            onClick={() => setShowExportDialog(true)}
          >
            <Download className="h-4 w-4 mr-1" /> Export
          </Button>
          
          <Button variant="ghost" size="icon" className="text-white">
            <Settings className="h-5 w-5" />
          </Button>
        </div>
      </header>
      
      {/* Main Content Area */}
      <div className="flex flex-1 overflow-hidden">
        {/* Left panel - Templates */}
        <div className="w-64 border-r border-gray-700 bg-gray-800 overflow-y-auto">
          <div className="p-3 border-b border-gray-700">
            <h2 className="font-medium">Scene Templates</h2>
          </div>
          
          <div className="p-3 space-y-3">
            {sceneTemplates.map(template => (
              <Card 
                key={template.id}
                className="bg-gray-700 border-gray-600 cursor-pointer hover:bg-gray-600 transition-colors overflow-hidden"
                onClick={() => addScene(template.id)}
              >
                <div className="aspect-video relative" style={{ background: template.thumbnail }}>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Plus className="h-8 w-8 text-white opacity-50" />
                  </div>
                </div>
                <CardContent className="p-2">
                  <div className="text-sm">{template.name}</div>
                  <div className="text-xs text-gray-400">{template.duration}s</div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
        
        {/* Middle Panel - Preview */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Scene Preview */}
          <div className="flex-1 bg-gray-950 p-4 flex items-center justify-center">
            <div 
              ref={previewRef}
              className="aspect-video w-full max-h-full relative rounded overflow-hidden"
              style={{ background: currentScene.background }}
            >
              {renderScenePreview(currentScene)}
              
              {/* Scene info overlay */}
              <div className="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
                {currentScene.name} ({formatTime(getSceneStartTime(selectedSceneIndex))} - {formatTime(getSceneStartTime(selectedSceneIndex) + currentScene.duration)})
              </div>
            </div>
          </div>
          
          {/* Playback Controls */}
          <div className="h-12 border-t border-gray-700 bg-gray-800 flex items-center px-4 space-x-4">
            <div className="flex items-center">
              <Button 
                variant="ghost" 
                size="icon" 
                className="text-white"
                onClick={goToPreviousScene}
                disabled={selectedSceneIndex === 0}
              >
                <ChevronLeft className="h-5 w-5" />
              </Button>
              
              <Button 
                variant="ghost" 
                size="icon" 
                className="text-white"
                onClick={() => setIsPlaying(!isPlaying)}
              >
                {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
              </Button>
              
              <Button 
                variant="ghost" 
                size="icon" 
                className="text-white"
                onClick={goToNextScene}
                disabled={selectedSceneIndex === scenes.length - 1}
              >
                <ChevronRight className="h-5 w-5" />
              </Button>
            </div>
            
            <div className="text-sm flex items-center space-x-2 text-gray-300">
              <span>{formatTime(currentTime)}</span>
              <span>/</span>
              <span>{formatTime(duration)}</span>
            </div>
            
            <div className="flex-1">
              <Slider 
                value={[currentTime]} 
                max={duration}
                step={0.1}
                onValueChange={(val) => setCurrentTime(val[0])}
                className="mt-0.5"
              />
            </div>
            
            <div className="flex items-center space-x-2">
              <Button 
                variant="ghost" 
                size="sm" 
                className="text-gray-300"
                onClick={() => setZoom(Math.max(0.5, zoom - 0.25))}
              >
                <ZoomOut className="h-4 w-4" />
              </Button>
              
              <span className="text-xs">{Math.round(zoom * 100)}%</span>
              
              <Button 
                variant="ghost" 
                size="sm" 
                className="text-gray-300"
                onClick={() => setZoom(Math.min(2, zoom + 0.25))}
              >
                <ZoomIn className="h-4 w-4" />
              </Button>
            </div>
          </div>
          
          {/* Timeline */}
          <div 
            ref={timelineRef}
            className="h-24 border-t border-gray-700 bg-gray-800 overflow-x-auto relative"
            onClick={handleTimelineClick}
          >
            <div 
              className="absolute top-0 left-0 h-full flex"
              style={{ width: `${100 * zoom}%` }}
            >
              {/* Time markers */}
              <div className="absolute top-0 left-0 right-0 h-5 flex">
                {Array.from({ length: Math.ceil(duration) + 1 }).map((_, i) => (
                  <div 
                    key={i} 
                    className="border-l border-gray-600 h-full flex items-center px-1 text-xs text-gray-500"
                    style={{ position: 'absolute', left: `${(i / duration) * 100}%` }}
                  >
                    {formatTime(i)}
                  </div>
                ))}
              </div>
              
              {/* Scene blocks */}
              <div className="absolute top-5 left-0 right-0 bottom-0">
                {scenes.map((scene, index) => {
                  const startPercent = (getSceneStartTime(index) / duration) * 100;
                  const widthPercent = (scene.duration / duration) * 100;
                  
                  return (
                    <div 
                      key={scene.id}
                      className={`
                        absolute h-16 cursor-pointer 
                        ${selectedSceneIndex === index ? 'ring-2 ring-blue-500' : ''}
                        hover:ring-1 hover:ring-blue-400
                      `}
                      style={{ 
                        left: `${startPercent}%`, 
                        width: `${widthPercent}%`,
                        background: scene.background,
                        borderRight: '1px solid rgba(0,0,0,0.3)',
                        borderRadius: '2px'
                      }}
                      onClick={(e) => {
                        e.stopPropagation();
                        setSelectedSceneIndex(index);
                      }}
                    >
                      <div className="p-1 text-xs text-white truncate overflow-hidden">
                        {scene.name}
                      </div>
                      <div className="absolute bottom-1 right-1 text-xs bg-black/50 px-1 rounded">
                        {scene.duration}s
                      </div>
                    </div>
                  );
                })}
              </div>
              
              {/* Playhead */}
              <div 
                className="absolute top-0 bottom-0 w-px bg-red-500 z-10"
                style={{ left: `${(currentTime / duration) * 100}%` }}
              >
                <div className="w-3 h-3 bg-red-500 -ml-1.5 -mt-0.5 rounded-full" />
              </div>
            </div>
          </div>
        </div>
      </div>
      
      {/* Scene Editor Dialog */}
      <Dialog open={showSceneEditor} onOpenChange={setShowSceneEditor}>
        <DialogContent className="bg-gray-800 text-white border-gray-700">
          <DialogHeader>
            <DialogTitle>Edit Scene</DialogTitle>
          </DialogHeader>
          
          {currentScene && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label className="text-white">Scene Name</Label>
                <Input 
                  value={currentScene.name} 
                  onChange={(e) => updateScene({ name: e.target.value })}
                  className="bg-gray-700 border-gray-600 text-white"
                />
              </div>
              
              <div className="space-y-2">
                <Label className="text-white">Duration (seconds)</Label>
                <div className="flex space-x-2">
                  <Input 
                    type="number" 
                    value={currentScene.duration}
                    onChange={(e) => updateScene({ duration: parseFloat(e.target.value) })}
                    className="bg-gray-700 border-gray-600 text-white"
                    min="1"
                    step="0.5"
                  />
                  <Button 
                    variant="outline" 
                    size="icon"
                    className="border-gray-600 text-white"
                    onClick={() => updateScene({ duration: currentScene.duration - 0.5 })}
                    disabled={currentScene.duration <= 1}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <Button 
                    variant="outline" 
                    size="icon"
                    className="border-gray-600 text-white"
                    onClick={() => updateScene({ duration: currentScene.duration + 0.5 })}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
              
              <div className="space-y-2">
                <Label className="text-white">Background</Label>
                <Select 
                  value="custom" 
                  onValueChange={(val) => {
                    if (val === "blue") {
                      updateScene({ background: "linear-gradient(120deg, #1e3c72, #2a5298)" });
                    } else if (val === "purple") {
                      updateScene({ background: "linear-gradient(120deg, #8E54E9, #4776E6)" });
                    } else if (val === "green") {
                      updateScene({ background: "linear-gradient(120deg, #11998e, #38ef7d)" });
                    } else if (val === "red") {
                      updateScene({ background: "linear-gradient(120deg, #c31432, #240b36)" });
                    }
                  }}
                >
                  <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                    <SelectValue placeholder="Choose background" />
                  </SelectTrigger>
                  <SelectContent className="bg-gray-800 border-gray-700 text-white">
                    <SelectItem value="blue">Blue Gradient</SelectItem>
                    <SelectItem value="purple">Purple Gradient</SelectItem>
                    <SelectItem value="green">Green Gradient</SelectItem>
                    <SelectItem value="red">Red Gradient</SelectItem>
                    <SelectItem value="custom">Custom</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              
              {currentScene.type === 'title' && (
                <>
                  <div className="space-y-2">
                    <Label className="text-white">Title</Label>
                    <Input 
                      value={currentScene.content.title} 
                      onChange={(e) => updateScene({ 
                        content: { ...currentScene.content, title: e.target.value } 
                      })}
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label className="text-white">Subtitle</Label>
                    <Input 
                      value={currentScene.content.subtitle} 
                      onChange={(e) => updateScene({ 
                        content: { ...currentScene.content, subtitle: e.target.value } 
                      })}
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>
                </>
              )}
              
              {currentScene.type === 'word' && (
                <>
                  <div className="space-y-2">
                    <Label className="text-white">Word</Label>
                    <Input 
                      value={currentScene.content.word} 
                      onChange={(e) => updateScene({ 
                        content: { ...currentScene.content, word: e.target.value } 
                      })}
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label className="text-white">Translation</Label>
                    <Input 
                      value={currentScene.content.translation} 
                      onChange={(e) => updateScene({ 
                        content: { ...currentScene.content, translation: e.target.value } 
                      })}
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label className="text-white">Example</Label>
                    <Input 
                      value={currentScene.content.example} 
                      onChange={(e) => updateScene({ 
                        content: { ...currentScene.content, example: e.target.value } 
                      })}
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>
                </>
              )}
              
              {currentScene.type === 'split' && (
                <>
                  <div className="space-y-2">
                    <Label className="text-white">Left Side Text</Label>
                    <Textarea 
                      value={currentScene.content.leftText} 
                      onChange={(e) => updateScene({ 
                        content: { ...currentScene.content, leftText: e.target.value } 
                      })}
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label className="text-white">Right Side Text</Label>
                    <Textarea 
                      value={currentScene.content.rightText} 
                      onChange={(e) => updateScene({ 
                        content: { ...currentScene.content, rightText: e.target.value } 
                      })}
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>
                </>
              )}
            </div>
          )}
          
          <DialogFooter>
            <Button 
              variant="outline" 
              onClick={() => setShowSceneEditor(false)}
              className="border-gray-600 text-white hover:bg-gray-700"
            >
              Cancel
            </Button>
            <Button 
              onClick={() => setShowSceneEditor(false)}
              className="bg-blue-600 text-white hover:bg-blue-700"
            >
              Save Changes
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      
      {/* Export Dialog */}
      <Dialog open={showExportDialog} onOpenChange={setShowExportDialog}>
        <DialogContent className="bg-gray-800 text-white border-gray-700">
          <DialogHeader>
            <DialogTitle>Export Video</DialogTitle>
          </DialogHeader>
          
          <div className="space-y-4">
            <div className="space-y-2">
              <Label className="text-white">Format</Label>
              <Select defaultValue="mp4">
                <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                  <SelectValue placeholder="Select format" />
                </SelectTrigger>
                <SelectContent className="bg-gray-800 border-gray-700 text-white">
                  <SelectItem value="mp4">MP4 (H.264)</SelectItem>
                  <SelectItem value="webm">WebM</SelectItem>
                  <SelectItem value="gif">GIF</SelectItem>
                </SelectContent>
              </Select>
            </div>
            
            <div className="space-y-2">
              <Label className="text-white">Resolution</Label>
              <Select defaultValue="1080p">
                <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                  <SelectValue placeholder="Select resolution" />
                </SelectTrigger>
                <SelectContent className="bg-gray-800 border-gray-700 text-white">
                  <SelectItem value="720p">720p</SelectItem>
                  <SelectItem value="1080p">1080p (Full HD)</SelectItem>
                  <SelectItem value="4k">4K (UHD)</SelectItem>
                </SelectContent>
              </Select>
            </div>
            
            <div className="space-y-2">
              <div className="flex justify-between">
                <Label className="text-white">Include Audio</Label>
                <Switch defaultChecked />
              </div>
            </div>
            
            {isExporting && (
              <div className="space-y-2">
                <Label className="text-white">Export Progress</Label>
                <Progress value={exportProgress} className="h-2" />
                <div className="text-sm text-center text-gray-400">
                  {exportProgress}% complete
                </div>
              </div>
            )}
          </div>
          
          <DialogFooter>
            <Button 
              variant="outline" 
              onClick={() => setShowExportDialog(false)}
              className="border-gray-600 text-white hover:bg-gray-700"
              disabled={isExporting}
            >
              Cancel
            </Button>
            <Button 
              onClick={exportVideo}
              className="bg-blue-600 text-white hover:bg-blue-700"
              disabled={isExporting}
            >
              {isExporting ? "Exporting..." : "Export Video"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      
      {/* Notification */}
      {notification && (
        <div className={`
          fixed bottom-4 right-4 px-4 py-2 rounded-md shadow-lg 
          transition-opacity duration-300 flex items-center
          ${notification.type === 'error' ? 'bg-red-800' : 'bg-gray-800'} text-white
        `}>
          {notification.type === 'error' ? (
            <AlertTriangle className="h-4 w-4 mr-2 text-red-400" />
          ) : (
            <CheckCircle className="h-4 w-4 mr-2 text-green-400" />
          )}
          {notification.message}
        </div>
      )}
    </div>
  );
};

export default VideoEditor;