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

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

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

<svelte:head>
	<title>{data.project.name} · Taskarr</title>
</svelte:head>

<main class="mx-auto min-h-screen max-w-5xl px-6 py-10">
	<div class="flex items-center justify-between gap-4">
		<div>
			<h1 class="text-3xl font-bold text-slate-900">{data.project.name}</h1>
			<p class="text-slate-600">{data.project.description}</p>
		</div>
		<div class="flex gap-2">
			<a class="rounded-md border border-slate-300 px-4 py-2" href={`/projects/${data.project.id}/link-repository`}>Link repo</a>
			<a class="rounded-md bg-slate-900 px-4 py-2 text-white" href="/projects">Back</a>
		</div>
	</div>

	<div class="mt-8 grid gap-6 lg:grid-cols-2">
		<section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
			<h2 class="text-lg font-semibold">Tasks</h2>
			<form method="post" action="?/createTask" class="mt-4 grid gap-3">
				<input name="title" placeholder="Task title" class="rounded-md border border-slate-300 px-3 py-2" />
				<textarea name="description" placeholder="Task description" class="rounded-md border border-slate-300 px-3 py-2"></textarea>
				{#if form?.error}
					<p class="text-sm text-red-600">{form.error}</p>
				{/if}
				<button class="w-fit rounded-md bg-blue-600 px-4 py-2 text-white">Add task</button>
			</form>

			<div class="mt-6 space-y-3">
				{#each data.tasks 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.status} · priority {item.priority}</p>
						<form method="post" action="?/updateTaskStatus" class="mt-3 flex gap-2">
							<input type="hidden" name="taskId" value={item.id} />
							<select name="status" class="rounded-md border border-slate-300 px-2 py-1 text-sm">
								<option value="todo">Todo</option>
								<option value="doing">Doing</option>
								<option value="blocked">Blocked</option>
								<option value="done">Done</option>
							</select>
							<button class="rounded-md bg-slate-900 px-3 py-1 text-sm text-white">Update</button>
						</form>
					</div>
				{/each}
			</div>
		</section>

		<section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
			<div class="flex items-center justify-between">
				<h2 class="text-lg font-semibold">Issues</h2>
				<form method="post" action="?/syncIssues">
					<button class="rounded-md bg-slate-900 px-4 py-2 text-white">Sync GitHub issues</button>
				</form>
			</div>

			<div class="mt-6 space-y-3">
				{#each data.issues 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>
		</section>
	</div>

	<section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
		<h2 class="text-lg font-semibold">Linked repositories</h2>
		<div class="mt-4 space-y-3">
			{#each data.repositoryLinks as repo}
				<div class="rounded-xl bg-slate-50 p-4">
					<p class="font-medium text-slate-900">{repo.fullName}</p>
					<p class="text-sm text-slate-500">{repo.owner}/{repo.repo}</p>
				</div>
			{/each}
		</div>
	</section>
</main>
