import {
  BaseBoxShapeUtil,
  Geometry2d,
  HTMLContainer,
  Rectangle2d,
  TLBaseShape,
} from "tldraw"
import React, { useState } from "react"
import { getRunPodConfig } from "@/lib/clientConfig"
import { aiOrchestrator, isAIOrchestratorAvailable } from "@/lib/aiOrchestrator"
import { StandardizedToolWrapper } from "@/components/StandardizedToolWrapper"
import { usePinnedToView } from "@/hooks/usePinnedToView"
import { useMaximize } from "@/hooks/useMaximize"

// Feature flag: Set to false when AI Orchestrator or RunPod API is ready for production
const USE_MOCK_API = false

// Type definition for RunPod API responses
interface RunPodJobResponse {
  id?: string
  status?: 'IN_QUEUE' | 'IN_PROGRESS' | 'STARTING' | 'COMPLETED' | 'FAILED' | 'CANCELLED'
  output?: string | {
    image?: string
    url?: string
    images?: Array<{ data?: string; url?: string; filename?: string; type?: string }>
    result?: string
    [key: string]: any
  }
  error?: string
  image?: string
  url?: string
  result?: string | {
    image?: string
    url?: string
    [key: string]: any
  }
  [key: string]: any
}

// Individual image entry in the history
interface GeneratedImage {
  id: string
  prompt: string
  imageUrl: string
  timestamp: number
}

type IImageGen = TLBaseShape<
  "ImageGen",
  {
    w: number
    h: number
    prompt: string
    imageHistory: GeneratedImage[] // Thread of all generated images (newest first)
    isLoading: boolean
    loadingPrompt: string | null // The prompt currently being generated
    error: string | null
    endpointId?: string // Optional custom endpoint ID
    tags: string[]
    pinnedToView: boolean
  }
>

