import React, { useState, useEffect } from "react";
import { Stack, Box, Typography, Divider, Chip, alpha, CircularProgress, LinearProgress, IconButton, Tooltip } from "@mui/material";
import {
  EditNote as EditNoteIcon,
  CheckCircle as CheckCircleIcon,
  RadioButtonUnchecked as RadioButtonUncheckedIcon,
  VolumeUp as VolumeUpIcon,
  PlayArrow as PlayArrowIcon,
  Image as ImageIcon,
  Delete as DeleteIcon,
} from "@mui/icons-material";
import { Scene, Line, Knobs } from "../types";
import { GlassyCard, glassyCardSx, PrimaryButton } from "../ui";
import { LineEditor } from "./LineEditor";
import { ImageRegenerateModal, ImageGenerationSettings } from "./ImageRegenerateModal";
import { AudioRegenerateModal, AudioGenerationSettings } from "./AudioRegenerateModal";
import { podcastApi } from "../../../services/podcastApi";
import { aiApiClient } from "../../../api/client";
import { getCachedMedia, setCachedMedia } from "../../../utils/mediaCache";

interface SceneEditorProps {
  scene: Scene;
  onUpdateScene: (s: Scene) => void;
  onApprove: (id: string) => Promise<void>;
  onDelete: (sceneId: string) => void;
  knobs: Knobs;
  approvingSceneId?: string | null;
  generatingAudioId?: string | null;
  onAudioGenerationStart?: (sceneId: string) => void;
  onAudioGenerated?: (sceneId: string, audioUrl: string) => void;
  idea?: string; // Podcast idea for image generation context
  avatarUrl?: string | null; // Base avatar URL for consistent scene image generation
  totalScenes?: number; // Total number of scenes in the script
}

