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

/**** 
* Classes
****/ 
var ClothingItem = Container.expand(function (assetId, offsetX, offsetY) {
	var self = Container.call(this);
	self.assetId = assetId;
	self.offsetX = offsetX || 0;
	self.offsetY = offsetY || 0;
	self.isBeingDragged = false;
	self.originalX = 0;
	self.originalY = 0;
	self.targetGirl = null;
	var graphic = self.attachAsset(assetId, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.down = function (x, y, obj) {
		self.isBeingDragged = true;
		self.originalX = self.x;
		self.originalY = self.y;
		// Bring to front
		if (self.parent) {
			self.parent.removeChild(self);
			self.parent.addChild(self);
		}
	};
	self.setOriginalPosition = function (x, y) {
		self.originalX = x;
		self.originalY = y;
		self.x = x;
		self.y = y;
	};
	return self;
});
var PowerpuffGirl = Container.expand(function (name, color, x, y) {
	var self = Container.call(this);
	self.name = name;
	self.girlColor = color;
	// Create base character
	var baseShape = self.attachAsset(name + '_base', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Position the girl
	self.x = x;
	self.y = y;
	// Storage for worn items
	self.wornItems = [];
	// Tummy tap area (invisible)
	self.tummyArea = {
		x: -50,
		y: 50,
		width: 100,
		height: 100
	};
	self.down = function (x, y, obj) {
		// Check if tap is in tummy area
		var localPos = self.toLocal({
			x: x,
			y: y
		});
		if (localPos.x >= self.tummyArea.x && localPos.x <= self.tummyArea.x + self.tummyArea.width && localPos.y >= self.tummyArea.y && localPos.y <= self.tummyArea.y + self.tummyArea.height) {
			self.speak();
		}
	};
	self.speak = function () {
		// Play voice sound
		LK.getSound(self.name + '_voice').play();
		// Show text bubble
		var phrases = ["I look amazing!", "This outfit is perfect!", "I love this style!", "Super cute!", "Fashion forward!"];
		var randomPhrase = phrases[Math.floor(Math.random() * phrases.length)];
		self.showTextBubble(randomPhrase);
	};
	self.showTextBubble = function (text) {
		var bubble = new Text2(text, {
			size: 40,
			fill: 0x000000
		});
		bubble.anchor.set(0.5, 0.5);
		bubble.x = 0;
		bubble.y = -250;
		bubble.alpha = 0;
		self.addChild(bubble);
		// Animate in
		tween(bubble, {
			alpha: 1,
			scaleX: 1.2,
			scaleY: 1.2
		}, {
			duration: 300,
			easing: tween.easeOut
		});
		// Animate out and remove
		LK.setTimeout(function () {
			tween(bubble, {
				alpha: 0,
				scaleX: 0.8,
				scaleY: 0.8,
				y: -300
			}, {
				duration: 500,
				easing: tween.easeIn,
				onFinish: function onFinish() {
					bubble.destroy();
				}
			});
		}, 1500);
	};
	self.addClothing = function (clothingItem) {
		self.wornItems.push(clothingItem);
		self.addChild(clothingItem);
	};
	return self;
});
var ThemeButton = Container.expand(function (assetId, themeName, x, y) {
	var self = Container.call(this);
	self.themeName = themeName;
	self.isSelected = false;
	var buttonShape = self.attachAsset(assetId, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var label = new Text2(themeName.toUpperCase(), {
		size: 30,
		fill: 0x000000
	});
	label.anchor.set(0.5, 0.5);
	self.addChild(label);
	self.x = x;
	self.y = y;
	self.down = function (x, y, obj) {
		currentTheme = self.themeName;
		updateSelectedTheme();
		showThemeClothing(self.themeName);
	};
	self.setSelected = function (selected) {
		self.isSelected = selected;
		if (selected) {
			buttonShape.alpha = 1.0;
			tween(self, {
				scaleX: 1.1,
				scaleY: 1.1
			}, {
				duration: 200
			});
		} else {
			buttonShape.alpha = 0.7;
			tween(self, {
				scaleX: 1.0,
				scaleY: 1.0
			}, {
				duration: 200
			});
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Sound effects
// Worker outfit pieces
// Santa outfit pieces
// Party outfit pieces
// Maid outfit pieces
// Baker outfit pieces
// Theme buttons
// Character assets
// Game state
var currentTheme = 'baker';
var draggedItem = null;
var girls = [];
var themeButtons = [];
var clothingItems = [];
// Create the three Powerpuff Girls
var blossom = game.addChild(new PowerpuffGirl('blossom', 0xffc0cb, 500, 1400));
var bubbles = game.addChild(new PowerpuffGirl('bubbles', 0x87ceeb, 1024, 1400));
var buttercup = game.addChild(new PowerpuffGirl('buttercup', 0x90ee90, 1548, 1400));
girls.push(blossom, bubbles, buttercup);
// Create theme buttons
var buttonY = 200;
var buttonSpacing = 220;
var startX = 324;
var bakerBtn = game.addChild(new ThemeButton('baker_btn', 'baker', startX, buttonY));
var maidBtn = game.addChild(new ThemeButton('maid_btn', 'maid', startX + buttonSpacing, buttonY));
var partyBtn = game.addChild(new ThemeButton('party_btn', 'party', startX + buttonSpacing * 2, buttonY));
var santaBtn = game.addChild(new ThemeButton('santa_btn', 'santa', startX + buttonSpacing * 3, buttonY));
var workerBtn = game.addChild(new ThemeButton('worker_btn', 'worker', startX + buttonSpacing * 4, buttonY));
themeButtons.push(bakerBtn, maidBtn, partyBtn, santaBtn, workerBtn);
// Theme clothing definitions
var themeClothing = {
	'baker': [{
		asset: 'baker_hat',
		x: 200,
		y: 500,
		offsetX: 0,
		offsetY: -150
	}, {
		asset: 'baker_apron',
		x: 400,
		y: 500,
		offsetX: 0,
		offsetY: 50
	}, {
		asset: 'baker_shirt',
		x: 600,
		y: 500,
		offsetX: 0,
		offsetY: 0
	}],
	'maid': [{
		asset: 'maid_headband',
		x: 200,
		y: 500,
		offsetX: 0,
		offsetY: -120
	}, {
		asset: 'maid_dress',
		x: 400,
		y: 500,
		offsetX: 0,
		offsetY: 50
	}, {
		asset: 'maid_collar',
		x: 600,
		y: 500,
		offsetX: 0,
		offsetY: -50
	}],
	'party': [{
		asset: 'party_crown',
		x: 200,
		y: 500,
		offsetX: 0,
		offsetY: -140
	}, {
		asset: 'party_dress',
		x: 400,
		y: 500,
		offsetX: 0,
		offsetY: 60
	}, {
		asset: 'party_necklace',
		x: 600,
		y: 500,
		offsetX: 0,
		offsetY: -40
	}],
	'santa': [{
		asset: 'santa_hat',
		x: 200,
		y: 500,
		offsetX: 0,
		offsetY: -130
	}, {
		asset: 'santa_coat',
		x: 400,
		y: 500,
		offsetX: 0,
		offsetY: 50
	}, {
		asset: 'santa_belt',
		x: 600,
		y: 500,
		offsetX: 0,
		offsetY: 30
	}],
	'worker': [{
		asset: 'worker_helmet',
		x: 200,
		y: 500,
		offsetX: 0,
		offsetY: -140
	}, {
		asset: 'worker_vest',
		x: 400,
		y: 500,
		offsetX: 0,
		offsetY: 20
	}, {
		asset: 'worker_tools',
		x: 600,
		y: 500,
		offsetX: 60,
		offsetY: 80
	}]
};
function updateSelectedTheme() {
	for (var i = 0; i < themeButtons.length; i++) {
		themeButtons[i].setSelected(themeButtons[i].themeName === currentTheme);
	}
}
function clearClothingItems() {
	for (var i = clothingItems.length - 1; i >= 0; i--) {
		clothingItems[i].destroy();
	}
	clothingItems = [];
}
function showThemeClothing(theme) {
	clearClothingItems();
	var items = themeClothing[theme];
	if (!items) return;
	for (var i = 0; i < items.length; i++) {
		var itemData = items[i];
		var clothingItem = game.addChild(new ClothingItem(itemData.asset, itemData.offsetX, itemData.offsetY));
		clothingItem.setOriginalPosition(itemData.x, itemData.y);
		clothingItems.push(clothingItem);
	}
}
function handleMove(x, y, obj) {
	if (draggedItem) {
		draggedItem.x = x;
		draggedItem.y = y;
	}
}
function findNearestGirl(item) {
	var closestGirl = null;
	var closestDistance = Infinity;
	for (var i = 0; i < girls.length; i++) {
		var girl = girls[i];
		var dx = item.x - girl.x;
		var dy = item.y - girl.y;
		var distance = Math.sqrt(dx * dx + dy * dy);
		if (distance < closestDistance && distance < 200) {
			closestDistance = distance;
			closestGirl = girl;
		}
	}
	return closestGirl;
}
// Game event handlers
game.move = handleMove;
game.down = function (x, y, obj) {
	// Check if clicking on a clothing item
	for (var i = 0; i < clothingItems.length; i++) {
		var item = clothingItems[i];
		if (item.intersects({
			x: x,
			y: y,
			width: 1,
			height: 1
		})) {
			if (item.isBeingDragged) {
				draggedItem = item;
				handleMove(x, y, obj);
				break;
			}
		}
	}
};
game.up = function (x, y, obj) {
	if (draggedItem) {
		var nearestGirl = findNearestGirl(draggedItem);
		if (nearestGirl) {
			// Snap to girl and play sound
			LK.getSound('dress_up').play();
			// Position relative to girl
			var newClothing = game.addChild(new ClothingItem(draggedItem.assetId, draggedItem.offsetX, draggedItem.offsetY));
			newClothing.x = nearestGirl.x + draggedItem.offsetX;
			newClothing.y = nearestGirl.y + draggedItem.offsetY;
			// Add to girl's worn items
			nearestGirl.addClothing(newClothing);
			// Reset original item position
			draggedItem.x = draggedItem.originalX;
			draggedItem.y = draggedItem.originalY;
		} else {
			// Return to original position
			tween(draggedItem, {
				x: draggedItem.originalX,
				y: draggedItem.originalY
			}, {
				duration: 300,
				easing: tween.easeOut
			});
		}
		draggedItem = null;
	}
};
// Initialize with baker theme
updateSelectedTheme();
showThemeClothing(currentTheme);
// Add title
var titleText = new Text2('POWERPUFF GIRLS DRESS UP', {
	size: 80,
	fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0.5);
titleText.x = 1024;
titleText.y = 100;
game.addChild(titleText);
// Add instructions
var instructionText = new Text2('Tap themes, drag clothes, tap tummies!', {
	size: 40,
	fill: 0xFFFFFF
});
instructionText.anchor.set(0.5, 0.5);
instructionText.x = 1024;
instructionText.y = 320;
game.addChild(instructionText);