/**
 * Whiteboard - 核心类型定义
 *
 * 设计原则：
 * - 自由画布数据模型（非树形）
 * - 元素类型可扩展
 * - 支持多页面/幻灯片
 * - 连线系统（箭头/连接器）
 * - 序列化友好
 */

// ===== 基础类型 =====

/** 点坐标 */
export interface Point {
  x: number
  y: number
}

/** 尺寸 */
export interface Size {
  width: number
  height: number
}

/** 矩形区域 */
export interface Rect extends Point, Size {}

/** 视口状态 */
export interface Viewport {
  zoom: number
  panX: number
  panY: number
}

// ===== 元素类型 =====

/** 元素种类 */
export type ElementType =
  | 'rectangle'
  | 'ellipse'
  | 'diamond'
  | 'text'
  | 'sticky-note'
  | 'arrow'
  | 'line'
  | 'freehand'
  | 'image'
  | 'group'

/** 锚点方位（连线端点） */
export type AnchorPosition = 'top' | 'right' | 'bottom' | 'left' | 'center'

/** 边框/线条风格 */
export type LineStyle = 'solid' | 'dashed' | 'dotted' | 'dash-dot'

/** 文字水平对齐 */
export type TextAlign = 'left' | 'center' | 'right'

/** 文字垂直对齐 */
export type TextBaseline = 'top' | 'middle' | 'bottom'

/** 元素样式 */
export interface ElementStyle {
  /** 填充色 */
  fill?: string
  /** 边框色 */
  stroke?: string
  /** 边框宽度 */
  strokeWidth?: number
  /** 线条风格 */
  lineStyle?: LineStyle
  /** 文字颜色 */
  color?: string
  /** 字体大小 */
  fontSize?: number
  /** 字体粗细 */
  fontWeight?: string
  /** 文字水平对齐 */
  textAlign?: TextAlign
  /** 文字垂直对齐 */
  textBaseline?: TextBaseline
  /** 圆角 */
  borderRadius?: number
  /** 透明度 0-1 */
  opacity?: number
}

/** 默认元素样式 */
export const DEFAULT_ELEMENT_STYLE: ElementStyle = {
  fill: '#ffffff',
  stroke: '#334155',
  strokeWidth: 2,
  lineStyle: 'solid',
  color: '#1e293b',
  fontSize: 14,
  fontWeight: '400',
  textAlign: 'center',
  textBaseline: 'middle',
  borderRadius: 4,
  opacity: 1,
}

/** 箭头端点样式 */
export type ArrowEnd = 'none' | 'arrow' | 'arrow-open' | 'circle' | 'dot' | 'diamond' | 'diamond-open' | 'square' | 'bar'

/** 连线样式 */
export interface ConnectionStyle extends ElementStyle {
  /** 起点样式 */
  startArrow?: ArrowEnd
  /** 终点样式 */
  endArrow?: ArrowEnd
  /** 连线路由类型 */
  route?: 'straight' | 'orthogonal' | 'bezier'
}

/** 默认连线样式 */
export const DEFAULT_CONNECTION_STYLE: ConnectionStyle = {
  stroke: '#3b82f6',
  strokeWidth: 2,
  color: '#1e293b',
  fontSize: 12,
  startArrow: 'none',
  endArrow: 'arrow-open',
  route: 'straight',
}

// ===== 元素数据 =====

/** 元素基础数据（所有元素共享） */
export interface BoardElementBase {
  /** 唯一ID */
  id: string
  /** 元素类型 */
  type: ElementType
  /** X 坐标（左上角） */
  x: number
  /** Y 坐标（左上角） */
  y: number
  /** 宽度 */
  width: number
  /** 高度 */
  height: number
  /** 旋转角度（弧度） */
  rotation: number
  /** 样式 */
  style: ElementStyle
  /** 层级（越大越靠前） */
  zIndex: number
  /** 是否锁定 */
  locked: boolean
  /** 所属分组ID */
  groupId: string | null
  /** 所属页面ID */
  pageId: string
}

/** 矩形 */
export interface RectangleElement extends BoardElementBase {
  type: 'rectangle'
  /** 文本内容 */
  text?: string
}

/** 椭圆 */
export interface EllipseElement extends BoardElementBase {
  type: 'ellipse'
  text?: string
}

/** 菱形 */
export interface DiamondElement extends BoardElementBase {
  type: 'diamond'
  text?: string
}

/** 文本 */
export interface TextElement extends BoardElementBase {
  type: 'text'
  text: string
}

/** 便利贴 */
export interface StickyNoteElement extends BoardElementBase {
  type: 'sticky-note'
  text?: string
}

/** 箭头/连线 */
export interface ArrowElement extends BoardElementBase {
  type: 'arrow'
  /** 连线样式（含端点） */
  connectionStyle: ConnectionStyle
  /** 源元素ID */
  sourceId: string | null
  /** 目标元素ID */
  targetId: string | null
  /** 源锚点方位 */
  sourceAnchor: AnchorPosition
  /** 目标锚点方位 */
  targetAnchor: AnchorPosition
  /** 自由端点（未连接时） */
  startPoint: Point
  endPoint: Point
  /** 路径控制点（正交/贝塞尔） */
  waypoints?: Point[]
  /** 贝塞尔曲线的控制点（用户自定义曲度时存储） */
  controlPoints?: { cp1: Point; cp2: Point }
  /** 连线标签 */
  label?: string
}

/** 直线 */
export interface LineElement extends BoardElementBase {
  type: 'line'
  startPoint: Point
  endPoint: Point
  connectionStyle: ConnectionStyle
  /** 贝塞尔曲线的控制点（用户自定义曲度时存储） */
  controlPoints?: { cp1: Point; cp2: Point }
}

