export type CanvasType = 'dynamic' | 'project' | 'system' | 'external'
export type CanvasStatus = 'active' | 'archived'

export interface CanvasConfig {
  layout?: 'free' | 'grid' | 'stack'
  settings?: {
    backgroundColor?: string
    padding?: string
    gridColumns?: number
    gridGap?: string
  }
  permissions?: {
    canAddComponents?: boolean
    canRemoveComponents?: boolean
    canEditTools?: boolean
    canChangeTheme?: boolean
  }
}

export interface ProjectCanvas {
  id: string
  name: string
  description?: string
  type: CanvasType
  status: CanvasStatus
  theme_id?: string | null
  config: CanvasConfig | null
  tools: string[]
  is_default: boolean
  is_system: boolean
  show_in_toolbar: boolean
  toolbar_icon?: string | null
  toolbar_order: number
  created_at?: string
  updated_at?: string
}

export interface CanvasComponentLayout {
  x: number
  y: number
  width: number
  height: number
}

export interface CanvasComponent {
  id: number
  canvasId: string
  componentId: string
  position: number
  props: Record<string, any>
  layout: CanvasComponentLayout | null
  isVisible: boolean
  createdAt?: string
  component?: {
    id: string
    name: string
    template: string
    setup?: string
    style?: string
    props?: string[]
    imports?: string[]
  }
}

export interface ComponentUsage {
  componentId: string
  usedBy: Array<{
    id: string
    name: string
    type: CanvasType
  }>
  canDelete: boolean
}
