// Available drawing modes
const modes = ['none', 'rectangle', 'polygon', 'freeform', 'delete', 'inspect']

// Set drawing mode
drawingMode.value = 'delete' // Click to remove shapes
drawingMode.value = 'rectangle' // Draw rectangles
drawingMode.value = 'inspect' // Inspect mode with magnified view
drawingMode.value = 'none' // No interaction

// Output format
{
  id: 'shape_1_1672531200000',          // Unique identifier
  type: 'rectangle',
  canvas: { x, y, width, height },     // Display coordinates
  image: { x, y, width, height },      // Original image coordinates
  style: { strokeStyle, lineWidth, ... }, // Applied styling
  timestamp: 1672531200000             // Creation time
}

// Output format
{
  id: 'shape_2_1672531205000',          // Unique identifier
  type: 'polygon',
  canvas: [{ x, y }, ...],             // Display coordinates
  image: [{ x, y }, ...],              // Original image coordinates
  style: { strokeStyle, lineWidth, ... }, // Applied styling
  timestamp: 1672531205000             // Creation time
}

// Output format
{
  id: 'shape_3_1672531210000',          // Unique identifier
  type: 'freeform',
  canvas: [{ x, y }, ...],             // Simplified path points
  image: [{ x, y }, ...],              // Original image coordinates
  style: { strokeStyle, lineWidth, ... }, // Applied styling
  timestamp: 1672531210000             // Creation time
}

// Set to delete mode
drawingMode.value = 'delete'

// Visual feedback:
// - Cursor changes to 'not-allowed'
// - Red button styling when active
// - Click any shape to remove it instantly

// No output - shapes are removed from the drawnShapes array
// Triggers 'shape-removed' event with the deleted shape data

// Set to inspect mode
drawingMode.value = 'inspect'

// Features:
// - Hover over the canvas to see a magnified popup view
// - Shows the area around the cursor with zoom
// - Displays all shapes in the zoomed region
// - Useful for precise inspection of annotations
// - Popup follows mouse cursor with smart positioning

// Customize padding around inspected area (in image pixels)
inspectPadding.value = 20 // Default is 20 pixels

// Click to remove: Set drawing mode to 'delete' and click any shape
drawingMode.value = 'delete'
// Now clicking on shapes will remove them (cursor shows 'not-allowed')

// Programmatic removal by ID
const shapeId = 'shape_1_1672531200000'
canvasRef.value.removeShapeById(shapeId)

// Find and remove shape at specific position
const mousePos = { x: 100, y: 50 }
const shapeId = canvasRef.value.findShapeAtPosition(mousePos)
if (shapeId) {
  canvasRef.value.removeShapeById(shapeId)
}

// Handle image paste events
const handleImagePasted = (imageData) => {
  console.log('Canvas size:', imageData.width, imageData.height)     // Displayed size
  console.log('Original size:', imageData.originalWidth, imageData.originalHeight) // Actual image dimensions
  console.log('Position:', imageData.x, imageData.y)                 // Canvas position
  console.log('Image object:', imageData.image)                      // HTMLImageElement with original dimensions
  
  // Use original dimensions for ML training
  trainModel(imageData.originalWidth, imageData.originalHeight)
}

// Get current image reference
const currentImage = canvasRef.value.getImage()
if (currentImage) {
  console.log('Current image dimensions:', currentImage.naturalWidth, currentImage.naturalHeight)
}

// Update image while preserving all shapes
const updateCanvasImage = async (newImageSrc) => {
  const img = new Image()
  img.onload = async () => {
    try {
      const result = await canvasRef.value.updateImage(img)
      console.log('Image updated:', result)
      // All existing shapes remain intact
    } catch (error) {
      console.error('Failed to update image:', error)
    }
  }
  img.src = newImageSrc
}

// Update with custom positioning (no auto-fit)
const updateWithCustomPosition = async (imageElement) => {
  await canvasRef.value.updateImage(imageElement, 50, 100, 200, 150, false)
}

// Reset everything - image and all shapes
canvasRef.value.resetCanvas()

// Clear only the canvas background (keeps shapes)
canvasRef.value.clearCanvas()

// Clear only drawn shapes (keeps image)
canvasRef.value.clearDrawnShapes()

// Get all shapes with their IDs
const shapes = canvasRef.value.getDrawnShapes()
shapes.forEach(shape => {
  console.log(`Shape ${shape.id}: ${shape.type}`)
})

// Find specific shape
const shape = canvasRef.value.findShapeById('shape_1_1672531200000')
if (shape) {
  console.log('Found shape:', shape.type)
}

// Enable index display on all shapes
<MLCanvas :showIndex="true" />

// Each shape gets a 1-based index in creation order
// When shapes are deleted, subsequent shapes automatically take lower indices
// Index is displayed outside the shape to avoid obstructing the view

// Access shape index programmatically
const shapes = canvasRef.value.getDrawnShapes()
shapes.forEach(shape => {
  console.log(`Shape ${shape.index}: ${shape.type}`) // 1, 2, 3...
})