export const SceneEditor: React.FC<SceneEditorProps> = ({
  scene,
  onUpdateScene,
  onApprove,
  onDelete,
  knobs,
  approvingSceneId,
  generatingAudioId,
  onAudioGenerationStart,
  onAudioGenerated,
  idea,
  avatarUrl,
  totalScenes,
}) => {
  const [localGenerating, setLocalGenerating] = useState(false);
  const [generatingImage, setGeneratingImage] = useState(false);
  const [imageGenerationStatus, setImageGenerationStatus] = useState<string>("");
  const [imageGenerationProgress, setImageGenerationProgress] = useState<number>(0);
  const [audioBlobUrl, setAudioBlobUrl] = useState<string | null>(null);
  const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
  const [imageLoading, setImageLoading] = useState(false);
  const [showRegenerateModal, setShowRegenerateModal] = useState(false);
  const [showAudioModal, setShowAudioModal] = useState(false);
  const [audioSettings, setAudioSettings] = useState<AudioGenerationSettings>({
    voiceId: "Wise_Woman",
    speed: 1.0,
    volume: 1.0,
    pitch: 0.0,
    emotion: scene.emotion || "neutral",
    englishNormalization: true,
    sampleRate: 24000,
    bitrate: 64000,
    channel: "1",
    format: "mp3",
    languageBoost: "auto",
  });

  // Load audio as blob when audioUrl is available
  useEffect(() => {
    if (!scene.audioUrl) {
      // Clean up blob URL if audioUrl is removed
      setAudioBlobUrl((currentBlobUrl) => {
        if (currentBlobUrl) {
          URL.revokeObjectURL(currentBlobUrl);
        }
        return null;
      });
      return;
    }

    let isMounted = true;
    const currentAudioUrl = scene.audioUrl; // Capture current value

    const loadAudioBlob = async () => {
      try {
        // Normalize path
        let audioPath = currentAudioUrl.startsWith('/') ? currentAudioUrl : `/${currentAudioUrl}`;
        
        // Convert /api/story/audio/ to /api/podcast/audio/ if needed
        if (audioPath.includes('/api/story/audio/')) {
          const filename = audioPath.split('/api/story/audio/').pop() || '';
          audioPath = `/api/podcast/audio/${filename}`;
        }
        
        // Ensure it's a podcast audio endpoint
        if (!audioPath.includes('/api/podcast/audio/')) {
          const filename = audioPath.split('/').pop() || currentAudioUrl;
          audioPath = `/api/podcast/audio/${filename}`;
        }

        // Remove query parameters if present
        audioPath = audioPath.split('?')[0];

        const response = await aiApiClient.get(audioPath, {
          responseType: 'blob',
        });
        
        if (!isMounted) {
          // Component unmounted or audioUrl changed, don't set blob URL
          return;
        }
        
        // Double-check that audioUrl hasn't changed
        if (scene.audioUrl !== currentAudioUrl) {
          return;
        }
        
        const blob = response.data;
        const blobUrl = URL.createObjectURL(blob);
        
        setAudioBlobUrl((prevBlobUrl) => {
          // Clean up previous blob URL if exists
          if (prevBlobUrl && prevBlobUrl !== blobUrl) {
            URL.revokeObjectURL(prevBlobUrl);
          }
          return blobUrl;
        });
      } catch (error) {
        console.error(`Failed to load audio blob for scene ${scene.id}:`, error);
        // Don't set blob URL on error - will show error state
      }
    };

    loadAudioBlob();

    // Cleanup: only mark as unmounted, don't revoke blob URL here
    // The blob URL will be cleaned up when audioUrl changes (new effect) or component unmounts
    return () => {
      isMounted = false;
    };
  }, [scene.audioUrl, scene.id]);

  // Load image as blob when imageUrl is available
  useEffect(() => {
    if (!scene.imageUrl) {
      // Clean up blob URL if imageUrl is removed
      setImageBlobUrl((currentBlobUrl) => {
        if (currentBlobUrl && currentBlobUrl.startsWith('blob:')) {
          URL.revokeObjectURL(currentBlobUrl);
        }
        return null;
      });
      return;
    }

    // Check cache first with scene context
    const cachedUrl = getCachedMedia(scene.imageUrl, scene.id);
    if (cachedUrl) {
      console.log('[SceneEditor] Using cached image:', scene.imageUrl, `(scene: ${scene.id})`);
      setImageBlobUrl(cachedUrl);
      setImageLoading(false);
      return;
    }

    let isMounted = true;
    const currentImageUrl = scene.imageUrl; // Capture current value

    const loadImageBlob = async () => {
      try {
        setImageLoading(true);
        
        // Check cache again in case it was loaded while we were waiting
        const cachedUrl = getCachedMedia(currentImageUrl, scene.id);
        if (cachedUrl) {
          if (isMounted) {
            setImageBlobUrl(cachedUrl);
            setImageLoading(false);
          }
          return;
        }
        
        console.log('[SceneEditor] Loading image blob for:', currentImageUrl);
        
        // Normalize path
        let imagePath = currentImageUrl.startsWith('/') ? currentImageUrl : `/${currentImageUrl}`;
        
        // Convert /api/story/images/ to /api/podcast/images/ if needed
        if (imagePath.includes('/api/story/images/')) {
          const filename = imagePath.split('/api/story/images/').pop() || '';
          imagePath = `/api/podcast/images/${filename}`;
        }
        
        // Ensure it's a podcast image endpoint
        if (!imagePath.includes('/api/podcast/images/')) {
          const filename = imagePath.split('/').pop() || currentImageUrl;
          imagePath = `/api/podcast/images/${filename}`;
        }

        // Remove query parameters if present
        imagePath = imagePath.split('?')[0];

        const response = await aiApiClient.get(imagePath, {
          responseType: 'blob',
        });
        
        if (!isMounted) {
          return;
        }
        
        // Double-check that imageUrl hasn't changed
        if (scene.imageUrl !== currentImageUrl) {
          return;
        }
        
        const blob = response.data;
        const blobUrl = URL.createObjectURL(blob);
        
        // Cache the blob URL with scene context
        setCachedMedia(currentImageUrl, blobUrl, 'image', blob.size, scene.id);
        
        setImageBlobUrl((prevBlobUrl) => {
          // Clean up previous blob URL if exists
          if (prevBlobUrl && prevBlobUrl !== blobUrl && prevBlobUrl.startsWith('blob:')) {
            URL.revokeObjectURL(prevBlobUrl);
          }
          return blobUrl;
        });
        console.log('[SceneEditor] Image blob loaded and cached successfully:', currentImageUrl);
      } catch (error) {
        console.error('[SceneEditor] Failed to load image blob:', error);
        if (isMounted) {
          // Try adding query token as fallback
          try {
            const token = localStorage.getItem('clerk_dashboard_token') || '';
            if (token) {
              const urlWithToken = `${currentImageUrl}?token=${encodeURIComponent(token)}`;
              setImageBlobUrl(urlWithToken);
              setCachedMedia(currentImageUrl, urlWithToken, 'image', undefined, scene.id);
            }
          } catch (fallbackError) {
            console.error('[SceneEditor] Fallback image loading failed:', fallbackError);
          }
        }
      } finally {
        if (isMounted) {
          setImageLoading(false);
        }
      }
    };

    loadImageBlob();

    return () => {
      isMounted = false;
      // Don't cleanup blob URL here - let the cache handle it
    };
  }, [scene.imageUrl]);

  const updateLine = (updatedLine: Line) => {
    const updated = { ...scene, lines: scene.lines.map((l) => (l.id === updatedLine.id ? updatedLine : l)) };
    onUpdateScene(updated);
  };
  
  const approving = approvingSceneId === scene.id;
  const generating = generatingAudioId === scene.id || localGenerating;
  const hasAudio = Boolean(scene.audioUrl && audioBlobUrl);
  const hasImage = Boolean(scene.imageUrl);

  const handleApproveAndGenerate = async (settings?: AudioGenerationSettings) => {
    const wasAlreadyApproved = scene.approved;
    const sceneId = scene.id;
    
    try {
      // Set generating state
      setLocalGenerating(true);
      if (onAudioGenerationStart) {
        onAudioGenerationStart(sceneId);
      }

      // If scene is not approved yet, approve it first
      // This will update the parent script state
      if (!scene.approved) {
        await onApprove(sceneId);
        // The parent's approveScene already updated the script state
        // We need to wait for React to propagate the updated scene prop
        // For now, we'll update it locally too to ensure UI updates immediately
        onUpdateScene({ ...scene, approved: true });
      }

      // Use the current scene (which should now be approved)
      // If scene prop hasn't updated yet, use the local update we just made
      const currentScene = { ...scene, approved: true };
      
      // Generate audio
      const effectiveSettings = settings || audioSettings;
      const result = await podcastApi.renderSceneAudio({
        scene: currentScene,
        voiceId: effectiveSettings.voiceId || "Wise_Woman",
        emotion: effectiveSettings.emotion || scene.emotion || knobs.voice_emotion || "neutral",
        speed: effectiveSettings.speed ?? knobs.voice_speed ?? 1.0,
        volume: effectiveSettings.volume ?? 1.0,
        pitch: effectiveSettings.pitch ?? 0.0,
        englishNormalization: effectiveSettings.englishNormalization ?? true,
        sampleRate: effectiveSettings.sampleRate,
        bitrate: effectiveSettings.bitrate,
        channel: effectiveSettings.channel,
        format: effectiveSettings.format,
        languageBoost: effectiveSettings.languageBoost,
      });

      // Update scene with audio URL and ensure approved state
      // This will sync with parent script state
      const updatedScene = { ...currentScene, audioUrl: result.audioUrl, approved: true };
      onUpdateScene(updatedScene);
      
      if (onAudioGenerated) {
        onAudioGenerated(sceneId, result.audioUrl);
      }
    } catch (error) {
      console.error("Failed to approve and generate audio:", error);
      // On error, revert approval only if we just approved it in this call
      if (!wasAlreadyApproved) {
        onUpdateScene({ ...scene, approved: false, audioUrl: undefined });
      }
      throw error;
    } finally {
      setLocalGenerating(false);
    }
  };

  const handleGenerateImage = async (settings?: ImageGenerationSettings) => {
    const sceneId = scene.id;
    const startTime = Date.now();
    let progressInterval: NodeJS.Timeout | null = null;
    
    try {
      setGeneratingImage(true);
      setShowRegenerateModal(false);
      setImageGenerationStatus("Submitting image generation request...");
      setImageGenerationProgress(10);
      
      // Build scene content from lines for context
      const sceneContent = scene.lines.map((line) => line.text).join(" ");
      
      // Log avatar URL for debugging
      console.log("[SceneEditor] Generating image with avatarUrl:", avatarUrl);
      console.log("[SceneEditor] Custom settings:", settings);
      
      // Simulate progress updates during API call
      progressInterval = setInterval(() => {
        const elapsed = Date.now() - startTime;
        const seconds = Math.floor(elapsed / 1000);
        
        // Update status based on elapsed time
        if (seconds < 5) {
          setImageGenerationStatus("Submitting request to AI service...");
          setImageGenerationProgress(15);
        } else if (seconds < 15) {
          setImageGenerationStatus("AI is generating your image...");
          setImageGenerationProgress(30);
        } else if (seconds < 30) {
          setImageGenerationStatus("Creating character-consistent scene image...");
          setImageGenerationProgress(50);
        } else if (seconds < 60) {
          setImageGenerationStatus("Rendering image details...");
          setImageGenerationProgress(70);
        } else {
          setImageGenerationStatus(`Processing... (${seconds}s elapsed)`);
          setImageGenerationProgress(Math.min(90, 50 + (seconds - 30) / 2));
        }
      }, 1000);
      
      const result = await podcastApi.generateSceneImage({
        sceneId: scene.id,
        sceneTitle: scene.title,
        sceneContent: sceneContent,
        baseAvatarUrl: avatarUrl || undefined, // Pass base avatar URL for character consistency
        idea: idea,
        width: 1024,
        height: 1024,
        // Pass custom settings if provided
        customPrompt: settings?.prompt,
        style: settings?.style,
        renderingSpeed: settings?.renderingSpeed,
        aspectRatio: settings?.aspectRatio,
      });
      
      if (progressInterval) {
        clearInterval(progressInterval);
        progressInterval = null;
      }
      
      setImageGenerationStatus("Finalizing image...");
      setImageGenerationProgress(95);
      
      // Update scene with image URL
      const updatedScene = { ...scene, imageUrl: result.image_url };
      onUpdateScene(updatedScene);
      
      const elapsed = Math.floor((Date.now() - startTime) / 1000);
      setImageGenerationStatus(`Image generated successfully in ${elapsed}s`);
      setImageGenerationProgress(100);
      
      // Clear status after a moment
      setTimeout(() => {
        setImageGenerationStatus("");
        setImageGenerationProgress(0);
      }, 2000);
    } catch (error: any) {
      // Clear interval on error
      if (progressInterval) {
        clearInterval(progressInterval);
        progressInterval = null;
      }
      
      console.error("Failed to generate image:", error);
      // Extract error message from response if available
      const errorMessage = error?.response?.data?.detail?.message 
        || error?.response?.data?.detail?.error 
        || error?.response?.data?.detail 
        || error?.message 
        || "Failed to generate image. Please try again.";
      console.error("Error details:", {
        status: error?.response?.status,
        statusText: error?.response?.statusText,
        data: error?.response?.data,
        message: errorMessage,
      });
      
      setImageGenerationStatus(`Error: ${errorMessage}`);
      setImageGenerationProgress(0);
      
      // Show user-friendly error message
      alert(`Image generation failed: ${errorMessage}`);
      throw error;
    } finally {
      // Ensure interval is cleared
      if (progressInterval) {
        clearInterval(progressInterval);
      }
      setGeneratingImage(false);
    }
  };

  const handleRegenerateClick = () => {
    setShowRegenerateModal(true);
  };

  const handleAudioRegenerateClick = () => {
    if (hasAudio) {
      setShowAudioModal(true);
    } else {
      handleApproveAndGenerate(audioSettings);
    }
  };

  const handleAudioRegenerate = (settings: AudioGenerationSettings) => {
    setAudioSettings(settings);
    setShowAudioModal(false);
    handleApproveAndGenerate(settings);
  };

  return (
    <GlassyCard sx={glassyCardSx}>
      <Stack spacing={2.5}>
        <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
          <Box sx={{ flex: 1 }}>
            <Typography 
              variant="h6" 
              sx={{ 
                display: "flex", 
                alignItems: "center", 
                gap: 1.5, 
                mb: 1, 
                color: "#0f172a", 
                fontWeight: 600,
                fontSize: "1.25rem",
                letterSpacing: "-0.01em",
              }}
            >
              <EditNoteIcon fontSize="small" sx={{ color: "#667eea", fontSize: "1.5rem" }} />
              {scene.title}
            </Typography>
            <Stack direction="row" spacing={1.5} alignItems="center" flexWrap="wrap">
              <Chip
                icon={scene.approved ? <CheckCircleIcon /> : <RadioButtonUncheckedIcon />}
                label={scene.approved ? "Approved" : "Pending Approval"}
                size="small"
                color={scene.approved ? "success" : "warning"}
                sx={{
                  background: scene.approved 
                    ? "linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%)"
                    : "linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.12) 100%)",
                  color: scene.approved ? "#059669" : "#d97706",
                  border: scene.approved 
                    ? "1px solid rgba(16, 185, 129, 0.25)" 
                    : "1px solid rgba(245, 158, 11, 0.25)",
                  fontWeight: 600,
                  fontSize: "0.75rem",
                  height: 26,
                  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
                }}
              />
              <Typography variant="caption" sx={{ color: "#64748b", fontWeight: 500, fontSize: "0.8125rem" }}>
                Duration: {scene.duration}s
              </Typography>
            </Stack>
          </Box>
          <Stack direction="row" spacing={1.5} flexWrap="wrap" useFlexGap>
            <PrimaryButton
              onClick={handleAudioRegenerateClick}
              disabled={approving || generating}
              loading={approving || generating}
              startIcon={
                hasAudio && !generating ? (
                  <VolumeUpIcon />
                ) : generating ? (
                  <CircularProgress size={16} sx={{ color: "white" }} />
                ) : (
                  <PlayArrowIcon />
                )
              }
              tooltip={
                hasAudio && !generating
                  ? "Regenerate audio for this scene with custom settings"
                  : generating
                  ? "Generating audio..."
                  : scene.approved
                  ? "Generate audio for this scene"
                  : "Approve scene and generate audio"
              }
              sx={{
                minWidth: 200,
              }}
            >
              {hasAudio && !generating
                ? "Regenerate Audio"
                : generating
                ? "Generating Audio..."
                : scene.approved
                ? "Generate Audio"
                : "Approve & Generate Audio"}
            </PrimaryButton>
            <PrimaryButton
              onClick={hasImage ? handleRegenerateClick : () => handleGenerateImage()}
              disabled={generatingImage}
              loading={generatingImage}
              startIcon={
                hasImage && !generatingImage ? (
                  <ImageIcon />
                ) : generatingImage ? (
                  <CircularProgress size={16} sx={{ color: "white" }} />
                ) : (
                  <ImageIcon />
                )
              }
              tooltip={
                hasImage
                  ? "Regenerate image for this scene"
                  : generatingImage
                  ? "Generating image..."
                  : "Generate image for video (optional)"
              }
              sx={{
                minWidth: 180,
                background: hasImage 
                  ? "linear-gradient(135deg, #10b981 0%, #059669 100%)"
                  : "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
                "&:hover": {
                  background: hasImage
                    ? "linear-gradient(135deg, #059669 0%, #047857 100%)"
                    : "linear-gradient(135deg, #764ba2 0%, #667eea 100%)",
                },
              }}
            >
              {hasImage && !generatingImage
                ? "Regenerate Image"
                : generatingImage
                ? "Generating Image..."
                : "Generate Image"}
            </PrimaryButton>
            
            <Tooltip title={totalScenes && totalScenes <= 1 ? "Cannot delete the last scene" : "Delete this scene"}>
              <IconButton
                onClick={() => onDelete(scene.id)}
                disabled={approving || generating || (totalScenes !== undefined && totalScenes <= 1)}
                sx={{
                  color: "#ef4444",
                  backgroundColor: "rgba(239, 68, 68, 0.1)",
                  border: "1px solid rgba(239, 68, 68, 0.2)",
                  borderRadius: 2,
                  padding: 1.5,
                  "&:hover": {
                    backgroundColor: "rgba(239, 68, 68, 0.15)",
                    borderColor: "rgba(239, 68, 68, 0.3)",
                  },
                  "&:disabled": {
                    backgroundColor: "rgba(156, 163, 175, 0.1)",
                    borderColor: "rgba(156, 163, 175, 0.2)",
                    color: "#9ca3af",
                  },
                }}
              >
                <DeleteIcon sx={{ fontSize: "1.25rem" }} />
              </IconButton>
            </Tooltip>
          </Stack>
        </Stack>

        <Divider sx={{ borderColor: "rgba(15, 23, 42, 0.08)", borderWidth: 1 }} />

        <Stack spacing={2}>
          {scene.lines.map((line) => (
            <LineEditor key={line.id} line={line} onChange={updateLine} />
          ))}
        </Stack>

        {scene.audioUrl && (
          <>
            <Divider sx={{ borderColor: "rgba(15, 23, 42, 0.08)", borderWidth: 1, mt: 1 }} />
            <Box
              sx={{
                p: 2,
                background: hasAudio
                  ? "linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%)"
                  : "linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.08) 100%)",
                borderRadius: 2,
                border: hasAudio
                  ? "1px solid rgba(16, 185, 129, 0.2)"
                  : "1px solid rgba(245, 158, 11, 0.2)",
              }}
            >
              <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1.5 }}>
                <VolumeUpIcon sx={{ color: hasAudio ? "#059669" : "#d97706", fontSize: "1.25rem" }} />
                <Typography variant="subtitle2" sx={{ color: hasAudio ? "#059669" : "#d97706", fontWeight: 600 }}>
                  {hasAudio ? "Audio Generated" : "Loading Audio..."}
                </Typography>
              </Stack>
              {hasAudio && audioBlobUrl ? (
                <audio controls style={{ width: "100%", borderRadius: 8 }}>
                  <source src={audioBlobUrl} type="audio/mpeg" />
                  Your browser does not support the audio element.
                </audio>
              ) : (
                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", py: 2 }}>
                  <CircularProgress size={24} sx={{ color: "#d97706" }} />
                </Box>
              )}
            </Box>
          </>
        )}

        {/* Image Generation Progress - Show when generating */}
        {generatingImage && (
          <>
            <Divider sx={{ borderColor: "rgba(15, 23, 42, 0.08)", borderWidth: 1, mt: 1 }} />
            <Box
              sx={{
                p: 2,
                background: "linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)",
                borderRadius: 2,
                border: "1px solid rgba(102, 126, 234, 0.2)",
              }}
            >
              <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1.5 }}>
                <ImageIcon sx={{ color: "#667eea", fontSize: "1.25rem" }} />
                <Typography variant="subtitle2" sx={{ color: "#667eea", fontWeight: 600 }}>
                  Generating Image...
                </Typography>
              </Stack>
              
              {/* Progress Bar */}
              <Box sx={{ mb: 1.5 }}>
                <LinearProgress 
                  variant="determinate" 
                  value={imageGenerationProgress} 
                  sx={{ 
                    height: 8, 
                    borderRadius: 4,
                    backgroundColor: alpha("#667eea", 0.1),
                    "& .MuiLinearProgress-bar": {
                      backgroundColor: "#667eea",
                      borderRadius: 4,
                    }
                  }} 
                />
                <Typography variant="caption" sx={{ color: "#667eea", mt: 0.5, display: "block", textAlign: "right" }}>
                  {imageGenerationProgress}%
                </Typography>
              </Box>
              
              {/* Status Message */}
              {imageGenerationStatus && (
                <Typography variant="body2" sx={{ color: "#667eea", fontSize: "0.875rem", lineHeight: 1.6, mb: 1 }}>
                  {imageGenerationStatus}
                </Typography>
              )}
              
              {/* Spinner */}
              <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", mt: 1 }}>
                <CircularProgress size={32} sx={{ color: "#667eea" }} />
              </Box>
            </Box>
          </>
        )}

        {/* Generated Image Display - Show when image exists and not generating */}
        {scene.imageUrl && !generatingImage && (
          <>
            <Divider sx={{ borderColor: "rgba(15, 23, 42, 0.08)", borderWidth: 1, mt: 1 }} />
            <Box
              sx={{
                p: 2,
                background: imageBlobUrl && !imageLoading
                  ? "linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)"
                  : "linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.08) 100%)",
                borderRadius: 2,
                border: imageBlobUrl && !imageLoading
                  ? "1px solid rgba(102, 126, 234, 0.2)"
                  : "1px solid rgba(245, 158, 11, 0.2)",
              }}
            >
              <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1.5 }}>
                <ImageIcon sx={{ color: imageBlobUrl && !imageLoading ? "#667eea" : "#d97706", fontSize: "1.25rem" }} />
                <Typography variant="subtitle2" sx={{ color: imageBlobUrl && !imageLoading ? "#667eea" : "#d97706", fontWeight: 600 }}>
                  {imageBlobUrl && !imageLoading ? "Image Generated" : "Loading Image..."}
                </Typography>
              </Stack>
              {imageBlobUrl && !imageLoading ? (
                <Box
                  sx={{
                    width: "100%",
                    borderRadius: 2,
                    overflow: "hidden",
                    border: "1px solid rgba(102,126,234,0.2)",
                    background: alpha("#667eea", 0.05),
                  }}
                >
                  <Box
                    component="img"
                    src={imageBlobUrl}
                    alt={scene.title}
                    sx={{
                      width: "100%",
                      height: "auto",
                      display: "block",
                      maxHeight: 400,
                      objectFit: "cover",
                    }}
                    onError={(e) => {
                      console.error('[SceneEditor] Image failed to load:', {
                        src: e.currentTarget.src,
                        imageUrl: scene.imageUrl,
                        imageBlobUrl,
                      });
                    }}
                    onLoad={() => {
                      console.log('[SceneEditor] Image loaded successfully');
                    }}
                  />
                </Box>
              ) : (
                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", py: 2 }}>
                  <CircularProgress size={24} sx={{ color: "#d97706" }} />
                </Box>
              )}
            </Box>
          </>
        )}
      </Stack>

      {/* Image Regeneration Modal */}
      <ImageRegenerateModal
        open={showRegenerateModal}
        onClose={() => setShowRegenerateModal(false)}
        onRegenerate={handleGenerateImage}
        initialPrompt={(() => {
          const promptParts = [
            `Scene: ${scene.title}`,
            "Professional podcast recording studio",
            "Modern microphone setup",
            "Clean background, professional lighting",
            "16:9 aspect ratio, video-optimized composition"
          ];
          if (idea) {
            promptParts.push(`Topic: ${idea.substring(0, 60)}`);
          }
          return promptParts.join(", ");
        })()}
        initialStyle="Realistic"
        initialRenderingSpeed="Quality"
        initialAspectRatio="16:9"
        isGenerating={generatingImage}
      />

      <AudioRegenerateModal
        open={showAudioModal}
        onClose={() => setShowAudioModal(false)}
        onRegenerate={handleAudioRegenerate}
        initialSettings={audioSettings}
        isGenerating={generating}
      />
    </GlassyCard>
  );
};