/** 自由画笔 */
export interface FreehandElement extends BoardElementBase {
  type: 'freehand'
  /** 点序列 */
  points: Point[]
  /** 线条平滑度 */
  smoothing?: number
}

/** 图片 */
export interface ImageElement extends BoardElementBase {
  type: 'image'
  /** 图片URL或base64 */
  src: string
}

/** 分组 */
export interface GroupElement extends BoardElementBase {
  type: 'group'
  /** 子元素ID列表 */
  childIds: string[]
}

/** 所有元素联合类型 */
export type BoardElement =
  | RectangleElement
  | EllipseElement
  | DiamondElement
  | TextElement
  | StickyNoteElement
  | ArrowElement
  | LineElement
  | FreehandElement
  | ImageElement
  | GroupElement

/** 含文本的元素类型（用于文本编辑） */
export type TextBasedElement = RectangleElement | EllipseElement | DiamondElement | TextElement | StickyNoteElement

// ===== 连接（非元素，独立管理） =====

/** 连接数据 */
export interface Connection {
  id: string
  sourceId: string
  targetId: string
  sourceAnchor: AnchorPosition
  targetAnchor: AnchorPosition
  style: ConnectionStyle
  label?: string
  waypoints?: Point[]
}

// ===== 页面 =====

/** 页面数据 */
export interface BoardPage {
  id: string
  /** 页面名称 */
  name: string
  /** 元素ID列表（有序） */
  elementIds: string[]
  /** 背景色 */
  backgroundColor?: string
}

// ===== 工具类型 =====

/** 工具类型 */
export type ToolType =
  | 'select'      // 选择/移动
  | 'hand'        // 平移画布
  | 'rectangle'
  | 'ellipse'
  | 'diamond'
  | 'text'
  | 'sticky-note'
  | 'arrow'
  | 'line'
  | 'freehand'
  | 'eraser'

/** 交互事件类型 */
export type BoardInteractionEventType =
  | 'element:click'
  | 'element:dblclick'
  | 'element:contextmenu'
  | 'element:drag:start'
  | 'element:drag:move'
  | 'element:drag:end'
  | 'element:resize:start'
  | 'element:resize:move'
  | 'element:resize:end'
  | 'canvas:click'
  | 'canvas:drag'
  | 'tool:change'
  | 'selection:change'
  | 'eraser:hover'
  | 'zoom'
  | 'pan'

/** 交互事件 */
export interface BoardInteractionEvent {
  type: BoardInteractionEventType
  elementId?: string
  position: Point
  delta?: Point
  viewport: Viewport
  originalEvent: MouseEvent | WheelEvent
  selectedIds?: string[]
  tool?: ToolType
  eraserHoverElement?: { x: number; y: number; width: number; height: number } | null
}

/** Resize 手柄方位（nw/n/ne/e/se/s/sw/w 为包围盒角点，rotate 为旋转手柄，start/end 为线段端点，drag 为线段中点平移，cp1/cp2 为贝塞尔控制点） */
export type ResizeHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'rotate' | 'start' | 'end' | 'drag' | 'cp1' | 'cp2'

/** 选择状态 */
export interface BoardSelectionState {
  selectedIds: Set<string>
  activeHandle: ResizeHandle | null
  selectionBox: Rect | null
}

// ===== 序列化 =====

/** 序列化数据（用于保存） */
export interface SerializedBoard {
  elements: BoardElement[]
  connections: Connection[]
  pages: BoardPage[]
  activePageId: string
  modified?: string
}

// ===== 渲染配置 =====

/** 渲染配置 */
export interface BoardRendererConfig {
  width: number
  height: number
  backgroundColor?: string
  pixelRatio?: number
  /** 网格类型 */
  gridType?: 'none' | 'dot' | 'line' | 'cross'
  /** 网格大小 */
  gridSize?: number
  /** 网格颜色 */
  gridColor?: string
}

/** 默认渲染配置 */
export const DEFAULT_RENDERER_CONFIG: BoardRendererConfig = {
  width: 800,
  height: 600,
  backgroundColor: '#ffffff',
  pixelRatio: window.devicePixelRatio || 1,
  gridType: 'none',
  gridSize: 20,
  gridColor: '#cbd5e1',
}

// ===== 形状默认尺寸 =====

export const SHAPE_DEFAULTS = {
  rectangle: { width: 160, height: 80 },
  ellipse: { width: 140, height: 90 },
  diamond: { width: 140, height: 100 },
  text: { width: 10, height: 30 },
  'sticky-note': { width: 180, height: 160 },
  arrow: { width: 200, height: 2 },
  line: { width: 200, height: 2 },
  freehand: { width: 200, height: 200 },
  image: { width: 300, height: 200 },
  group: { width: 300, height: 200 },
} as const

/** 便利贴预设颜色 */
export const STICKY_NOTE_COLORS = [
  '#fef08a', // yellow
  '#bbf7d0', // green
  '#bfdbfe', // blue
  '#fecaca', // red/pink
  '#e9d5ff', // purple
  '#fed7aa', // orange
] as const

/** 元素默认颜色 */
export const ELEMENT_COLORS = {
  rectangle: { fill: '#ffffff', stroke: '#334155' },
  ellipse: { fill: '#ffffff', stroke: '#334155' },
  diamond: { fill: '#ffffff', stroke: '#334155' },
  'sticky-note': { fill: '#fef08a', stroke: '#eab308' },
  text: { fill: 'transparent', stroke: 'transparent' },
  arrow: { fill: 'transparent', stroke: '#64748b' },
  line: { fill: 'transparent', stroke: '#64748b' },
  freehand: { fill: 'transparent', stroke: '#1e293b' },
  image: { fill: '#f1f5f9', stroke: '#94a3b8', strokeWidth: 1 },
} as const
