<script lang="ts">
	import { currentUser } from '$lib/stores/user';
	import { t } from '$lib/i18n';

	$: alliance = $currentUser?.alliance;
	$: role = $currentUser?.allianceRole;
</script>

<div class="card bg-base-100 shadow-xl">
	<div class="card-body">
		<h2 class="card-title">Alliance</h2>

		{#if alliance}
			<div class="space-y-3">
				<div>
					<p class="text-xs uppercase text-base-content/50">Alliance Name</p>
					<p class="text-lg font-semibold">{alliance.name}</p>
				</div>

				{#if alliance.description}
					<div>
						<p class="text-xs uppercase text-base-content/50">Description</p>
						<p class="text-sm">{alliance.description}</p>
					</div>
				{/if}

				<div>
					<p class="text-xs uppercase text-base-content/50">Your Role</p>
					<p>
						<span class="badge badge-primary">
							{role === 'owner' ? 'Owner' : role === 'admin' ? 'Admin' : 'Member'}
						</span>
					</p>
				</div>

				<div>
					<p class="text-xs uppercase text-base-content/50">Alliance Pixels</p>
					<p class="text-lg font-semibold">{alliance.pixelsPainted.toLocaleString()}</p>
				</div>

				<div class="card-actions justify-end mt-4">
					<a href="/alliance" class="btn btn-primary btn-sm">
						Manage Alliance
					</a>
				</div>
			</div>
		{:else}
			<div class="space-y-4">
				<p class="text-sm text-base-content/60">
					You are not part of an alliance. Join one to collaborate with other players!
				</p>

				<div class="card-actions justify-end">
					<a href="/alliance" class="btn btn-primary btn-sm">
						Create or Join Alliance
					</a>
				</div>
			</div>
		{/if}
	</div>
</div>
