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

/**** 
* Classes
****/ 
var OutfitItem = Container.expand(function (assetName, outfitType) {
	var self = Container.call(this);
	self.assetName = assetName;
	self.outfitType = outfitType;
	self.isBeingDragged = false;
	self.graphic = self.attachAsset(assetName, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.down = function (x, y, obj) {
		self.isBeingDragged = true;
		self.startX = self.x;
		self.startY = self.y;
		tween(self, {
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 100
		});
	};
	self.move = function (x, y, obj) {
		if (self.isBeingDragged) {
			var gamePos = game.toLocal(obj.parent.toGlobal({
				x: x,
				y: y
			}));
			self.x = gamePos.x;
			self.y = gamePos.y;
		}
	};
	self.up = function (x, y, obj) {
		if (self.isBeingDragged) {
			self.isBeingDragged = false;
			tween(self, {
				scaleX: 1.0,
				scaleY: 1.0
			}, {
				duration: 100
			});
			// Check if dropped on selected character
			if (selectedCharacter && self.intersects(selectedCharacter)) {
				selectedCharacter.addOutfit(self.outfitType, self.assetName);
			}
			// Return to original position
			tween(self, {
				x: self.startX,
				y: self.startY
			}, {
				duration: 300,
				easing: tween.easeOut
			});
		}
	};
	return self;
});
var PowerpuffGirl = Container.expand(function (type) {
	var self = Container.call(this);
	self.type = type || 'blossom';
	self.isSelected = false;
	self.isDancing = false;
	// Create character base
	var baseAsset = self.type + 'Base';
	var hairAsset = self.type + 'Hair';
	self.base = self.attachAsset(baseAsset, {
		anchorX: 0.5,
		anchorY: 1.0
	});
	self.hair = self.attachAsset(hairAsset, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Position hair on head
	self.hair.x = 0;
	self.hair.y = -self.base.height + 50;
	// Current outfit
	self.currentDress = null;
	self.currentShoes = null;
	self.currentAccessory = null;
	self.select = function () {
		self.isSelected = true;
		tween(self, {
			scaleX: 1.2,
			scaleY: 1.2
		}, {
			duration: 300,
			easing: tween.bounceOut
		});
		LK.getSound('selectSound').play();
	};
	self.deselect = function () {
		self.isSelected = false;
		tween(self, {
			scaleX: 1.0,
			scaleY: 1.0
		}, {
			duration: 200
		});
	};
	self.addOutfit = function (outfitType, assetName) {
		if (outfitType === 'dress' && self.currentDress) {
			self.removeChild(self.currentDress);
		}
		if (outfitType === 'shoes' && self.currentShoes) {
			self.removeChild(self.currentShoes);
		}
		if (outfitType === 'accessory' && self.currentAccessory) {
			self.removeChild(self.currentAccessory);
		}
		var outfit = LK.getAsset(assetName, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		if (outfitType === 'dress') {
			outfit.y = -self.base.height / 2;
			self.currentDress = outfit;
		} else if (outfitType === 'shoes') {
			outfit.y = -20;
			self.currentShoes = outfit;
		} else if (outfitType === 'accessory') {
			outfit.y = -self.base.height + 30;
			self.currentAccessory = outfit;
		}
		self.addChild(outfit);
		LK.getSound('dressUpSound').play();
	};
	self.dance = function () {
		if (self.isDancing) return;
		self.isDancing = true;
		var originalY = self.y;
		tween(self, {
			y: originalY - 30,
			rotation: 0.2
		}, {
			duration: 200,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				tween(self, {
					y: originalY,
					rotation: -0.2
				}, {
					duration: 200,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						tween(self, {
							rotation: 0
						}, {
							duration: 200,
							easing: tween.easeOut,
							onFinish: function onFinish() {
								self.isDancing = false;
							}
						});
					}
				});
			}
		});
		LK.getSound('danceSound').play();
	};
	self.down = function (x, y, obj) {
		if (gameState === 'performance') {
			self.dance();
		}
	};
	return self;
});
var UIButton = Container.expand(function (text, width, height) {
	var self = Container.call(this);
	self.bg = self.attachAsset('selectButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: width / 300,
		scaleY: height / 80
	});
	self.label = new Text2(text, {
		size: 40,
		fill: 0xFFFFFF
	});
	self.label.anchor.set(0.5, 0.5);
	self.addChild(self.label);
	self.down = function (x, y, obj) {
		tween(self, {
			scaleX: 0.95,
			scaleY: 0.95
		}, {
			duration: 100
		});
	};
	self.up = function (x, y, obj) {
		tween(self, {
			scaleX: 1.0,
			scaleY: 1.0
		}, {
			duration: 100
		});
		if (self.onClick) {
			self.onClick();
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// UI elements
// Outfit pieces
// Hair shapes
// Character base shapes
// Game states
var gameState = 'selection'; // 'selection', 'dressup', 'performance'
var selectedCharacter = null;
var characters = [];
var outfitItems = [];
var uiElements = [];
// Create background
var bg = game.attachAsset('background', {
	anchorX: 0,
	anchorY: 0,
	x: 0,
	y: 0
});
// Title text
var titleText = new Text2('Powerpuff Dance Studio', {
	size: 80,
	fill: 0xFF1493
});
titleText.anchor.set(0.5, 0.5);
titleText.x = 2048 / 2;
titleText.y = 200;
game.addChild(titleText);
// Create characters for selection
function createSelectionScreen() {
	var blossom = new PowerpuffGirl('blossom');
	blossom.x = 2048 / 2 - 400;
	blossom.y = 1400;
	characters.push(blossom);
	game.addChild(blossom);
	var bubbles = new PowerpuffGirl('bubbles');
	bubbles.x = 2048 / 2;
	bubbles.y = 1400;
	characters.push(bubbles);
	game.addChild(bubbles);
	var buttercup = new PowerpuffGirl('buttercup');
	buttercup.x = 2048 / 2 + 400;
	buttercup.y = 1400;
	characters.push(buttercup);
	game.addChild(buttercup);
	// Character labels
	var blossomLabel = new Text2('Blossom', {
		size: 50,
		fill: 0xFF6347
	});
	blossomLabel.anchor.set(0.5, 0.5);
	blossomLabel.x = blossom.x;
	blossomLabel.y = blossom.y + 200;
	game.addChild(blossomLabel);
	var bubblesLabel = new Text2('Bubbles', {
		size: 50,
		fill: 0xFFD700
	});
	bubblesLabel.anchor.set(0.5, 0.5);
	bubblesLabel.x = bubbles.x;
	bubblesLabel.y = bubbles.y + 200;
	game.addChild(bubblesLabel);
	var buttercupLabel = new Text2('Buttercup', {
		size: 50,
		fill: 0x228B22
	});
	buttercupLabel.anchor.set(0.5, 0.5);
	buttercupLabel.x = buttercup.x;
	buttercupLabel.y = buttercup.y + 200;
	game.addChild(buttercupLabel);
	// Next button
	var nextBtn = new UIButton('Next', 200, 60);
	nextBtn.x = 2048 - 150;
	nextBtn.y = 2600;
	nextBtn.onClick = function () {
		if (selectedCharacter) {
			transitionToDressUp();
		}
	};
	game.addChild(nextBtn);
	uiElements.push(nextBtn);
}
function createDressUpScreen() {
	titleText.setText('Dress Up Time!');
	// Move selected character to center
	selectedCharacter.x = 2048 / 2;
	selectedCharacter.y = 1600;
	// Create outfit options
	var dresses = ['dress1', 'dress2', 'dress3'];
	var shoes = ['shoes1', 'shoes2'];
	var accessories = ['accessory1'];
	var yPos = 2200;
	// Dresses
	for (var i = 0; i < dresses.length; i++) {
		var dress = new OutfitItem(dresses[i], 'dress');
		dress.x = 200 + i * 150;
		dress.y = yPos;
		outfitItems.push(dress);
		game.addChild(dress);
	}
	// Shoes
	for (var i = 0; i < shoes.length; i++) {
		var shoe = new OutfitItem(shoes[i], 'shoes');
		shoe.x = 800 + i * 150;
		shoe.y = yPos;
		outfitItems.push(shoe);
		game.addChild(shoe);
	}
	// Accessories
	var accessory = new OutfitItem('accessory1', 'accessory');
	accessory.x = 1200;
	accessory.y = yPos;
	outfitItems.push(accessory);
	game.addChild(accessory);
	// Instructions
	var instructText = new Text2('Drag outfits onto your character!', {
		size: 45,
		fill: 0x4B0082
	});
	instructText.anchor.set(0.5, 0.5);
	instructText.x = 2048 / 2;
	instructText.y = 2050;
	game.addChild(instructText);
	uiElements.push(instructText);
	// Performance button
	var performBtn = new UIButton('Start Performance!', 300, 80);
	performBtn.x = 2048 - 200;
	performBtn.y = 2600;
	performBtn.onClick = function () {
		transitionToPerformance();
	};
	game.addChild(performBtn);
	uiElements.push(performBtn);
}
function createPerformanceScreen() {
	titleText.setText('Dance Show Time!');
	// Create stage
	var stage = game.attachAsset('stage', {
		anchorX: 0.5,
		anchorY: 1.0,
		x: 2048 / 2,
		y: 1800
	});
	// Create curtains
	var leftCurtain = game.attachAsset('curtain', {
		anchorX: 0,
		anchorY: 1.0,
		x: 124,
		y: 1800
	});
	var rightCurtain = game.attachAsset('curtain', {
		anchorX: 1.0,
		anchorY: 1.0,
		x: 1924,
		y: 1800
	});
	// Create spotlight
	var spotlight = game.attachAsset('spotlight', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2048 / 2,
		y: 1200,
		alpha: 0.3
	});
	// Move character to stage
	selectedCharacter.x = 2048 / 2;
	selectedCharacter.y = 1700;
	// Performance instructions
	var performText = new Text2('Tap your character to make her dance!', {
		size: 50,
		fill: 0xFFD700
	});
	performText.anchor.set(0.5, 0.5);
	performText.x = 2048 / 2;
	performText.y = 2200;
	game.addChild(performText);
	uiElements.push(performText);
	// Score display
	var scoreText = new Text2('Dance Moves: 0', {
		size: 45,
		fill: 0xFFFFFF
	});
	scoreText.anchor.set(0.5, 0);
	LK.gui.top.addChild(scoreText);
}
function transitionToDressUp() {
	gameState = 'dressup';
	// Remove non-selected characters
	for (var i = characters.length - 1; i >= 0; i--) {
		if (characters[i] !== selectedCharacter) {
			characters[i].destroy();
			characters.splice(i, 1);
		}
	}
	// Clear UI elements
	for (var i = 0; i < uiElements.length; i++) {
		uiElements[i].destroy();
	}
	uiElements = [];
	createDressUpScreen();
}
function transitionToPerformance() {
	gameState = 'performance';
	// Clear outfit items
	for (var i = 0; i < outfitItems.length; i++) {
		outfitItems[i].destroy();
	}
	outfitItems = [];
	// Clear UI elements
	for (var i = 0; i < uiElements.length; i++) {
		uiElements[i].destroy();
	}
	uiElements = [];
	createPerformanceScreen();
}
// Character selection handler
game.down = function (x, y, obj) {
	if (gameState === 'selection') {
		for (var i = 0; i < characters.length; i++) {
			var _char = characters[i];
			if (_char.intersects({
				x: x,
				y: y,
				width: 1,
				height: 1
			})) {
				if (selectedCharacter) {
					selectedCharacter.deselect();
				}
				selectedCharacter = _char;
				_char.select();
				break;
			}
		}
	}
};
var danceCount = 0;
game.update = function () {
	// Update score if in performance mode
	if (gameState === 'performance' && selectedCharacter && selectedCharacter.isDancing) {
		danceCount++;
		var scoreText = LK.gui.top.children[0];
		if (scoreText) {
			scoreText.setText('Dance Moves: ' + Math.floor(danceCount / 60));
		}
	}
};
// Initialize the game
createSelectionScreen();