<script>
	import Footer from '../../components/Footer.svelte';
	import { onMount } from 'svelte';
	
	let selectedCategory = null;
	
	const categories = [
		{
			id: 'ranks',
			name: 'Ranks',
			description: 'Unlock exclusive perks and benefits with permanent rank upgrades',
			image: 'https://placehold.co/256x256/FFD700/31343C?text=Ranks',
			color: '#FFD700'
		},
		{
			id: 'boons',
			name: 'Boons',
			description: 'Temporary boosters for XP, Skycoins, and Crystals to accelerate your progress',
			image: 'https://placehold.co/256x256/9B59B6/31343C?text=Boons',
			color: '#9B59B6'
		},
		{
			id: 'crates',
			name: 'Crates',
			description: 'Mystery boxes filled with cosmetics, effects, and exclusive rewards',
			image: 'https://placehold.co/256x256/E67E22/31343C?text=Crates',
			color: '#E67E22'
		},
		{
			id: 'crystals',
			name: 'Crystals',
			description: 'Premium currency bundles for all your in-game purchases',
			image: 'https://placehold.co/256x256/3498DB/31343C?text=Crystals',
			color: '#3498DB'
		}
	];
	
	const storeData = {
		ranks: [
			{
				name: 'VIP',
				price: 9.99,
				tpi: 7258582,
				icon: 'https://placehold.co/128x128/667eea/FFF?text=VIP',
				description: 'Access to VIP perks and features',
				details: ['Exclusive chat color', 'Priority queue access', '2 extra homes', 'VIP prefix'],
				popular: false
			},
			{
				name: 'VIP+',
				price: 19.99,
				tpi: 7258582,
				icon: 'https://placehold.co/128x128/764ba2/FFF?text=VIP%2B',
				description: 'Enhanced VIP experience with more benefits',
				details: ['All VIP perks', 'Particle effects', '5 extra homes', 'Custom nickname', 'VIP+ prefix'],
				popular: true
			},
			{
				name: 'MVP',
				price: 34.99,
				tpi: 7258582,
				icon: 'https://placehold.co/128x128/e74c3c/FFF?text=MVP',
				description: 'Maximum value package with all perks',
				details: ['All VIP+ perks', 'Exclusive cosmetics', '10 extra homes', 'Pet access', 'MVP prefix'],
				popular: false
			},
			{
				name: 'LEGEND',
				price: 59.99,
				tpi: 7258582,
				icon: 'https://placehold.co/128x128/f39c12/FFF?text=LEGEND',
				description: 'The ultimate rank with legendary status',
				details: ['All MVP perks', 'Legendary prefix', 'Exclusive mounts', '20 extra homes', 'Priority support'],
				popular: false
			}
		],
		boons: [
			{
				name: 'Boon of Skycoin (1.5x)',
				price: 1.80,
				tpi: 1,
				icon: 'https://placehold.co/128x128/f1c40f/31343C?text=1.5x',
				bonus: 'Purchasing 5 gives 1 for free',
				description: '1 hour of 1.5x Skycoin earnings',
				details: ['Duration: 1 hour', 'Multiplier: 1.5x', 'Stackable: No']
			},
			{
				name: 'Boon of Skycoin (2x)',
				price: 2.50,
				tpi: 1,
				icon: 'https://placehold.co/128x128/f39c12/31343C?text=2x',
				bonus: 'Purchasing 5 gives 1 for free',
				description: '1 hour of 2x Skycoin earnings',
				details: ['Duration: 1 hour', 'Multiplier: 2x', 'Stackable: No']
			},
			{
				name: 'Boon of Crystals (1.5x)',
				price: 1.80,
				tpi: 1,
				icon: 'https://placehold.co/128x128/3498db/FFF?text=1.5x',
				bonus: 'Purchasing 5 gives 1 for free',
				description: '1 hour of 1.5x Crystal earnings',
				details: ['Duration: 1 hour', 'Multiplier: 1.5x', 'Stackable: No']
			},
			{
				name: 'Boon of Crystals (2x)',
				price: 2.50,
				tpi: 1,
				icon: 'https://placehold.co/128x128/2980b9/FFF?text=2x',
				bonus: 'Purchasing 5 gives 1 for free',
				description: '1 hour of 2x Crystal earnings',
				details: ['Duration: 1 hour', 'Multiplier: 2x', 'Stackable: No']
			},
			{
				name: 'Boon of XP (1.5x)',
				price: 1.80,
				tpi: 1,
				icon: 'https://placehold.co/128x128/27ae60/FFF?text=1.5x',
				bonus: 'Purchasing 5 gives 1 for free',
				description: '1 hour of 1.5x XP earnings',
				details: ['Duration: 1 hour', 'Multiplier: 1.5x', 'Stackable: No']
			},
			{
				name: 'Boon of XP (2x)',
				price: 2.50,
				tpi: 1,
				icon: 'https://placehold.co/128x128/229954/FFF?text=2x',
				bonus: 'Purchasing 5 gives 1 for free',
				description: '1 hour of 2x XP earnings',
				details: ['Duration: 1 hour', 'Multiplier: 2x', 'Stackable: No']
			}
		],
		crates: [
			{
				name: 'Cosmetic Crate',
				price: 1.00,
				tpi: 1,
				icon: 'https://placehold.co/128x128/e91e63/FFF?text=Cosmetic',
				bonus: 'Purchasing 5 gives 1 for free',
				description: 'Random cosmetic items and skins',
				details: ['Cosmetic items', 'Rare skins', 'Particle effects']
			},
			{
				name: 'Map Completion Effects Container',
				price: 2.00,
				tpi: 1,
				icon: 'https://placehold.co/128x128/9c27b0/FFF?text=Map',
				bonus: 'Purchasing 5 gives 1 for free',
				description: 'Special effects for map completion',
				details: ['Unique effects', 'Completion rewards', 'Visual enhancements']
			},
			{
				name: 'Firework Freight',
				price: 2.50,
				tpi: 1,
				icon: 'https://placehold.co/128x128/ff5722/FFF?text=Firework',
				bonus: 'Purchasing 5 gives 1 for free',
				description: 'Explosive firework effects and particles',
				details: ['Firework effects', 'Custom particles', 'Celebration items']
			},
			{
				name: 'Title Chest',
				price: 1.50,
				tpi: 1,
				icon: 'https://placehold.co/128x128/795548/FFF?text=Title',
				bonus: 'Purchasing 5 gives 1 for free',
				description: 'Unlock unique player titles',
				details: ['Exclusive titles', 'Custom text', 'Rare prefixes']
			},
			{
				name: 'EMC Company Cache',
				price: 5.00,
				tpi: 1,
				icon: 'https://placehold.co/128x128/607d8b/FFF?text=EMC',
				bonus: 'Purchasing 5 gives 1 for free',
				description: 'Premium items and exclusive rewards',
				details: ['Premium items', 'Exclusive content', 'Rare drops']
			}
		],
		crystals: [
			{
				name: 'Paystub of Crystals',
				price: 0.50,
				tpi: 1,
				icon: 'https://placehold.co/128x128/00bcd4/FFF?text=100',
				quantity: 100,
				value: 5,
				description: 'Small crystal bundle',
				details: ['100 Crystals', 'Value: $5.00 per 1k']
			},
			{
				name: 'Bonus of Crystals',
				price: 4.99,
				tpi: 1,
				icon: 'https://placehold.co/128x128/03a9f4/FFF?text=1k',
				quantity: 1000,
				value: 4.99,
				description: 'Standard crystal bundle',
				details: ['1,000 Crystals', 'Value: $4.99 per 1k']
			},
			{
				name: 'Salary of Crystals',
				price: 10.99,
				tpi: 1,
				icon: 'https://placehold.co/128x128/2196f3/FFF?text=5k',
				quantity: 5000,
				value: 2.2,
				description: 'Large crystal bundle',
				details: ['5,000 Crystals', 'Value: $2.20 per 1k'],
				popular: true
			},
			{
				name: 'Contract of Crystals',
				price: 21.49,
				tpi: 1,
				icon: 'https://placehold.co/128x128/1976d2/FFF?text=10k',
				quantity: 10000,
				value: 2.15,
				description: 'Extra large crystal bundle',
				details: ['10,000 Crystals', 'Value: $2.15 per 1k']
			},
			{
				name: 'Landmark Cache of Crystals',
				price: 54.99,
				tpi: 1,
				icon: 'https://placehold.co/128x128/1565c0/FFF?text=30k',
				quantity: 30000,
				value: 1.83,
				description: 'Massive crystal bundle',
				details: ['30,000 Crystals', 'Value: $1.83 per 1k']
			},
			{
				name: 'Flagship Agreement of Crystals',
				price: 119.99,
				tpi: 1,
				icon: 'https://placehold.co/128x128/0d47a1/FFF?text=100k',
				quantity: 100000,
				value: 1.2,
				description: 'Ultimate crystal bundle',
				details: ['100,000 Crystals', 'Value: $1.20 per 1k']
			}
		]
	};
	
	function selectCategory(categoryId) {
		selectedCategory = categoryId;
	}
	
	function goBack() {
		selectedCategory = null;
	}

	async function buy(packageId) {
		const mcusername = prompt('Enter your Minecraft username:');
		if (!mcusername) return;

		const res = await fetch('/api/checkout', {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify({ packageId, mcusername })
		});

		const data = await res.json();
		window.location.href = data.url;
	}

	onMount(() => {
		const params = new URLSearchParams(window.location.search);
		const status = params.get('checkout');

		if (status === 'success') {
			alert('Payment successful! Your purchase will be delivered shortly.');
			history.replaceState({}, '', '/');
		}

		if (status === 'cancel') {
			alert('Payment cancelled.');
			history.replaceState({}, '', '/');
		}
	});
