<script lang="ts">
	import Map from '$lib/components/Map.svelte';
	import StatTile from '$lib/components/StatTile.svelte';
	import ActivityItem from '$lib/components/ActivityItem.svelte';
	import { fmtDistance, fmtElevation } from '$lib/format';

	let { data } = $props();
</script>

<svelte:head>
	<title>Streba</title>
</svelte:head>

{#if data.user}
	<h1>Dashboard</h1>
	<p class="page-sub">What everyone on Streba has been up to.</p>
{:else}
	<div class="hero">
		<div>
			<h1>The GPX analyser</h1>
			<p class="page-sub">
				Upload your tracks, analyse every climb - and tick off Alpine peaks along the way.
			</p>
		</div>
		<div class="hero-actions">
			<a class="btn" href="/signup">Sign up</a>
			<a class="btn ghost" href="/login">Sign in</a>
		</div>
	</div>
{/if}

<div class="kpis">
	<StatTile label="Members" value={String(data.totals.users)} />
	<StatTile label="Activities" value={String(data.totals.activities)} />
	<StatTile label="Total distance" value={fmtDistance(data.totals.distance_m)} />
	<StatTile label="Total ascent" value={fmtElevation(data.totals.elev_gain_m)} />
</div>

<h2>Worldmap</h2>
<Map tracks={data.tracks} height="440px" />

<h2>Recent activities</h2>
{#if data.activities.length === 0}
	<div class="card empty">
		<p>Nothing here yet - be the first to upload a track.</p>
		{#if data.user}<a class="btn" href="/upload">Upload a GPX file</a>{/if}
	</div>
{:else}
	<div class="card list">
		{#each data.activities.slice(0, 10) as activity (activity.id)}
			<ActivityItem {activity} />
		{/each}
	</div>
{/if}

{#if data.mine && data.mine.peaksClimbed > 0}
	<div class="card peak-strip">
		<span>
			⛰ You've reached <strong>{data.mine.peaksClimbed}</strong>
			peak{data.mine.peaksClimbed === 1 ? '' : 's'}{#if data.mine.highestAscent},
				highest: <strong>{data.mine.highestAscent.name}</strong>
				({Math.round(data.mine.highestAscent.elevation_m ?? 0).toLocaleString('en-US')} m){/if}.
		</span>
		<a class="btn ghost" href="/peaks">Peak map</a>
	</div>
{/if}

<style>
	.hero {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1.5rem;
		flex-wrap: wrap;
	}
	.hero-actions {
		display: flex;
		gap: 0.6rem;
		padding-top: 0.35rem;
	}
	.kpis {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 0.75rem;
		margin-bottom: 0.5rem;
	}
	.list :global(.item:not(:last-child)) {
		border-bottom: 1px solid var(--border);
	}
	.empty {
		padding: 2rem;
		text-align: center;
	}
	.empty p {
		margin: 0 0 1rem;
		color: var(--text-secondary);
	}
	.peak-strip {
		margin-top: 1.25rem;
		padding: 0.85rem 1.15rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		flex-wrap: wrap;
		color: var(--text-secondary);
		font-size: 0.9rem;
	}
	.peak-strip strong {
		color: var(--text-primary);
	}
</style>