// Helper function to poll RunPod job status until completion
async function pollRunPodJob(
  jobId: string,
  apiKey: string,
  endpointId: string,
  maxAttempts: number = 60,
  pollInterval: number = 2000
): Promise<string> {
  const statusUrl = `https://api.runpod.ai/v2/${endpointId}/status/${jobId}`
  console.log('🔄 ImageGen: Polling job:', jobId)
  
  for (let attempt = 0; attempt < maxAttempts; attempt++) {
    try {
      const response = await fetch(statusUrl, {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${apiKey}`
        }
      })

      if (!response.ok) {
        const errorText = await response.text()
        console.error(`❌ ImageGen: Poll error (attempt ${attempt + 1}/${maxAttempts}):`, response.status, errorText)
        throw new Error(`Failed to check job status: ${response.status} - ${errorText}`)
      }

      const data = await response.json() as RunPodJobResponse
      console.log(`🔄 ImageGen: Poll attempt ${attempt + 1}/${maxAttempts}, status:`, data.status)
      console.log(`📋 ImageGen: Full response data:`, JSON.stringify(data, null, 2))
      
      if (data.status === 'COMPLETED') {
        console.log('✅ ImageGen: Job completed, processing output...')
        
        // Extract image URL from various possible response formats
        let imageUrl = ''
        
        // Check if output exists at all
        if (!data.output) {
          // Only retry 2-3 times, then proceed to check alternatives
          if (attempt < 3) {
            console.log(`⏳ ImageGen: COMPLETED but no output yet, waiting briefly (attempt ${attempt + 1}/3)...`)
            await new Promise(resolve => setTimeout(resolve, 500))
            continue
          }
          
          // Try alternative ways to get the output - maybe it's at the top level
          console.log('⚠️ ImageGen: No output field found, checking for alternative response formats...')
          console.log('📋 ImageGen: All available fields:', Object.keys(data))
          
          // Check if image data is at top level
          if (data.image) {
            imageUrl = data.image
            console.log('✅ ImageGen: Found image at top level')
          } else if (data.url) {
            imageUrl = data.url
            console.log('✅ ImageGen: Found url at top level')
          } else if (data.result) {
            // Some endpoints return result instead of output
            if (typeof data.result === 'string') {
              imageUrl = data.result
            } else if (data.result.image) {
              imageUrl = data.result.image
            } else if (data.result.url) {
              imageUrl = data.result.url
            }
            console.log('✅ ImageGen: Found result field')
          } else {
            // Last resort: try to fetch output via stream endpoint (some RunPod endpoints use this)
            console.log('⚠️ ImageGen: Trying alternative endpoint to retrieve output...')
            try {
              const streamUrl = `https://api.runpod.ai/v2/${endpointId}/stream/${jobId}`
              const streamResponse = await fetch(streamUrl, {
                method: 'GET',
                headers: {
                  'Authorization': `Bearer ${apiKey}`
                }
              })
              
              if (streamResponse.ok) {
                const streamData = await streamResponse.json() as RunPodJobResponse
                console.log('📥 ImageGen: Stream endpoint response:', JSON.stringify(streamData, null, 2))
                
                if (streamData.output) {
                  if (typeof streamData.output === 'string') {
                    imageUrl = streamData.output
                  } else if (streamData.output.image) {
                    imageUrl = streamData.output.image
                  } else if (streamData.output.url) {
                    imageUrl = streamData.output.url
                  } else if (Array.isArray(streamData.output.images) && streamData.output.images.length > 0) {
                    const firstImage = streamData.output.images[0]
                    if (firstImage.data) {
                      imageUrl = firstImage.data.startsWith('data:') ? firstImage.data : `data:image/${firstImage.type || 'png'};base64,${firstImage.data}`
                    } else if (firstImage.url) {
                      imageUrl = firstImage.url
                    }
                  }
                  
                  if (imageUrl) {
                    console.log('✅ ImageGen: Found image URL via stream endpoint')
                    return imageUrl
                  }
                }
              }
            } catch (streamError) {
              console.log('⚠️ ImageGen: Stream endpoint not available or failed:', streamError)
            }
            
            console.error('❌ ImageGen: Job completed but no output field in response after retries:', JSON.stringify(data, null, 2))
            throw new Error(
              'Job completed but no output data found.\n\n' +
              'Possible issues:\n' +
              '1. The RunPod endpoint handler may not be returning output correctly\n' +
              '2. Check the endpoint handler logs in RunPod console\n' +
              '3. Verify the handler returns: { output: { image: "url" } } or { output: "url" }\n' +
              '4. For ComfyUI workers, ensure output.images array is returned\n' +
              '5. The endpoint may need to be reconfigured\n\n' +
              'Response received: ' + JSON.stringify(data, null, 2)
            )
          }
        } else {
          // Extract image URL from various possible response formats
          if (typeof data.output === 'string') {
            imageUrl = data.output
          } else if (data.output?.image) {
            imageUrl = data.output.image
          } else if (data.output?.url) {
            imageUrl = data.output.url
          } else if (data.output?.output) {
            // Handle nested output structure
            if (typeof data.output.output === 'string') {
              imageUrl = data.output.output
            } else if (data.output.output?.image) {
              imageUrl = data.output.output.image
            } else if (data.output.output?.url) {
              imageUrl = data.output.output.url
            }
          } else if (Array.isArray(data.output) && data.output.length > 0) {
            // Handle array responses
            const firstItem = data.output[0]
            if (typeof firstItem === 'string') {
              imageUrl = firstItem
            } else if (firstItem.image) {
              imageUrl = firstItem.image
            } else if (firstItem.url) {
              imageUrl = firstItem.url
            }
          } else if (!Array.isArray(data.output) && data.output?.result) {
            // Some formats nest result inside output
            const outputObj = data.output as { result?: string | { image?: string; url?: string } }
            if (typeof outputObj.result === 'string') {
              imageUrl = outputObj.result
            } else if (outputObj.result?.image) {
              imageUrl = outputObj.result.image
            } else if (outputObj.result?.url) {
              imageUrl = outputObj.result.url
            }
          } else if (!Array.isArray(data.output) && data.output?.images && Array.isArray(data.output.images) && data.output.images.length > 0) {
            // ComfyUI worker format: { output: { images: [{ filename, type, data }] } }
            const outputObj = data.output as { images: Array<{ data?: string; url?: string; type?: string; filename?: string }> }
            const firstImage = outputObj.images[0]
            if (firstImage.data) {
              // Base64 encoded image
              if (firstImage.data.startsWith('data:image')) {
                imageUrl = firstImage.data
              } else if (firstImage.data.startsWith('http')) {
                imageUrl = firstImage.data
              } else {
                // Assume base64 without prefix
                imageUrl = `data:image/${firstImage.type || 'png'};base64,${firstImage.data}`
              }
              console.log('✅ ImageGen: Found image in ComfyUI format (images array)')
            } else if (firstImage.url) {
              imageUrl = firstImage.url
              console.log('✅ ImageGen: Found image URL in ComfyUI format')
            } else if (firstImage.filename) {
              // Try to construct URL from filename (may need endpoint-specific handling)
              console.log('⚠️ ImageGen: Found filename but no URL, filename:', firstImage.filename)
            }
          }
        }
        
        if (!imageUrl || imageUrl.trim() === '') {
          console.error('❌ ImageGen: No image URL found in response:', JSON.stringify(data, null, 2))
          throw new Error(
            'Job completed but no image URL found in output.\n\n' +
            'Expected formats:\n' +
            '- { output: "https://..." }\n' +
            '- { output: { image: "https://..." } }\n' +
            '- { output: { url: "https://..." } }\n' +
            '- { output: ["https://..."] }\n\n' +
            'Received: ' + JSON.stringify(data, null, 2)
          )
        }
        
        return imageUrl
      }
      
      if (data.status === 'FAILED') {
        console.error('❌ ImageGen: Job failed:', data.error || 'Unknown error')
        throw new Error(`Job failed: ${data.error || 'Unknown error'}`)
      }
      
      // Wait before next poll
      await new Promise(resolve => setTimeout(resolve, pollInterval))
    } catch (error) {
      // If we get COMPLETED status without output, don't retry - fail immediately
      const errorMessage = error instanceof Error ? error.message : String(error)
      if (errorMessage.includes('no output') || errorMessage.includes('no image URL')) {
        console.error('❌ ImageGen: Stopping polling due to missing output data')
        throw error
      }
      
      // For other errors, retry up to maxAttempts
      if (attempt === maxAttempts - 1) {
        throw error
      }
      await new Promise(resolve => setTimeout(resolve, pollInterval))
    }
  }
  
  throw new Error('Job polling timed out')
}

