/**
 * Canvas Style Types
 *
 * Simplified style system for the canvas package.
 * Only includes canvas-relevant styles (background, grid, axes, nodes, edges).
 */

import type { EdgePathType } from '../utils/edge-path-calculators';

export interface BackgroundStyle {
	color?: string;
	gradient?: { from: string; to: string; angle?: number };
	pattern?: 'none' | 'dots' | 'lines' | 'grid';
}

export interface GridStyle {
	visible?: boolean;
	minorLineColor?: string;
	majorLineColor?: string;
	opacity?: number;
}

export interface AxesStyle {
	visible?: boolean;
	color?: string;
	labelColor?: string;
	tickColor?: string;
}

export interface NodeStyle {
	defaultBackground?: string;
	defaultBorderColor?: string;
	defaultBorderRadius?: number;
	selectedBorderColor?: string;
	selectedGlowColor?: string;
	shadowColor?: string;
	shadowOpacity?: number;
	draggingBackgroundColor?: string;
	draggingBorderColor?: string;
	resizeHandleColor?: string;
	resizeHandleActiveColor?: string;
}

export interface EdgeStyle {
	defaultColor?: string;
	defaultWeight?: number;
	labelColor?: string;
	labelStrokeColor?: string;
	/** Edge path style: 'bezier' (default), 'bezier-vertical', 'bezier-smart', 'straight', 'step', 'step-vertical', 'step-smart', 'smooth-step' */
	pathType?: EdgePathType;
}

/**
 * Canvas style guide - only canvas-relevant styles
 */
export interface CanvasStyleGuide {
	background?: BackgroundStyle;
	grid?: GridStyle;
	axes?: AxesStyle;
	nodes?: NodeStyle;
	edges?: EdgeStyle;
}

/**
 * Required canvas style guide with all properties defined
 */
export type RequiredCanvasStyleGuide = Required<{
	background: Required<BackgroundStyle>;
	grid: Required<GridStyle>;
	axes: Required<AxesStyle>;
	nodes: Required<NodeStyle>;
	edges: Required<EdgeStyle>;
}>;

/**
 * Default light theme styles
 */
export const defaultLightStyles: RequiredCanvasStyleGuide = {
	background: {
		color: '#f0f0f0',
		gradient: { from: '#f0f0f0', to: '#e0e0e0', angle: 180 },
		pattern: 'none',
	},
	grid: {
		visible: true,
		minorLineColor: 'rgba(0, 0, 0, 0.05)',
		majorLineColor: 'rgba(0, 0, 0, 0.1)',
		opacity: 1,
	},
	axes: {
		visible: true,
		color: 'rgba(0, 0, 0, 0.3)',
		labelColor: 'rgba(0, 0, 0, 0.7)',
		tickColor: 'rgba(0, 0, 0, 0.3)',
	},
	nodes: {
		defaultBackground: '#FAFAFA',
		defaultBorderColor: 'rgba(0, 0, 0, 0.06)',
		defaultBorderRadius: 12,
		selectedBorderColor: '#FF9800',
		selectedGlowColor: 'rgba(255, 152, 0, 0.5)',
		shadowColor: 'rgba(0, 0, 0, 0.1)',
		shadowOpacity: 1,
		draggingBackgroundColor: '#FAFAFAd9',
		draggingBorderColor: '#CCCCCC',
		resizeHandleColor: 'rgba(0, 0, 0, 0.2)',
		resizeHandleActiveColor: 'rgba(59, 130, 246, 0.8)',
	},
	edges: {
		defaultColor: '#cccccc',
		defaultWeight: 1.5,
		labelColor: '#FFFFFF',
		labelStrokeColor: '#000000',
		pathType: 'bezier',
	},
};

/**
 * Default dark theme styles
 */
export const defaultDarkStyles: RequiredCanvasStyleGuide = {
	background: {
		color: '#0f172a',
		gradient: { from: '#0f172a', to: '#1e293b', angle: 180 },
		pattern: 'none',
	},
	grid: {
		visible: true,
		minorLineColor: 'rgba(255, 255, 255, 0.06)',
		majorLineColor: 'rgba(255, 255, 255, 0.12)',
		opacity: 1,
	},
	axes: {
		visible: true,
		color: 'rgba(255, 255, 255, 0.35)',
		labelColor: 'rgba(255, 255, 255, 0.7)',
		tickColor: 'rgba(255, 255, 255, 0.35)',
	},
	nodes: {
		defaultBackground: '#FAFAFA',
		defaultBorderColor: 'rgba(0, 0, 0, 0.06)',
		defaultBorderRadius: 12,
		selectedBorderColor: '#FF9800',
		selectedGlowColor: 'rgba(255, 152, 0, 0.5)',
		shadowColor: 'rgba(0, 0, 0, 0.1)',
		shadowOpacity: 1,
		draggingBackgroundColor: '#FAFAFAd9',
		draggingBorderColor: '#666666',
		resizeHandleColor: 'rgba(255, 255, 255, 0.2)',
		resizeHandleActiveColor: 'rgba(96, 165, 250, 0.8)',
	},
	edges: {
		defaultColor: '#cccccc',
		defaultWeight: 1.5,
		labelColor: '#FFFFFF',
		labelStrokeColor: '#000000',
		pathType: 'bezier',
	},
};

/**
 * Merge user styles with default styles
 */
export function mergeWithDefaults(userStyles: CanvasStyleGuide | undefined | null, isDark: boolean): RequiredCanvasStyleGuide {
	const defaults = isDark ? defaultDarkStyles : defaultLightStyles;

	if (!userStyles) return defaults;

	return {
		background: { ...defaults.background, ...userStyles.background },
		grid: { ...defaults.grid, ...userStyles.grid },
		axes: { ...defaults.axes, ...userStyles.axes },
		nodes: { ...defaults.nodes, ...userStyles.nodes },
		edges: { ...defaults.edges, ...userStyles.edges },
	};
}