</script>

<div class="page">
	<div class="container">
		{#if !selectedCategory}
			<div class="store-header">
				<h1>Store</h1>
				<p>Purchase ranks, boosters, and premium items</p>
			</div>
			
			<div class="categories-grid">
				{#each categories as category}
					<button class="category-card" on:click={() => selectCategory(category.id)}>
						<div class="category-image" style="background: linear-gradient(135deg, {category.color}22, {category.color}44);">
							<img src={category.image} alt={category.name} class="category-img" />
						</div>
						<div class="category-plate">
							<h3 class="category-name">{category.name}</h3>
						</div>
					</button>
				{/each}
			</div>
		{:else}
			<div class="category-view">
				<button class="back-button" on:click={goBack}>
					← Back to Store
				</button>
				
				<div class="category-hero">
					<h1>{categories.find(c => c.id === selectedCategory).name}</h1>
					<p class="category-subtitle">{categories.find(c => c.id === selectedCategory).description}</p>
				</div>
				
				<div class="items-container">
					{#each storeData[selectedCategory] as item}
						<div class="item-card" class:item-card--popular={item.popular}>
							{#if item.popular}
								<div class="popular-ribbon">MOST POPULAR</div>
							{/if}
							
							<div class="item-icon-wrapper">
								<img src={item.icon} alt={item.name} class="item-icon-img" />
							</div>
							
							<h3 class="item-name">{item.name}</h3>
							
							<p class="item-description">{item.description}</p>
							
							{#if item.bonus}
								<div class="item-bonus">
									🎁 {item.bonus}
								</div>
							{/if}
							
							<div class="item-details">
								{#each item.details as detail}
									<div class="detail-item">• {detail}</div>
								{/each}
							</div>
							
							{#if item.tpi && item.price}
								<button class="purchase-btn" on:click={() => buy(item.tpi)}>
									<span class="purchase-text">Purchase</span>
									<span class="purchase-price">${item.price.toFixed(2)}</span>
								</button>
							{/if}
						</div>
					{/each}
				</div>
			</div>
		{/if}
	</div>
</div>

<Footer />

<style lang="scss">
	.page {
		padding: 150px 0 50px;
		min-height: calc(100vh - 400px);
	}
	
	.store-header {
		text-align: center;
		margin-bottom: 60px;
		
		h1 {
			margin: 0 0 10px 0;
			color: #2c3e50;
			font-size: 42px;
			font-weight: 700;
		}
		
		p {
			margin: 0;
			color: #7f8c8d;
			font-size: 18px;
		}
	}
	
	.categories-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 35px;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
	}
	
	.category-card {
		background: transparent;
		border: none;
		cursor: pointer;
		transition: all 0.3s ease;
		padding: 0;
		
		&:hover {
			transform: translateY(-8px);
			
			.category-image {
				box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
			}
			
			.category-plate {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: white;
			}
		}
	}
	
	.category-image {
		height: 200px;
		background: #f8f9fa;
		border-radius: 12px 12px 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		margin-bottom: -2px;
	}
	
	.category-img {
		width: 120px;
		height: 120px;
		object-fit: contain;
	}
	
	.category-plate {
		background: white;
		border-radius: 0 0 12px 12px;
		padding: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}
	
	.category-name {
		margin: 0;
		color: #2c3e50;
		font-size: 22px;
		font-weight: 700;
	}
	
	.category-view {
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 20px;
	}
	
	.back-button {
		background: white;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		padding: 12px 24px;
		cursor: pointer;
		font-weight: 600;
		font-size: 15px;
		color: #555;
		transition: all 0.2s;
		margin-bottom: 40px;
		
		&:hover {
			border-color: #667eea;
			color: #667eea;
			transform: translateX(-3px);
		}
	}
	
	.category-hero {
		text-align: center;
		margin-bottom: 50px;
		
		h1 {
			margin: 0 0 15px 0;
			color: #2c3e50;
			font-size: 42px;
			font-weight: 700;
		}
		
		.category-subtitle {
			margin: 0;
			color: #7f8c8d;
			font-size: 18px;
			line-height: 1.6;
			max-width: 700px;
			margin: 0 auto;
		}
	}
	
	.items-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 30px;
		margin-bottom: 50px;
	}
	
	.item-card {
		background: white;
		border: 2px solid #e0e0e0;
		border-radius: 12px;
		padding: 35px 25px 25px;
		transition: all 0.3s ease;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		
		&:hover {
			border-color: #667eea;
			box-shadow: 0 12px 30px rgba(102, 126, 234, 0.15);
			transform: translateY(-5px);
		}
		
		&--popular {
			border-color: #667eea;
			border-width: 3px;
			background: linear-gradient(to bottom, #f8f9ff, white);
		}
	}
	
	.popular-ribbon {
		position: absolute;
		top: 15px;
		right: -35px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 6px 40px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 1px;
		transform: rotate(45deg);
		box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
	}
	
	.item-icon-wrapper {
		margin-bottom: 20px;
	}
	
	.item-icon-img {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		object-fit: cover;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		
		.item-card:hover & {
			transform: scale(1.05);
			box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
		}
	}
	
	.item-name {
		margin: 0 0 12px 0;
		color: #2c3e50;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.3;
	}
	
	.item-description {
		margin: 0 0 15px 0;
		color: #7f8c8d;
		font-size: 14px;
		line-height: 1.5;
	}
	
	.item-bonus {
		background: linear-gradient(135deg, #fff3cd, #ffeaa7);
		border-left: 3px solid #f39c12;
		padding: 10px 15px;
		margin: 0 0 20px 0;
		font-size: 12px;
		color: #2c3e50;
		border-radius: 6px;
		width: 100%;
		box-sizing: border-box;
		font-weight: 600;
	}
	
	.item-details {
		width: 100%;
		margin-bottom: 25px;
		flex-grow: 1;
	}
	
	.detail-item {
		padding: 8px 0;
		color: #555;
		font-size: 13px;
		text-align: left;
		border-bottom: 1px solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
	}
	
	.purchase-btn {
		width: 100%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border: none;
		border-radius: 8px;
		padding: 16px;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: white;
		font-weight: 700;
		font-size: 16px;
		
		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
		}
		
		&:active {
			transform: translateY(0);
		}
	}
	
	.purchase-text {
		flex: 1;
		text-align: left;
	}
	
	.purchase-price {
		background: rgba(255, 255, 255, 0.2);
		padding: 6px 14px;
		border-radius: 6px;
		font-size: 18px;
	}
	
	@media (max-width: 1024px) {
		.categories-grid {
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 25px;
		}
		
		.items-container {
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
			gap: 25px;
		}
	}
	
	@media (max-width: 768px) {
		.page {
			padding: 120px 0 30px;
		}
		
		.store-header {
			margin-bottom: 40px;
			
			h1 {
				font-size: 32px;
			}
			
			p {
				font-size: 16px;
			}
		}
		
		.categories-grid {
			grid-template-columns: 1fr;
			gap: 20px;
			padding: 0 15px;
		}
		
		.category-image {
			height: 180px;
		}
		
		.category-img {
			width: 100px;
			height: 100px;
		}
		
		.category-hero {
			margin-bottom: 35px;
			
			h1 {
				font-size: 32px;
			}
			
			.category-subtitle {
				font-size: 16px;
			}
		}
		
		.items-container {
			grid-template-columns: 1fr;
			gap: 20px;
		}
		
		.item-card {
			padding: 30px 20px 20px;
		}
		
		.back-button {
			padding: 10px 20px;
			font-size: 14px;
		}
	}
</style>