/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");

/**** 
* Classes
****/ 
var BrushStroke = Container.expand(function (x, y, color, size) {
	var self = Container.call(this);
	var stroke = self.attachAsset('brushStroke', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	self.x = x;
	self.y = y;
	stroke.tint = color;
	self.setSize = function (newSize) {
		stroke.width = newSize;
		stroke.height = newSize;
	};
	self.setSize(size);
	return self;
});
var ColorButton = Container.expand(function (color, size, x, y) {
	var self = Container.call(this);
	var button = self.attachAsset('brushStroke', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	button.tint = color;
	button.width = size;
	button.height = size;
	self.color = color;
	self.x = x;
	self.y = y;
	self.down = function () {
		tween(button, {
			width: size * 1.2,
			height: size * 1.2
		}, {
			duration: 100,
			easing: tween.easeOut
		});
	};
	self.up = function () {
		tween(button, {
			width: size,
			height: size
		}, {
			duration: 100,
			easing: tween.easeOut
		});
	};
	return self;
});
var SizeSlider = Container.expand(function (min, max, defaultValue, width, x, y) {
	var self = Container.call(this);
	self.min = min;
	self.max = max;
	self.value = defaultValue;
	var track = self.attachAsset('brushStroke', {
		anchorX: 0,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	track.tint = 0xDDDDDD;
	track.width = width;
	track.height = 10;
	var handle = self.attachAsset('brushStroke', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: (defaultValue - min) / (max - min) * width,
		y: 0
	});
	handle.tint = 0x666666;
	handle.width = 30;
	handle.height = 30;
	var valueText = new Text2(defaultValue.toString(), {
		size: 24,
		fill: 0x000000
	});
	valueText.anchor.set(0.5, 0.5);
	valueText.y = -40;
	self.addChild(valueText);
	self.x = x;
	self.y = y;
	self.isDragging = false;
	self.setValue = function (newValue) {
		self.value = Math.max(self.min, Math.min(self.max, newValue));
		handle.x = (self.value - self.min) / (self.max - self.min) * width;
		valueText.setText(Math.round(self.value).toString());
		valueText.x = handle.x;
	};
	self.getValueFromPosition = function (posX) {
		var normalizedPos = Math.max(0, Math.min(width, posX));
		return self.min + normalizedPos / width * (self.max - self.min);
	};
	self.down = function (x, y) {
		self.isDragging = true;
		self.setValue(self.getValueFromPosition(x));
	};
	self.up = function () {
		self.isDragging = false;
	};
	self.move = function (x, y) {
		if (self.isDragging) {
			self.setValue(self.getValueFromPosition(x));
		}
	};
	return self;
});
var ToolButton = Container.expand(function (icon, label, size, x, y) {
	var self = Container.call(this);
	var button = self.attachAsset('brushStroke', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	button.tint = 0xDDDDDD;
	button.width = size;
	button.height = size;
	var text = new Text2(label, {
		size: size * 0.4,
		fill: 0x000000
	});
	text.anchor.set(0.5, 0.5);
	self.addChild(text);
	self.x = x;
	self.y = y;
	self.selected = false;
	self.setSelected = function (selected) {
		self.selected = selected;
		if (selected) {
			button.tint = 0x999999;
		} else {
			button.tint = 0xDDDDDD;
		}
	};
	self.down = function () {
		tween(button, {
			width: size * 1.2,
			height: size * 1.2
		}, {
			duration: 100,
			easing: tween.easeOut
		});
	};
	self.up = function () {
		tween(button, {
			width: size,
			height: size
		}, {
			duration: 100,
			easing: tween.easeOut
		});
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0xFFFFFF
});

/**** 
* Game Code
****/ 
// Constants and variables
var CANVAS_WIDTH = 2048;
var CANVAS_HEIGHT = 2732;
var TOOLBAR_HEIGHT = 150;
var PALETTE_SIZE = 80;
var PALETTE_SPACING = 20;
var PALETTE_Y = CANVAS_HEIGHT - TOOLBAR_HEIGHT / 2;
var TOOL_SIZE = 80;
var TOOL_SPACING = 20;
var colors = [0x000000, 0xFFFFFF, 0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0x996633, 0xFF9900];
var strokes = [];
var colorButtons = [];
var toolButtons = [];
var currentColor = 0x000000;
var currentSize = 20;
var isDrawing = false;
var lastX = 0;
var lastY = 0;
var currentTool = 'brush'; // 'brush' or 'eraser'
// Canvas setup
var canvas = new Container();
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT - TOOLBAR_HEIGHT;
game.addChild(canvas);
// Create toolbar background
var toolbarBg = game.attachAsset('brushStroke', {
	anchorX: 0,
	anchorY: 0,
	x: 0,
	y: CANVAS_HEIGHT - TOOLBAR_HEIGHT
});
toolbarBg.tint = 0xEEEEEE;
toolbarBg.width = CANVAS_WIDTH;
toolbarBg.height = TOOLBAR_HEIGHT;
// Create cursor
var cursor = game.attachAsset('cursor', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 0,
	y: 0
});
cursor.alpha = 0.5;
cursor.width = currentSize;
cursor.height = currentSize;
cursor.tint = currentColor;
// Create color palette
for (var i = 0; i < colors.length; i++) {
	var x = 150 + (PALETTE_SIZE + PALETTE_SPACING) * i;
	var colorButton = new ColorButton(colors[i], PALETTE_SIZE, x, PALETTE_Y);
	colorButtons.push(colorButton);
	game.addChild(colorButton);
}
// Create tools
var brushButton = new ToolButton('brush', 'BRUSH', TOOL_SIZE, CANVAS_WIDTH - 400, PALETTE_Y);
brushButton.setSelected(true);
toolButtons.push(brushButton);
game.addChild(brushButton);
var eraserButton = new ToolButton('eraser', 'ERASE', TOOL_SIZE, CANVAS_WIDTH - 300, PALETTE_Y);
toolButtons.push(eraserButton);
game.addChild(eraserButton);
var clearButton = new ToolButton('clear', 'CLEAR', TOOL_SIZE, CANVAS_WIDTH - 200, PALETTE_Y);
toolButtons.push(clearButton);
game.addChild(clearButton);
var saveButton = new ToolButton('save', 'SAVE', TOOL_SIZE, CANVAS_WIDTH - 100, PALETTE_Y);
toolButtons.push(saveButton);
game.addChild(saveButton);
// Create size slider
var sizeSlider = new SizeSlider(1, 100, 20, 400, 120, PALETTE_Y);
game.addChild(sizeSlider);
// Function to draw line between two points
function drawLineBetween(startX, startY, endX, endY, color, size) {
	var distance = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
	var angle = Math.atan2(endY - startY, endX - startX);
	var steps = Math.max(1, Math.floor(distance / (size / 4)));
	for (var i = 0; i <= steps; i++) {
		var x = startX + (endX - startX) * (i / steps);
		var y = startY + (endY - startY) * (i / steps);
		var stroke = new BrushStroke(x, y, color, size);
		canvas.addChild(stroke);
		strokes.push(stroke);
	}
}
// Function to check if a point is in toolbar area
function isInToolbarArea(y) {
	return y > CANVAS_HEIGHT - TOOLBAR_HEIGHT;
}
// Function to clear the canvas
function clearCanvas() {
	for (var i = strokes.length - 1; i >= 0; i--) {
		strokes[i].destroy();
	}
	strokes = [];
}
// Function to save canvas (just displays message in this version)
function saveCanvas() {
	var saveText = new Text2("Drawing Saved!", {
		size: 60,
		fill: 0x000000
	});
	saveText.anchor.set(0.5, 0.5);
	saveText.x = CANVAS_WIDTH / 2;
	saveText.y = CANVAS_HEIGHT / 2;
	game.addChild(saveText);
	LK.setTimeout(function () {
		saveText.destroy();
	}, 2000);
}
// Event handlers
function handleToolInteraction(x, y) {
	// Check color buttons
	for (var i = 0; i < colorButtons.length; i++) {
		var button = colorButtons[i];
		if (Math.sqrt(Math.pow(x - button.x, 2) + Math.pow(y - button.y, 2)) < PALETTE_SIZE) {
			currentColor = button.color;
			cursor.tint = currentColor;
			return true;
		}
	}
	// Check tool buttons
	for (var i = 0; i < toolButtons.length; i++) {
		var button = toolButtons[i];
		if (Math.sqrt(Math.pow(x - button.x, 2) + Math.pow(y - button.y, 2)) < TOOL_SIZE) {
			if (button === brushButton) {
				currentTool = 'brush';
				cursor.tint = currentColor;
				brushButton.setSelected(true);
				eraserButton.setSelected(false);
			} else if (button === eraserButton) {
				currentTool = 'eraser';
				cursor.tint = 0xFFFFFF;
				brushButton.setSelected(false);
				eraserButton.setSelected(true);
			} else if (button === clearButton) {
				clearCanvas();
			} else if (button === saveButton) {
				saveCanvas();
			}
			return true;
		}
	}
	// Check slider
	if (x >= sizeSlider.x && x <= sizeSlider.x + 400 && Math.abs(y - sizeSlider.y) < 50) {
		sizeSlider.down(x - sizeSlider.x, y - sizeSlider.y);
		currentSize = sizeSlider.value;
		cursor.width = currentSize;
		cursor.height = currentSize;
		return true;
	}
	return false;
}
game.down = function (x, y, obj) {
	if (isInToolbarArea(y)) {
		if (handleToolInteraction(x, y)) {
			return;
		}
	} else {
		isDrawing = true;
		lastX = x;
		lastY = y;
		// Create initial stroke
		if (currentTool === 'brush') {
			var stroke = new BrushStroke(x, y, currentColor, currentSize);
			canvas.addChild(stroke);
			strokes.push(stroke);
			LK.getSound('brushSound').play();
		} else if (currentTool === 'eraser') {
			drawLineBetween(x, y, x, y, 0xFFFFFF, currentSize);
			LK.getSound('eraserSound').play();
		}
	}
};
game.up = function (x, y, obj) {
	isDrawing = false;
	// Release slider if it was being dragged
	sizeSlider.up();
};
game.move = function (x, y, obj) {
	// Update cursor position
	cursor.x = x;
	cursor.y = y;
	// Handle slider dragging
	if (sizeSlider.isDragging) {
		sizeSlider.move(x - sizeSlider.x, y - sizeSlider.y);
		currentSize = sizeSlider.value;
		cursor.width = currentSize;
		cursor.height = currentSize;
		return;
	}
	// Draw if we're in drawing mode
	if (isDrawing && !isInToolbarArea(y)) {
		if (currentTool === 'brush') {
			drawLineBetween(lastX, lastY, x, y, currentColor, currentSize);
			LK.getSound('brushSound').play();
		} else if (currentTool === 'eraser') {
			drawLineBetween(lastX, lastY, x, y, 0xFFFFFF, currentSize);
			LK.getSound('eraserSound').play();
		}
		lastX = x;
		lastY = y;
	}
};
// Instructions text
var instructionsText = new Text2("Draw on the canvas using the brush tool. Change colors and brush size using the toolbar.", {
	size: 30,
	fill: 0x666666
});
instructionsText.anchor.set(0.5, 0);
instructionsText.x = CANVAS_WIDTH / 2;
instructionsText.y = 20;
game.addChild(instructionsText);
// Play background music
LK.playMusic('backgroundMusic', {
	fade: {
		start: 0,
		end: 0.5,
		duration: 1000
	}
});
// Set up game update
game.update = function () {
	// Nothing needed here for a drawing app, as most functionality is event-driven
};