<script lang="ts">
import CommentThread from './CommentThread.svelte';
import { m } from '$lib/paraglide/messages.js';

type Props = {
	documentId: string;
	annotationId: string;
	canComment: boolean;
	currentUserId: string | null;
	canAdmin: boolean;
	onClose: () => void;
	onCountChange?: (count: number) => void;
};

let {
	documentId,
	annotationId,
	canComment,
	currentUserId,
	canAdmin,
	onClose,
	onCountChange
}: Props = $props();
</script>

<!-- Desktop / tablet panel (≥ sm): absolute overlay on the right side -->
<div
	class="absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l border-line bg-surface shadow-2xl sm:flex"
>
	<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
		<h3 class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
			{m.comment_panel_title()}
		</h3>
		<button
			onclick={onClose}
			aria-label={m.comment_panel_close()}
			class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
		>
			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
			</svg>
		</button>
	</div>
	<div class="flex-1 overflow-y-auto p-4">
		<CommentThread
			documentId={documentId}
			annotationId={annotationId}
			canComment={canComment}
			currentUserId={currentUserId}
			canAdmin={canAdmin}
			loadOnMount={true}
			onCountChange={onCountChange}
		/>
	</div>
</div>

<!-- Mobile modal (< sm): fixed full-screen with slide-up sheet -->
<div class="fixed inset-0 z-50 flex flex-col sm:hidden">
	<!-- Semi-transparent backdrop -->
	<div class="flex-1 bg-black/40" onclick={onClose} role="presentation"></div>

	<!-- Slide-up panel -->
	<div class="flex max-h-[80vh] flex-col rounded-t-2xl bg-surface shadow-2xl">
		<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
			<h3 class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
				{m.comment_panel_title()}
			</h3>
			<button
				onclick={onClose}
				aria-label={m.comment_panel_close()}
				class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
			>
				<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
				</svg>
			</button>
		</div>
		<div class="flex-1 overflow-y-auto p-4">
			<CommentThread
				documentId={documentId}
				annotationId={annotationId}
				canComment={canComment}
				currentUserId={currentUserId}
				canAdmin={canAdmin}
				loadOnMount={true}
				onCountChange={onCountChange}
			/>
		</div>
	</div>
</div>