// Add statistics to shapes for display in inspect mode
canvasRef.value.drawRectangle(100, 50, 200, 150, {
  strokeStyle: '#ff0000',
  displayStatistics: [
    { name: 'ID', type: 'string', value: '12345', editable: false },  // Read-only
    { name: 'Class', type: 'string', value: 'Person' },                // Editable (default)
    { name: 'Confidence', type: 'number', value: 0.95 },               // Editable (default)
    { name: 'Area', type: 'number', value: 30000, editable: true }     // Explicitly editable
  ]
})

canvasRef.value.drawPolygon(points, {
  strokeStyle: '#00ff00',
  displayStatistics: [
    { name: 'Label', type: 'string', value: 'Road' },
    { name: 'Score', type: 'number', value: 0.87 }
  ]
})

// Interactive editing in inspect mode:
// 1. Hover over shapes to see their statistics
// 2. Click a shape to lock the popup and make statistics editable
// 3. Edit values (respects 'editable' property - default is true)
// 4. Click 'Save' to apply changes and emit 'statistics-updated' event
// 5. Click 'Cancel' to discard changes and close popup

drawingMode.value = 'inspect'

// Listen for statistics updates (only fires when Save is clicked)
<MLCanvas @statistics-updated="handleStatisticsUpdate" />

const handleStatisticsUpdate = ({ shapeId, statistics }) => {
  console.log(`Statistics updated for shape ${shapeId}:`, statistics)
  // Update your ML model or database
}

// Statistic properties:
// - name: Display name for the statistic
// - type: 'string' or 'number' (determines input type)
// - value: Current value
// - editable: Boolean (default: true). Set to false for read-only fields

// Get the shape ID from created shapes
const shape = canvasRef.value.drawRectangle(100, 50, 200, 150, {
  displayStatistics: [
    { name: 'Class', type: 'string', value: 'Person' },
    { name: 'Confidence', type: 'number', value: 0.95 }
  ]
})

const shapeId = shape.id

// Get all statistics for a shape
const stats = canvasRef.value.getDisplayStatistics(shapeId)
console.log('Current statistics:', stats)

// Update a single statistic value
canvasRef.value.updateDisplayStatistic(shapeId, 'Confidence', 0.98)

// Add a new statistic to the shape
canvasRef.value.addDisplayStatistic(shapeId, {
  name: 'Area',
  type: 'number',
  value: 30000,
  editable: false  // Optional, defaults to true
})

// Remove a statistic from the shape
canvasRef.value.removeDisplayStatistic(shapeId, 'Area')

// Replace all statistics for a shape
canvasRef.value.updateDisplayStatistics(shapeId, [
  { name: 'Label', type: 'string', value: 'Vehicle' },
  { name: 'Score', type: 'number', value: 0.88 },
  { name: 'Bbox', type: 'string', value: '[100, 50, 200, 150]', editable: false }
])

// All methods emit 'statistics-updated' event by default when changes are made
<MLCanvas @statistics-updated="handleStatisticsUpdate" />

const handleStatisticsUpdate = ({ shapeId, statistics }) => {
  console.log(`Statistics updated for ${shapeId}:`, statistics)
  // Sync with your backend or ML pipeline
  syncToDatabase(shapeId, statistics)
}

// Suppress event emission with optional parameter (useful for batch updates)
canvasRef.value.updateDisplayStatistic(shapeId, 'Confidence', 0.92, false) // No event
canvasRef.value.updateDisplayStatistic(shapeId, 'Area', 28000, false)      // No event
canvasRef.value.addDisplayStatistic(shapeId, {
  name: 'Updated',
  type: 'string',
  value: new Date().toISOString()
}, true) // Emit event only after all updates are done

// Use rectangle mode to create bounding boxes
const annotations = shapes
  .filter(s => s.type === 'rectangle')
  .map(s => ({
    id: s.id,                    // Unique identifier for tracking
    class: 'person',
    bbox: [s.image.x, s.image.y, s.image.width, s.image.height],
    timestamp: s.timestamp       // Creation time
  }))

// Use polygon mode for segmentation masks
const masks = shapes
  .filter(s => s.type === 'polygon')
  .map(s => ({
    id: s.id,                    // Unique identifier for tracking
    class: 'road',
    points: s.image.map(p => [p.x, p.y]),
    timestamp: s.timestamp       // Creation time
  }))

// Use freeform mode for specialized tasks
const customAnnotations = shapes
  .filter(s => s.type === 'freeform')
  .map(s => ({
    id: s.id,                    // Unique identifier for tracking
    type: 'gesture',
    path: s.image,
    timestamp: s.timestamp       // Creation time
  }))

// Track annotation changes for ML pipeline updates
const handleShapeCreated = (shape) => {
  // Add to ML dataset
  MLDataset.add(shape.id, {
    type: shape.type,
    coordinates: shape.image,
    timestamp: shape.timestamp
  })
}

const handleShapeRemoved = (shape) => {
  // Remove from ML dataset
  MLDataset.remove(shape.id)
}

// Batch operations with IDs
const batchRemove = (shapeIds) => {
  shapeIds.forEach(id => {
    canvasRef.value.removeShapeById(id)
  })
}