export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
  static override type = "ImageGen" as const

  // Image generation theme color: Blue
  static readonly PRIMARY_COLOR = "#007AFF"

  MIN_WIDTH = 300 as const
  MIN_HEIGHT = 300 as const
  DEFAULT_WIDTH = 400 as const
  DEFAULT_HEIGHT = 400 as const

  getDefaultProps(): IImageGen["props"] {
    return {
      w: this.DEFAULT_WIDTH,
      h: this.DEFAULT_HEIGHT,
      prompt: "",
      imageHistory: [],
      isLoading: false,
      loadingPrompt: null,
      error: null,
      tags: ['image', 'ai-generated'],
      pinnedToView: false,
    }
  }

  getGeometry(shape: IImageGen): Geometry2d {
    // Ensure minimum dimensions for proper hit testing
    return new Rectangle2d({
      width: Math.max(shape.props.w, 1),
      height: Math.max(shape.props.h, 1),
      isFilled: true,
    })
  }

  component(shape: IImageGen) {
    // Capture editor reference to avoid stale 'this' during drag operations
    const editor = this.editor
    const isSelected = editor.getSelectedShapeIds().includes(shape.id)

    // Pin to view functionality
    usePinnedToView(editor, shape.id, shape.props.pinnedToView)

    // Use the maximize hook for fullscreen functionality
    const { isMaximized, toggleMaximize } = useMaximize({
      editor: editor,
      shapeId: shape.id,
      currentW: shape.props.w,
      currentH: shape.props.h,
      shapeType: 'ImageGen',
    })

    const handlePinToggle = () => {
      editor.updateShape<IImageGen>({
        id: shape.id,
        type: "ImageGen",
        props: { pinnedToView: !shape.props.pinnedToView },
      })
    }

    const generateImage = async (prompt: string) => {
      console.log("🎨 ImageGen: Generating image with prompt:", prompt)

      // Store the prompt being used and clear any previous errors
      editor.updateShape<IImageGen>({
        id: shape.id,
        type: "ImageGen",
        props: {
          error: null,
          isLoading: true,
          loadingPrompt: prompt
        },
      })

      try {
        // Get RunPod configuration
        const runpodConfig = getRunPodConfig()
        const endpointId = shape.props.endpointId || runpodConfig?.endpointId || "tzf1j3sc3zufsy"
        const apiKey = runpodConfig?.apiKey

        // Mock API mode: Return placeholder image without calling RunPod
        if (USE_MOCK_API) {
          console.log("🎭 ImageGen: Using MOCK API mode (no real RunPod call)")
          console.log("🎨 ImageGen: Mock prompt:", prompt)

          // Simulate API delay
          await new Promise(resolve => setTimeout(resolve, 1500))

          // Use a placeholder image service
          const mockImageUrl = `https://via.placeholder.com/512x512/4F46E5/FFFFFF?text=${encodeURIComponent(prompt.substring(0, 30))}`

          console.log("✅ ImageGen: Mock image generated:", mockImageUrl)

          // Get current shape to access existing history
          const currentShape = editor.getShape<IImageGen>(shape.id)
          const currentHistory = currentShape?.props.imageHistory || []

          // Create new image entry
          const newImage: GeneratedImage = {
            id: `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
            prompt: prompt,
            imageUrl: mockImageUrl,
            timestamp: Date.now()
          }

          editor.updateShape<IImageGen>({
            id: shape.id,
            type: "ImageGen",
            props: {
              imageHistory: [newImage, ...currentHistory], // Prepend new image
              isLoading: false,
              loadingPrompt: null,
              error: null
            },
          })

          return
        }

        // Real API mode: Use RunPod
        if (!apiKey) {
          throw new Error("RunPod API key not configured. Please set VITE_RUNPOD_API_KEY environment variable.")
        }

        // Use runsync for synchronous execution - returns output directly without polling
        const url = `https://api.runpod.ai/v2/${endpointId}/runsync`

        console.log("📤 ImageGen: Sending request to:", url)

        const response = await fetch(url, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${apiKey}`
          },
          body: JSON.stringify({
            input: {
              prompt: prompt
            }
          })
        })

        if (!response.ok) {
          const errorText = await response.text()
          console.error("❌ ImageGen: Error response:", errorText)
          throw new Error(`HTTP error! status: ${response.status} - ${errorText}`)
        }

        const data = await response.json() as RunPodJobResponse
        console.log("📥 ImageGen: Response data:", JSON.stringify(data, null, 2).substring(0, 500) + '...')

        // With runsync, we get the output directly (no polling needed)
        if (data.output) {
          let imageUrl = ''

          // Handle output.images array format (Automatic1111 endpoint format)
          if (typeof data.output === 'object' && !Array.isArray(data.output) && data.output.images && Array.isArray(data.output.images) && data.output.images.length > 0) {
            const outputObj = data.output as { images: Array<{ data?: string; url?: string } | string> }
            const firstImage = outputObj.images[0]
            // Base64 encoded image string
            if (typeof firstImage === 'string') {
              imageUrl = firstImage.startsWith('data:') ? firstImage : `data:image/png;base64,${firstImage}`
              console.log('✅ ImageGen: Found base64 image in output.images array')
            } else if (firstImage.data) {
              imageUrl = firstImage.data.startsWith('data:') ? firstImage.data : `data:image/png;base64,${firstImage.data}`
            } else if (firstImage.url) {
              imageUrl = firstImage.url
            }
          } else if (typeof data.output === 'string') {
            imageUrl = data.output
          } else if (!Array.isArray(data.output) && data.output.image) {
            imageUrl = data.output.image
          } else if (!Array.isArray(data.output) && data.output.url) {
            imageUrl = data.output.url
          } else if (Array.isArray(data.output) && data.output.length > 0) {
            const firstItem = data.output[0]
            if (typeof firstItem === 'string') {
              imageUrl = firstItem.startsWith('data:') ? firstItem : `data:image/png;base64,${firstItem}`
            } else if (firstItem.image) {
              imageUrl = firstItem.image
            } else if (firstItem.url) {
              imageUrl = firstItem.url
            }
          }

          if (imageUrl) {
            console.log('✅ ImageGen: Image generated successfully')

            // Get current shape to access existing history
            const currentShape = editor.getShape<IImageGen>(shape.id)
            const currentHistory = currentShape?.props.imageHistory || []

            // Create new image entry
            const newImage: GeneratedImage = {
              id: `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
              prompt: prompt,
              imageUrl: imageUrl,
              timestamp: Date.now()
            }

            editor.updateShape<IImageGen>({
              id: shape.id,
              type: "ImageGen",
              props: {
                imageHistory: [newImage, ...currentHistory], // Prepend new image
                isLoading: false,
                loadingPrompt: null,
                error: null
              },
            })
          } else {
            throw new Error("No image URL found in response output")
          }
        } else if (data.error) {
          throw new Error(`RunPod API error: ${data.error}`)
        } else if (data.status) {
          // Handle RunPod status responses (no output yet)
          const status = data.status.toUpperCase()
          if (status === 'IN_PROGRESS' || status === 'IN_QUEUE') {
            throw new Error(`Image generation timed out (status: ${data.status}). The GPU may be experiencing a cold start. Please try again in a moment.`)
          } else if (status === 'FAILED') {
            throw new Error(`RunPod job failed: ${data.error || 'Unknown error'}`)
          } else if (status === 'CANCELLED') {
            throw new Error('Image generation was cancelled')
          } else {
            throw new Error(`Unexpected RunPod status: ${data.status}`)
          }
        } else {
          // Log full response for debugging
          console.error("❌ ImageGen: Unexpected response structure:", JSON.stringify(data, null, 2))
          throw new Error("No valid response from RunPod API - missing output field. Check console for details.")
        }
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : String(error)
        console.error("❌ ImageGen: Error:", errorMessage)
        
        let userFriendlyError = ''
        
        if (errorMessage.includes('API key not configured')) {
          userFriendlyError = '❌ RunPod API key not configured. Please set VITE_RUNPOD_API_KEY environment variable.'
        } else if (errorMessage.includes('401') || errorMessage.includes('403') || errorMessage.includes('Unauthorized')) {
          userFriendlyError = '❌ API key authentication failed. Please check your RunPod API key.'
        } else if (errorMessage.includes('404')) {
          userFriendlyError = '❌ Endpoint not found. Please check your endpoint ID.'
        } else if (errorMessage.includes('no output data found') || errorMessage.includes('no image URL found')) {
          // For multi-line error messages, show a concise version in the UI
          // The full details are already in the console
          userFriendlyError = '❌ Image generation completed but no image data was returned.\n\n' +
            'This usually means the RunPod endpoint handler is not configured correctly.\n\n' +
            'Please check:\n' +
            '1. RunPod endpoint handler logs\n' +
            '2. Handler returns: { output: { image: "url" } }\n' +
            '3. See browser console for full details'
        } else {
          // Truncate very long error messages for UI display
          const maxLength = 500
          if (errorMessage.length > maxLength) {
            userFriendlyError = `❌ Error: ${errorMessage.substring(0, maxLength)}...\n\n(Full error in console)`
          } else {
            userFriendlyError = `❌ Error: ${errorMessage}`
          }
        }
        
        editor.updateShape<IImageGen>({
          id: shape.id,
          type: "ImageGen",
          props: {
            isLoading: false,
            loadingPrompt: null,
            error: userFriendlyError
          },
        })
      }
    }

    const handleGenerate = () => {
      if (shape.props.prompt.trim() && !shape.props.isLoading) {
        generateImage(shape.props.prompt)
        editor.updateShape<IImageGen>({
          id: shape.id,
          type: "ImageGen",
          props: { prompt: "" },
        })
      }
    }

    const [isMinimized, setIsMinimized] = useState(false)

    const handleClose = () => {
      editor.deleteShape(shape.id)
    }

    const handleMinimize = () => {
      setIsMinimized(!isMinimized)
    }

    const handleTagsChange = (newTags: string[]) => {
      editor.updateShape<IImageGen>({
        id: shape.id,
        type: "ImageGen",
        props: { tags: newTags },
      })
    }

    return (
      <HTMLContainer id={shape.id}>
        <StandardizedToolWrapper
          title="🎨 Image Generator"
          primaryColor={ImageGenShape.PRIMARY_COLOR}
          isSelected={isSelected}
          width={shape.props.w}
          height={shape.props.h}
          onClose={handleClose}
          onMinimize={handleMinimize}
          isMinimized={isMinimized}
          onMaximize={toggleMaximize}
          isMaximized={isMaximized}
          editor={editor}
          shapeId={shape.id}
          tags={shape.props.tags || []}
          onTagsChange={handleTagsChange}
          tagsEditable={true}
          isPinnedToView={shape.props.pinnedToView}
          onPinToggle={handlePinToggle}
          headerContent={
            shape.props.isLoading ? (
              <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                🎨 Image Generator
                <span style={{
                  marginLeft: 'auto',
                  fontSize: '11px',
                  color: ImageGenShape.PRIMARY_COLOR,
                  animation: 'pulse 1.5s ease-in-out infinite'
                }}>
                  Generating...
                </span>
              </span>
            ) : undefined
          }
        >
          <div style={{
            flex: 1,
            display: 'flex',
            flexDirection: 'column',
            padding: '12px',
            gap: '12px',
            overflow: 'auto',
            backgroundColor: '#fafafa'
          }}>
            {/* Image Thread - scrollable history of generated images */}
            <div
              style={{
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                gap: '12px',
                overflow: 'auto',
                minHeight: 0,
              }}
            >
              {/* Loading State - shown at top when generating */}
              {shape.props.isLoading && (
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    backgroundColor: "#fff",
                    borderRadius: "6px",
                    border: '1px solid #e0e0e0',
                    overflow: 'hidden',
                  }}
                >
                  <div
                    style={{
                      padding: '24px',
                      display: "flex",
                      flexDirection: "column",
                      alignItems: "center",
                      justifyContent: "center",
                      gap: 12,
                    }}
                  >
                    <div
                      style={{
                        width: 40,
                        height: 40,
                        border: "4px solid #f3f3f3",
                        borderTop: `4px solid ${ImageGenShape.PRIMARY_COLOR}`,
                        borderRadius: "50%",
                        animation: "spin 1s linear infinite",
                      }}
                    />
                    <span style={{ color: "#666", fontSize: "14px" }}>
                      Generating image...
                    </span>
                  </div>
                  {shape.props.loadingPrompt && (
                    <div
                      style={{
                        borderTop: '1px solid #e0e0e0',
                        padding: '8px 10px',
                        backgroundColor: '#f8f8f8',
                        fontSize: '11px',
                        color: '#666',
                        lineHeight: '1.3',
                      }}
                    >
                      <span style={{ fontWeight: 500, color: '#888' }}>Prompt: </span>
                      {shape.props.loadingPrompt}
                    </div>
                  )}
                </div>
              )}

              {/* Image History - each image as a card */}
              {shape.props.imageHistory.map((image, index) => (
                <div
                  key={image.id}
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    backgroundColor: "#fff",
                    borderRadius: "6px",
                    overflow: "hidden",
                    border: index === 0 && !shape.props.isLoading ? `2px solid ${ImageGenShape.PRIMARY_COLOR}` : '1px solid #e0e0e0',
                  }}
                >
                  {/* Image */}
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      overflow: "hidden",
                      maxHeight: index === 0 ? '300px' : '150px',
                      backgroundColor: '#fafafa',
                    }}
                  >
                    <img
                      src={image.imageUrl}
                      alt={image.prompt}
                      style={{
                        maxWidth: "100%",
                        maxHeight: "100%",
                        objectFit: "contain",
                      }}
                      onError={(_e) => {
                        console.error("❌ ImageGen: Failed to load image:", image.imageUrl)
                        // Remove this image from history
                        const newHistory = shape.props.imageHistory.filter(img => img.id !== image.id)
                        editor.updateShape<IImageGen>({
                          id: shape.id,
                          type: "ImageGen",
                          props: { imageHistory: newHistory },
                        })
                      }}
                    />
                  </div>
                  {/* Prompt and action buttons */}
                  <div
                    style={{
                      borderTop: '1px solid #e0e0e0',
                      padding: '8px 10px',
                      backgroundColor: '#f8f8f8',
                      display: 'flex',
                      flexDirection: 'column',
                      gap: '6px',
                    }}
                  >
                    <div
                      style={{
                        fontSize: '11px',
                        color: '#666',
                        lineHeight: '1.3',
                        maxHeight: index === 0 ? '40px' : '24px',
                        overflow: 'auto',
                        wordBreak: 'break-word',
                      }}
                      title={image.prompt}
                    >
                      <span style={{ fontWeight: 500, color: '#888' }}>Prompt: </span>
                      {image.prompt}
                    </div>
                    <div
                      style={{
                        display: 'flex',
                        gap: '6px',
                      }}
                    >
                      <button
                        onClick={async (e) => {
                          e.stopPropagation()
                          try {
                            const imageUrl = image.imageUrl
                            if (!imageUrl) return

                            // For base64 images, convert directly
                            if (imageUrl.startsWith('data:')) {
                              const response = await fetch(imageUrl)
                              const blob = await response.blob()
                              await navigator.clipboard.write([
                                new ClipboardItem({ [blob.type]: blob })
                              ])
                            } else {
                              // For URLs, fetch the image first
                              const response = await fetch(imageUrl)
                              const blob = await response.blob()
                              await navigator.clipboard.write([
                                new ClipboardItem({ [blob.type]: blob })
                              ])
                            }
                            console.log('✅ ImageGen: Image copied to clipboard')
                          } catch (err) {
                            console.error('❌ ImageGen: Failed to copy image:', err)
                            // Fallback: copy the URL
                            await navigator.clipboard.writeText(image.imageUrl)
                            console.log('✅ ImageGen: Image URL copied to clipboard (fallback)')
                          }
                        }}
                        onPointerDown={(e) => e.stopPropagation()}
                        onTouchStart={(e) => e.stopPropagation()}
                        onTouchEnd={(e) => e.stopPropagation()}
                        style={{
                          flex: 1,
                          padding: '6px 10px',
                          backgroundColor: '#fff',
                          border: '1px solid #ddd',
                          borderRadius: '4px',
                          cursor: 'pointer',
                          fontSize: '11px',
                          fontWeight: 500,
                          color: '#555',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          gap: '4px',
                          transition: 'background-color 0.15s',
                          touchAction: 'manipulation',
                          minHeight: '44px',
                        }}
                        onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f0f0f0')}
                        onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#fff')}
                      >
                        <span>📋</span> Copy
                      </button>
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          const imageUrl = image.imageUrl
                          if (!imageUrl) return

                          // Create download link
                          const link = document.createElement('a')
                          link.href = imageUrl

                          // Generate filename from prompt
                          const promptSlug = (image.prompt || 'image')
                            .slice(0, 30)
                            .toLowerCase()
                            .replace(/[^a-z0-9]+/g, '-')
                            .replace(/^-|-$/g, '')
                          const timestamp = new Date(image.timestamp).toISOString().slice(0, 10)
                          link.download = `${promptSlug}-${timestamp}.png`

                          document.body.appendChild(link)
                          link.click()
                          document.body.removeChild(link)
                          console.log('✅ ImageGen: Image download initiated')
                        }}
                        onPointerDown={(e) => e.stopPropagation()}
                        onTouchStart={(e) => e.stopPropagation()}
                        onTouchEnd={(e) => e.stopPropagation()}
                        style={{
                          flex: 1,
                          padding: '6px 10px',
                          backgroundColor: ImageGenShape.PRIMARY_COLOR,
                          border: 'none',
                          borderRadius: '4px',
                          cursor: 'pointer',
                          fontSize: '11px',
                          fontWeight: 500,
                          color: '#fff',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          gap: '4px',
                          transition: 'opacity 0.15s',
                          touchAction: 'manipulation',
                          minHeight: '44px',
                        }}
                        onMouseEnter={(e) => (e.currentTarget.style.opacity = '0.9')}
                        onMouseLeave={(e) => (e.currentTarget.style.opacity = '1')}
                      >
                        <span>⬇️</span> Download
                      </button>
                      {/* Delete button for history items */}
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          const newHistory = shape.props.imageHistory.filter(img => img.id !== image.id)
                          editor.updateShape<IImageGen>({
                            id: shape.id,
                            type: "ImageGen",
                            props: { imageHistory: newHistory },
                          })
                        }}
                        onPointerDown={(e) => e.stopPropagation()}
                        onTouchStart={(e) => e.stopPropagation()}
                        onTouchEnd={(e) => e.stopPropagation()}
                        style={{
                          padding: '6px 10px',
                          backgroundColor: '#fff',
                          border: '1px solid #ddd',
                          borderRadius: '4px',
                          cursor: 'pointer',
                          fontSize: '11px',
                          fontWeight: 500,
                          color: '#999',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          transition: 'background-color 0.15s, color 0.15s',
                          touchAction: 'manipulation',
                          minWidth: '44px',
                          minHeight: '44px',
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.backgroundColor = '#fee'
                          e.currentTarget.style.color = '#c33'
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.backgroundColor = '#fff'
                          e.currentTarget.style.color = '#999'
                        }}
                        title="Remove from history"
                      >
                        <span>🗑️</span>
                      </button>
                    </div>
                  </div>
                </div>
              ))}

              {/* Empty State */}
              {shape.props.imageHistory.length === 0 && !shape.props.isLoading && !shape.props.error && (
                <div
                  style={{
                    flex: 1,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    backgroundColor: "#fff",
                    borderRadius: "6px",
                    color: "#999",
                    fontSize: "14px",
                    border: '1px solid #e0e0e0',
                    minHeight: '150px',
                  }}
                >
                  Generated images will appear here
                </div>
              )}
            </div>

            {/* Input Section - Mobile Optimized */}
            <div
              style={{
                display: "flex",
                flexDirection: shape.props.w < 350 ? "column" : "row",
                gap: 8,
                flexShrink: 0,
                padding: "4px 0",
              }}
            >
              <textarea
                style={{
                  flex: 1,
                  minHeight: "48px",
                  height: shape.props.w < 350 ? "60px" : "48px",
                  backgroundColor: "#fff",
                  border: "1px solid #ddd",
                  borderRadius: "8px",
                  fontSize: 14,
                  padding: "12px",
                  touchAction: "manipulation",
                  resize: "none",
                  fontFamily: "inherit",
                  lineHeight: "1.4",
                  WebkitAppearance: "none",
                }}
                placeholder="Describe the image you want to generate..."
                value={shape.props.prompt}
                onChange={(e) => {
                  editor.updateShape<IImageGen>({
                    id: shape.id,
                    type: "ImageGen",
                    props: { prompt: e.target.value },
                  })
                }}
                onKeyDown={(e) => {
                  e.stopPropagation()
                  if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault()
                    if (shape.props.prompt.trim() && !shape.props.isLoading) {
                      handleGenerate()
                    }
                  }
                }}
                onPointerDown={(e) => {
                  e.stopPropagation()
                }}
                onTouchStart={(e) => {
                  e.stopPropagation()
                }}
                onClick={(e) => {
                  e.stopPropagation()
                }}
                disabled={shape.props.isLoading}
              />
              <button
                style={{
                  height: shape.props.w < 350 ? "48px" : "48px",
                  padding: "0 20px",
                  pointerEvents: "all",
                  cursor: shape.props.prompt.trim() && !shape.props.isLoading ? "pointer" : "not-allowed",
                  backgroundColor: shape.props.prompt.trim() && !shape.props.isLoading ? ImageGenShape.PRIMARY_COLOR : "#ccc",
                  color: "white",
                  border: "none",
                  borderRadius: "8px",
                  fontWeight: "600",
                  fontSize: "14px",
                  opacity: shape.props.prompt.trim() && !shape.props.isLoading ? 1 : 0.6,
                  touchAction: "manipulation",
                  minWidth: shape.props.w < 350 ? "100%" : "100px",
                  minHeight: "48px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: "6px",
                  transition: "background-color 0.15s, transform 0.1s",
                  WebkitTapHighlightColor: "transparent",
                }}
                onPointerDown={(e) => {
                  e.stopPropagation()
                  e.preventDefault()
                  if (shape.props.prompt.trim() && !shape.props.isLoading) {
                    handleGenerate()
                  }
                }}
                onTouchStart={(e) => {
                  e.stopPropagation()
                  // Visual feedback on touch
                  e.currentTarget.style.transform = "scale(0.98)"
                }}
                onTouchEnd={(e) => {
                  e.stopPropagation()
                  e.preventDefault()
                  e.currentTarget.style.transform = "scale(1)"
                  if (shape.props.prompt.trim() && !shape.props.isLoading) {
                    handleGenerate()
                  }
                }}
                onClick={(e) => {
                  e.preventDefault()
                  e.stopPropagation()
                  if (shape.props.prompt.trim() && !shape.props.isLoading) {
                    handleGenerate()
                  }
                }}
                disabled={shape.props.isLoading || !shape.props.prompt.trim()}
              >
                <span style={{ fontSize: "16px" }}>✨</span>
                Generate
              </button>
            </div>

            {/* Error Display - at bottom */}
            {shape.props.error && (
              <div
                style={{
                  padding: "8px 12px",
                  backgroundColor: "#fee",
                  border: "1px solid #fcc",
                  borderRadius: "6px",
                  color: "#c33",
                  fontSize: "12px",
                  display: "flex",
                  alignItems: "flex-start",
                  gap: "8px",
                  whiteSpace: "pre-wrap",
                  wordBreak: "break-word",
                  maxHeight: "80px",
                  overflowY: "auto",
                  flexShrink: 0,
                }}
              >
                <span style={{ fontSize: "14px", flexShrink: 0 }}>⚠️</span>
                <span style={{ flex: 1, lineHeight: "1.4" }}>{shape.props.error}</span>
                <button
                  onClick={() => {
                    editor.updateShape<IImageGen>({
                      id: shape.id,
                      type: "ImageGen",
                      props: { error: null },
                    })
                  }}
                  onPointerDown={(e) => e.stopPropagation()}
                  onTouchStart={(e) => e.stopPropagation()}
                  onTouchEnd={(e) => e.stopPropagation()}
                  style={{
                    padding: "2px 6px",
                    backgroundColor: "#fcc",
                    border: "1px solid #c99",
                    borderRadius: "4px",
                    cursor: "pointer",
                    fontSize: "10px",
                    flexShrink: 0,
                    touchAction: "manipulation",
                    minWidth: "32px",
                    minHeight: "32px",
                  }}
                >
                  ✕
                </button>
              </div>
            )}
          </div>

          {/* Add CSS for spinner animation */}
          <style>{`
            @keyframes spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }
            @keyframes pulse {
              0%, 100% { opacity: 1; }
              50% { opacity: 0.5; }
            }
          `}</style>
        </StandardizedToolWrapper>
      </HTMLContainer>
    )
  }

  override indicator(shape: IImageGen) {
    return (
      <rect
        width={shape.props.w}
        height={shape.props.h}
        rx={6}
      />
    )
  }
}