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

/**** 
* Classes
****/ 
// Draggable Shape
var DraggableShape = Container.expand(function () {
	var self = Container.call(this);
	self.shapeType = null; // 'redSquare', etc
	self.matchOutline = null; // Reference to the matching outline
	self.isMatched = false;
	self.asset = null; // The shape asset
	self.init = function (shapeType) {
		self.shapeType = shapeType;
		self.isMatched = false;
		// Remove previous asset if any
		if (self.asset) self.removeChild(self.asset);
		// Attach asset
		self.asset = self.attachAsset(shapeType, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		// Apply mask if needed
		if (shapeType === 'greenTriangle') {
			applyTriangleMask(self.asset, 320);
		}
		if (shapeType === 'yellowStar') {
			applyStarMask(self.asset, 320);
		}
		// New shape masks
		if (shapeType === 'purplePentagon') {
			applyPentagonMask(self.asset, 320);
		}
		if (shapeType === 'orangeHexagon') {
			applyHexagonMask(self.asset, 320);
		}
		if (shapeType === 'cyanDiamond') {
			applyDiamondMask(self.asset, 320);
		}
		if (shapeType === 'pinkHeart') {
			applyHeartMask(self.asset, 320);
		}
		if (shapeType === 'brownTrapezoid') {
			applyTrapezoidMask(self.asset, 320);
		}
		if (shapeType === 'tealHeptagon') {
			applyHeptagonMask(self.asset, 320);
		}
		if (shapeType === 'navyOctagon') {
			applyOctagonMask(self.asset, 320);
		}
	};
	// Animate to position
	self.moveTo = function (x, y, duration, onFinish) {
		tween(self, {
			x: x,
			y: y
		}, {
			duration: duration || 400,
			easing: tween.easeInOut,
			onFinish: onFinish
		});
	};
	return self;
});
// Outline Target
var OutlineTarget = Container.expand(function () {
	var self = Container.call(this);
	self.shapeType = null; // 'redSquareOutline', etc
	self.asset = null;
	self.init = function (shapeType) {
		self.shapeType = shapeType;
		if (self.asset) self.removeChild(self.asset);
		self.asset = self.attachAsset(shapeType, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		// Make outline semi-transparent
		self.asset.alpha = 0.35;
		// Apply mask if needed
		if (shapeType === 'greenTriangleOutline') {
			applyTriangleMask(self.asset, 340);
		}
		if (shapeType === 'yellowStarOutline') {
			applyStarMask(self.asset, 340);
		}
		// New outline masks
		if (shapeType === 'purplePentagonOutline') {
			applyPentagonMask(self.asset, 340);
		}
		if (shapeType === 'orangeHexagonOutline') {
			applyHexagonMask(self.asset, 340);
		}
		if (shapeType === 'cyanDiamondOutline') {
			applyDiamondMask(self.asset, 340);
		}
		if (shapeType === 'pinkHeartOutline') {
			applyHeartMask(self.asset, 340);
		}
		if (shapeType === 'brownTrapezoidOutline') {
			applyTrapezoidMask(self.asset, 340);
		}
		if (shapeType === 'tealHeptagonOutline') {
			applyHeptagonMask(self.asset, 340);
		}
		if (shapeType === 'navyOctagonOutline') {
			applyOctagonMask(self.asset, 340);
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// --- Level Data ---
// Shapes: Red Square, Blue Circle, Green Triangle, Yellow Star
// We'll mask this to triangle
// We'll mask this to star
// Outlines (use transparent fill, colored border)
// Sound for correct match
// Helper: Triangle Mask
// New shapes
function applyTriangleMask(container, size) {
	// Create a triangle mask using a box and set its visible area
	// Since we can't draw, we use scale/skew to fake a triangle
	// We'll just scaleY to 0.5 and rotate
	container.rotation = Math.PI / 4;
	container.scaleY = 0.58;
}
// Helper: Star Mask
function applyStarMask(container, size) {
	// We can't draw a star, so we just use a box for now
	// In future, swap to a star asset if available
}
// Helper: Pentagon Mask
function applyPentagonMask(container, size) {
	// We can't draw a pentagon, so we just use a box for now
	// In future, swap to a pentagon asset if available
}
// Helper: Hexagon Mask
function applyHexagonMask(container, size) {
	// We can't draw a hexagon, so we just use a box for now
	// In future, swap to a hexagon asset if available
}
// Helper: Heptagon Mask
function applyHeptagonMask(container, size) {
	// We can't draw a heptagon, so we just use a box for now
	// In future, swap to a heptagon asset if available
}
// Helper: Octagon Mask
function applyOctagonMask(container, size) {
	// We can't draw an octagon, so we just use a box for now
	// In future, swap to an octagon asset if available
	// Optionally, scale down slightly to visually distinguish
	container.scaleX = 0.92;
	container.scaleY = 0.92;
}
// Helper: Diamond Mask
function applyDiamondMask(container, size) {
	// We can't draw a diamond, so we just use a box for now
	// In future, swap to a diamond asset if available
	container.rotation = Math.PI / 4;
}
// Helper: Heart Mask
function applyHeartMask(container, size) {
	// We can't draw a heart, so we just use a box for now
	// In future, swap to a heart asset if available
}
// Helper: Trapezoid Mask
function applyTrapezoidMask(container, size) {
	// We can't draw a trapezoid, so we just use a box for now
	// In future, swap to a trapezoid asset if available
}
// Generate 200 levels with different shape combinations
var allShapes = [{
	shape: 'redSquare',
	outline: 'redSquareOutline'
}, {
	shape: 'blueCircle',
	outline: 'blueCircleOutline'
}, {
	shape: 'greenTriangle',
	outline: 'greenTriangleOutline'
}, {
	shape: 'yellowStar',
	outline: 'yellowStarOutline'
}, {
	shape: 'purplePentagon',
	outline: 'purplePentagonOutline'
}, {
	shape: 'orangeHexagon',
	outline: 'orangeHexagonOutline'
}, {
	shape: 'cyanDiamond',
	outline: 'cyanDiamondOutline'
}, {
	shape: 'pinkHeart',
	outline: 'pinkHeartOutline'
}, {
	shape: 'brownTrapezoid',
	outline: 'brownTrapezoidOutline'
}, {
	shape: 'tealHeptagon',
	outline: 'tealHeptagonOutline'
}, {
	shape: 'navyOctagon',
	outline: 'navyOctagonOutline'
}];
var levels = [];
for (var i = 0; i < 200; ++i) {
	// Gradually increase number of options: 3 for early, 4 for mid, 5 for late levels
	var numShapes;
	if (i < 30) {
		numShapes = 3;
	} else if (i < 100) {
		numShapes = 4;
	} else {
		numShapes = 5;
	}
	// Pick a unique combination for this level
	var indices = [];
	for (var j = 0; j < allShapes.length; ++j) indices.push(j);
	// Shuffle indices
	for (var j = indices.length - 1; j > 0; --j) {
		var k = Math.floor(Math.random() * (j + 1));
		var tmp = indices[j];
		indices[j] = indices[k];
		indices[k] = tmp;
	}
	var levelShapes = [];
	for (var j = 0; j < numShapes; ++j) {
		levelShapes.push({
			shape: allShapes[indices[j]].shape,
			outline: allShapes[indices[j]].outline
		});
	}
	levels.push(levelShapes);
}
var currentLevel = 0;
var draggableShapes = [];
var outlineTargets = [];
var dragNode = null;
var dragOffsetX = 0;
var dragOffsetY = 0;
var matchedCount = 0;
// --- GUI: Level Text ---
var levelTxt = new Text2('Level 1', {
	size: 120,
	fill: 0x333333
});
levelTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(levelTxt);
// --- Helper: Layout ---
function layoutLevel(shapes) {
	// Remove previous
	for (var i = 0; i < draggableShapes.length; ++i) draggableShapes[i].destroy();
	for (var i = 0; i < outlineTargets.length; ++i) outlineTargets[i].destroy();
	draggableShapes = [];
	outlineTargets = [];
	matchedCount = 0;
	// Layout outlines in a row near the top, with randomized X positions
	var n = shapes.length;
	// Reduce spacing and Y for mobile, and bring outlines lower for thumb reach
	var spacing = 340;
	var outlineY = 520;
	var outlineXs = [];
	var outlineStartX = 180;
	var outlineEndX = 2048 - 180;
	var outlineAvailableWidth = outlineEndX - outlineStartX;
	for (var i = 0; i < n; ++i) {
		outlineXs.push(outlineStartX + Math.round(i * outlineAvailableWidth / (n - 1)));
	}
	// Shuffle outline Xs for randomness
	for (var i = n - 1; i > 0; --i) {
		var j = Math.floor(Math.random() * (i + 1));
		var tmp = outlineXs[i];
		outlineXs[i] = outlineXs[j];
		outlineXs[j] = tmp;
	}
	for (var i = 0; i < n; ++i) {
		var outline = new OutlineTarget();
		outline.init(shapes[i].outline);
		outline.x = outlineXs[i];
		outline.y = outlineY;
		outline.isFake = false;
		game.addChild(outline);
		outlineTargets.push(outline);
	}
	// Layout shapes in a row near the bottom, with randomized X positions
	// Bring shapes up for mobile, reduce horizontal padding
	var shapeY = 1550;
	var shapeXs = [];
	var shapeStartX = 180;
	var shapeEndX = 2048 - 180;
	var shapeAvailableWidth = shapeEndX - shapeStartX;
	for (var i = 0; i < n; ++i) {
		shapeXs.push(shapeStartX + Math.round(i * shapeAvailableWidth / (n - 1)));
	}
	// Shuffle shape Xs for randomness
	for (var i = n - 1; i > 0; --i) {
		var j = Math.floor(Math.random() * (i + 1));
		var tmp = shapeXs[i];
		shapeXs[i] = shapeXs[j];
		shapeXs[j] = tmp;
	}
	// Shuffle shape order for matching
	var shapeOrder = [];
	for (var i = 0; i < n; ++i) shapeOrder.push(i);
	// Shuffle
	for (var i = n - 1; i > 0; --i) {
		var j = Math.floor(Math.random() * (i + 1));
		var tmp = shapeOrder[i];
		shapeOrder[i] = shapeOrder[j];
		shapeOrder[j] = tmp;
	}
	for (var i = 0; i < n; ++i) {
		var idx = shapeOrder[i];
		var shape = new DraggableShape();
		shape.init(shapes[idx].shape);
		shape.x = shapeXs[i];
		shape.y = shapeY;
		shape.matchOutline = outlineTargets[idx];
		shape.isFake = false;
		game.addChild(shape);
		draggableShapes.push(shape);
	}
}
// --- Helper: Start Level ---
function startLevel(levelIdx) {
	currentLevel = levelIdx;
	levelTxt.setText('Level ' + (currentLevel + 1));
	layoutLevel(levels[currentLevel]);
}
// --- Helper: Next Level or Win ---
function nextLevelOrWin() {
	if (currentLevel + 1 < levels.length) {
		LK.setTimeout(function () {
			startLevel(currentLevel + 1);
		}, 900);
	} else {
		LK.setTimeout(function () {
			LK.showYouWin();
		}, 900);
	}
}
// --- Dragging Logic ---
function getShapeAt(x, y) {
	for (var i = 0; i < draggableShapes.length; ++i) {
		var s = draggableShapes[i];
		if (s.isMatched) continue;
		var dx = x - s.x;
		var dy = y - s.y;
		var r = 110;
		if (dx * dx + dy * dy < r * r) return s;
	}
	return null;
}
// --- Event Handlers ---
game.down = function (x, y, obj) {
	// Only allow one drag at a time
	if (dragNode) return;
	var shape = getShapeAt(x, y);
	if (shape && !shape.isMatched) {
		dragNode = shape;
		dragOffsetX = x - shape.x;
		dragOffsetY = y - shape.y;
		// Bring to front
		game.removeChild(shape);
		game.addChild(shape);
	}
};
game.move = function (x, y, obj) {
	if (dragNode && !dragNode.isMatched) {
		dragNode.x = x - dragOffsetX;
		dragNode.y = y - dragOffsetY;
	}
};
game.up = function (x, y, obj) {
	if (!dragNode) return;
	if (dragNode.isMatched) {
		dragNode = null;
		return;
	}
	// Check if close to any outline
	var outline = dragNode.matchOutline;
	var dx = dragNode.x - outline.x;
	var dy = dragNode.y - outline.y;
	var dist = Math.sqrt(dx * dx + dy * dy);
	// Check if dropped close to any outline (not just its own)
	var matchedToAny = null;
	for (var i = 0; i < outlineTargets.length; ++i) {
		var o = outlineTargets[i];
		var ddx = dragNode.x - o.x;
		var ddy = dragNode.y - o.y;
		var d = Math.sqrt(ddx * ddx + ddy * ddy);
		if (d < 70) {
			matchedToAny = o;
			break;
		}
	}
	if (matchedToAny) {
		// If not the correct outline, restart from level 1
		if (matchedToAny !== outline) {
			for (var i = 0; i < draggableShapes.length; ++i) {
				var s = draggableShapes[i];
				if (!s.isMatched) {
					tween(s, {
						x: s.x,
						y: 2000
					}, {
						duration: 200
					});
				}
			}
			// Restart from level 1 after short delay
			LK.setTimeout(function () {
				startLevel(0);
			}, 400);
			dragNode = null;
			return;
		}
		// Snap to outline, mark as matched
		dragNode.isMatched = true;
		dragNode.moveTo(outline.x, outline.y, 200, function () {
			// Animate outline to full alpha
			tween(outline.asset, {
				alpha: 0.7
			}, {
				duration: 200
			});
		});
		LK.getSound('match').play();
		matchedCount++;
		// Animate shape scale
		if (dragNode) {
			tween(dragNode, {
				scaleX: 1.15,
				scaleY: 1.15
			}, {
				duration: 120,
				onFinish: function onFinish() {
					if (dragNode) {
						tween(dragNode, {
							scaleX: 1,
							scaleY: 1
						}, {
							duration: 120
						});
					}
				}
			});
		}
		// All matched?
		// Only count non-fake shapes for win
		var realMatched = 0;
		for (var i = 0; i < draggableShapes.length; ++i) {
			if (draggableShapes[i].isMatched && !draggableShapes[i].isFake) realMatched++;
		}
		var realTotal = 0;
		for (var i = 0; i < draggableShapes.length; ++i) {
			if (!draggableShapes[i].isFake) realTotal++;
		}
		if (realMatched === realTotal) {
			// Animate all shapes up
			for (var i = 0; i < draggableShapes.length; ++i) {
				tween(draggableShapes[i], {
					y: draggableShapes[i].y - 120
				}, {
					duration: 200
				});
			}
			nextLevelOrWin();
		}
	} else {
		// Animate back to start
		var n = draggableShapes.length;
		var spacing = 340;
		var startX = 2048 / 2 - (n - 1) * spacing / 2;
		var shapeY = 1550;
		var idx = draggableShapes.indexOf(dragNode);
		dragNode.moveTo(startX + idx * spacing, shapeY, 200);
	}
	dragNode = null;
};
// --- Start Game ---
startLevel(0);