<script lang="ts">
	import { t } from 'svelte-i18n';
	import type { PageData } from './$types.js';
	import { invalidateAll } from '$app/navigation';
	import Board from '$lib/components/board/Board.svelte';
	import BoardHeader from '$lib/components/board/BoardHeader.svelte';
	import BoardShareDialog from '$lib/components/board/BoardShareDialog.svelte';
	import { broadcastDataChange } from '$lib/utils/broadcastSync.js';

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

	let showShareDialog = $state(false);
	let guestToggleError = $state('');

	async function handleGuestToggle(value: boolean) {
		guestToggleError = '';
		try {
			const res = await fetch(`/api/boards/${data.board.id}`, {
				method: 'PATCH',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({ isGuestAccessible: value })
			});
			if (res.ok) {
				broadcastDataChange('board');
				await invalidateAll();
			} else {
				guestToggleError = 'Failed to update guest access';
			}
		} catch {
			guestToggleError = 'Network error updating guest access';
		}
	}
</script>

<svelte:head>
	<title>{data.board.name} — {$t('app_title')}</title>
</svelte:head>

<div class="p-6">
	<div class="mx-auto max-w-7xl">
		<BoardHeader
			name={data.board.name}
			description={data.board.description}
			icon={data.board.icon}
			boardId={data.board.id}
			canEdit={data.canEdit}
			onShare={() => { showShareDialog = true; }}
		/>

		{#if guestToggleError}
			<p class="mb-2 text-sm text-destructive">{guestToggleError}</p>
		{/if}

		<Board sections={data.board.sections} allApps={data.allApps} />
	</div>
</div>

{#if showShareDialog && data.canEdit}
	<BoardShareDialog
		boardId={data.board.id}
		boardName={data.board.name}
		isGuestAccessible={data.board.isGuestAccessible}
		users={data.users ?? []}
		groups={data.groups ?? []}
		onClose={() => { showShareDialog = false; }}
		onGuestToggle={handleGuestToggle}
	/>
{/if}
