EventSnap/frontend/src/routes/account/+page.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { getToken, getPin, getDisplayName, getExpiry, getRole, clearAuth } from '$lib/auth';
	import { api } from '$lib/api';
	import { onMount } from 'svelte';

	let pin = $state<string | null>(null);
	let displayName = $state<string | null>(null);
	let role = $state<'guest' | 'host' | 'admin' | null>(null);
	let expiry = $state<Date | null>(null);
	let pinCopied = $state(false);
	let leaveConfirmOpen = $state(false);

	onMount(() => {
		if (!getToken()) {
			goto('/join');
			return;
		}
		pin = getPin();
		displayName = getDisplayName();
		role = getRole();
		expiry = getExpiry();
	});

	function copyPin() {
		if (!pin) return;
		navigator.clipboard.writeText(pin);
		pinCopied = true;
		setTimeout(() => (pinCopied = false), 2000);
	}

	async function handleLogout() {
		try { await api.delete('/session'); } catch { /* ignore */ }
		clearAuth();
		goto('/join');
	}

	function formatDate(d: Date): string {
		return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
	}

	function roleLabel(r: string | null): string {
		switch (r) {
			case 'admin': return 'Admin';
			case 'host': return 'Gastgeber';
			default: return 'Gast';
		}
	}

	function roleColor(r: string | null): string {
		switch (r) {
			case 'admin': return 'bg-red-100 text-red-700';
			case 'host': return 'bg-purple-100 text-purple-700';
			default: return 'bg-blue-100 text-blue-700';
		}
	}

	function avatarColor(name: string | null): string {
		if (!name) return 'bg-gray-100 text-gray-500';
		const COLORS = ['bg-blue-100 text-blue-700','bg-purple-100 text-purple-700','bg-green-100 text-green-700','bg-amber-100 text-amber-700','bg-rose-100 text-rose-700'];
		let hash = 0;
		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
		return COLORS[hash % COLORS.length];
	}
</script>

<div class="min-h-screen bg-gray-50 pb-24">
	<!-- Header -->
	<div class="border-b border-gray-200 bg-white">
		<div class="mx-auto flex max-w-lg items-center px-4 py-4">
			<h1 class="text-xl font-bold text-gray-900">Mein Konto</h1>
		</div>
	</div>

	<div class="mx-auto max-w-lg space-y-3 p-4">
		<!-- Profile card -->
		<div class="rounded-xl border border-gray-200 bg-white p-5">
			<div class="flex items-center gap-4">
				<div
					class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
						{avatarColor(displayName)}"
				>
					{displayName ? displayName[0].toUpperCase() : '?'}
				</div>
				<div class="min-w-0">
					<p class="truncate text-lg font-bold text-gray-900">{displayName ?? 'Unbekannt'}</p>
					<span class="mt-0.5 inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold {roleColor(role)}">
						{roleLabel(role)}
					</span>
				</div>
			</div>
			{#if expiry}
				<p class="mt-3 text-xs text-gray-400">Sitzung gültig bis {formatDate(expiry)}</p>
			{/if}
		</div>

		<!-- Dashboards section (host + admin only) -->
		{#if role === 'host' || role === 'admin'}
			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
				<div class="border-b border-gray-100 px-5 py-3">
					<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Dashboards</h2>
				</div>
				<a
					href="/host"
					class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
				>
					<!-- Star icon -->
					<svg class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
						<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
					</svg>
					<span class="flex-1 font-medium text-gray-900">Host-Dashboard</span>
					<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
						<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
					</svg>
				</a>
				{#if role === 'admin'}
					<a
						href="/admin"
						class="flex items-center gap-3 border-t border-gray-100 px-5 py-4 transition hover:bg-gray-50"
					>
						<!-- Shield icon -->
						<svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
							<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
						</svg>
						<span class="flex-1 font-medium text-gray-900">Admin-Dashboard</span>
						<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
							<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
						</svg>
					</a>
				{/if}
			</div>
		{/if}

		<!-- PIN card -->
		<div class="rounded-xl border border-amber-200 bg-amber-50 p-5">
			<h2 class="mb-1 font-semibold text-amber-900">Wiederherstellungs-PIN</h2>
			<p class="mb-3 text-sm text-amber-700">
				Du brauchst diesen PIN, um dein Konto auf einem anderen Gerät wiederherzustellen. Schreib ihn auf!
			</p>
			{#if pin}
				<div class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm">
					<span class="font-mono text-4xl font-bold tracking-widest text-gray-900">{pin}</span>
					<button
						onclick={copyPin}
						class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-200"
					>
						{pinCopied ? 'Kopiert!' : 'Kopieren'}
					</button>
				</div>
			{:else}
				<div class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm">
					PIN nicht gespeichert. Nutze die Wiederherstellungs-Seite, um dich mit deinem PIN anzumelden.
				</div>
			{/if}
		</div>

		<!-- Konto section -->
		<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
			<div class="border-b border-gray-100 px-5 py-3">
				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Konto</h2>
			</div>

			<!-- Recover / device switch -->
			<a
				href="/recover"
				class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
			>
				<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
					<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3h3m-3 3h3" />
				</svg>
				<span class="flex-1 text-sm font-medium text-gray-700">Gerät wechseln / PIN nutzen</span>
				<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
				</svg>
			</a>

			<!-- Leave / logout -->
			<button
				onclick={() => (leaveConfirmOpen = true)}
				class="flex w-full items-center gap-3 border-t border-gray-100 px-5 py-4 text-left transition hover:bg-red-50"
			>
				<svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
					<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
				</svg>
				<span class="flex-1 text-sm font-medium text-red-600">Event verlassen</span>
			</button>
		</div>
	</div>
</div>

<!-- Leave-confirm bottom sheet -->
{#if leaveConfirmOpen}
	<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)} aria-hidden="true">
		<div
			class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6"
			onclick={(e) => e.stopPropagation()}
			onkeydown={(e) => e.stopPropagation()}
			role="dialog"
			aria-modal="true"
			tabindex="-1"
		>
			<div class="mb-4 flex justify-center">
				<div class="h-1 w-10 rounded-full bg-gray-300"></div>
			</div>
			<h3 class="mb-1 text-center text-lg font-bold text-gray-900">Event verlassen?</h3>
			<p class="mb-6 text-center text-sm text-gray-500">
				Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
			</p>
			<button
				onclick={handleLogout}
				class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700"
			>
				Abmelden
			</button>
			<button
				onclick={() => (leaveConfirmOpen = false)}
				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
			>
				Abbrechen
			</button>
		</div>
	</div>
{/if}