<script lang="ts">
	import { onMount } from 'svelte';
	import type { PageServerData } from './$types';

	let { data }: { data: PageServerData } = $props();

	onMount(() => {
		const events = new EventSource('/api/events');
		events.onmessage = () => {
			window.location.reload();
		};
		return () => events.close();
	});
</script>

<svelte:head>
	<title>Taskarr</title>
</svelte:head>

<main class="mx-auto flex min-h-screen max-w-6xl flex-col gap-8 px-6 py-10">
	<header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
		<div class="flex flex-col gap-2">
			<p class="text-sm uppercase tracking-[0.3em] text-slate-500">Taskarr</p>
			<h1 class="text-4xl font-bold text-slate-900">Projects, tasks, and synced issues in one place</h1>
			<p class="max-w-2xl text-slate-600">A compact SvelteKit workspace for tracking progress, handling tasks, and keeping GitHub or Gitea issues close to the work.</p>
		</div>
		<div class="flex gap-3">
			<a class="rounded-md border border-slate-300 px-4 py-2 text-slate-900" href="/projects">Projects</a>
			<a class="rounded-md bg-blue-600 px-4 py-2 text-white" href="/integrations">Install GitHub App</a>
		</div>
	</header>

	<section class="grid gap-4 md:grid-cols-3">
		<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
			<p class="text-sm text-slate-500">Projects</p>
			<p class="mt-2 text-3xl font-semibold">{data.projects.length}</p>
		</div>
		<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
			<p class="text-sm text-slate-500">Recent tasks</p>
			<p class="mt-2 text-3xl font-semibold">{data.recentTasks.length}</p>
		</div>
		<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
			<p class="text-sm text-slate-500">Recent issues</p>
			<p class="mt-2 text-3xl font-semibold">{data.recentIssues.length}</p>
		</div>
	</section>

	<section class="grid gap-6 lg:grid-cols-2">
		<div class="rounded-2xl border border-blue-200 bg-blue-50 p-5 shadow-sm">
			<h2 class="text-lg font-semibold text-slate-900">Connect GitHub</h2>
			<p class="mt-2 text-sm text-slate-600">Install the GitHub App to link repositories and sync issues into your projects.</p>
			<a class="mt-4 inline-flex rounded-md bg-slate-900 px-4 py-2 text-white" href="/integrations">Go to integrations</a>
		</div>

		<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
			<h2 class="text-lg font-semibold">Projects</h2>
			<div class="mt-4 space-y-3">
				{#each data.projects as project}
					<div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
						<div class="flex items-center justify-between gap-4">
							<div>
								<p class="font-medium text-slate-900">{project.name}</p>
								<p class="text-sm text-slate-500">{project.description}</p>
							</div>
							<span class="text-sm text-slate-500">{project.progress}%</span>
						</div>
						<div class="mt-3 h-2 rounded-full bg-slate-200">
							<div class="h-2 rounded-full bg-blue-600" style={`width: ${project.progress}%`}></div>
						</div>
						<p class="mt-2 text-xs text-slate-500">{project.taskCount} tasks · {project.issueCount} issues · {project.status}</p>
					</div>
				{/each}
			</div>
		</div>

		<div class="grid gap-6">
			<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
				<h2 class="text-lg font-semibold">Recent tasks</h2>
				<div class="mt-4 space-y-3">
					{#each data.recentTasks as task}
						<div class="flex items-center justify-between rounded-xl bg-slate-50 p-4">
							<div>
								<p class="font-medium text-slate-900">{task.title}</p>
								<p class="text-sm text-slate-500">Priority {task.priority} · {task.status}</p>
							</div>
						</div>
					{/each}
				</div>
			</div>

			<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
				<h2 class="text-lg font-semibold">Recent issues</h2>
				<div class="mt-4 space-y-3">
					{#each data.recentIssues as item}
						<div class="rounded-xl bg-slate-50 p-4">
							<p class="font-medium text-slate-900">{item.title}</p>
							<p class="text-sm text-slate-500">{item.provider} · {item.state}</p>
						</div>
					{/each}
				</div>
			</div>
		</div>
	</section>
</main>
