export type CanvasNodeType = 'text' | 'image' | 'text2img' | 'img2img' | 'layeredImage' | 'frame';

export type CanvasViewport = {
  x: number;
  y: number;
  zoom: number;
};

export type CanvasAsset = {
  id: string;
  url: string;
  name: string;
  type: 'image';
  createdAt: string;
};

export type CanvasConnection = {
  id: string;
  sourceNodeId: string;
  targetNodeId: string;
  label?: string;
  createdAt: string;
};

export type CanvasGroup = {
  id: string;
  title: string;
  nodeIds: string[];
  frameNodeId?: string;
  color?: string;
  createdAt: string;
  updatedAt: string;
};

export type CanvasLayer = {
  id: string;
  name: string;
  type: 'background' | 'element' | 'icon' | 'text' | 'effect';
  visible: boolean;
  locked: boolean;
  assetUrl?: string;
  text?: string;
  color?: string;
  opacity?: number;
  x: number;
  y: number;
  width: number;
  height: number;
};

export type CanvasNode = {
  id: string;
  type: CanvasNodeType;
  x: number;
  y: number;
  width: number;
  height: number;
  zIndex: number;
  title: string;
  color?: string;
  prompt?: string;
  negativePrompt?: string;
  text?: string;
  imageUrl?: string;
  imageWidth?: number;
  imageHeight?: number;
  referenceImage?: string;
  outputImages?: string[];
  selectedOutput?: string;
  status?: 'idle' | 'generating' | 'failed' | 'succeeded';
  error?: string;
  params?: {
    aspectRatio?: string;
    resolution?: string;
    count?: number;
    strength?: number;
    model?: string;
    modelLabel?: string;
    apiType?: 'stream' | 'sync';
  };
  layers?: CanvasLayer[];
  createdAt: string;
  updatedAt: string;
};

export type CanvasProjectState = {
  nodes: CanvasNode[];
  connections: CanvasConnection[];
  groups: CanvasGroup[];
  assets: CanvasAsset[];
  viewport: CanvasViewport;
};

export type CanvasProject = {
  id: string;
  userId: string;
  title: string;
  state: CanvasProjectState;
  createdAt: string;
  updatedAt: string;
};

export function createEmptyCanvasState(): CanvasProjectState {
  return {
    nodes: [],
    connections: [],
    groups: [],
    assets: [],
    viewport: { x: 0, y: 0, zoom: 1 },
  };
}
