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

type Props = {
	documentId: string;
	activeAnnotationId: string | null;
	activeAnnotationPage: number | null;
	canComment: boolean;
	currentUserId: string | null;
	canAdmin: boolean;
	targetCommentId?: string | null;
	onClose: () => void;
};

let {
	documentId,
	activeAnnotationId,
	activeAnnotationPage,
	canComment,
	currentUserId,
	canAdmin,
	targetCommentId = null,
	onClose
}: Props = $props();

const visible = $derived(activeAnnotationId !== null);
</script>

<div
	class="absolute inset-y-0 right-0 z-10 flex w-80 flex-col border-l border-line bg-surface shadow-[-4px_0_16px_rgba(0,0,0,0.08)] transition-transform duration-200 {visible
		? 'translate-x-0'
		: 'pointer-events-none translate-x-full'}"
	data-testid="annotation-side-panel"
>
	<!-- Header -->
	<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
		<span class="font-sans text-xs font-medium text-ink">
			{m.doc_panel_discussion_annotation_tab({ page: String(activeAnnotationPage ?? '?') })}
		</span>
		<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>

	<!-- Comment thread -->
	<div class="flex-1 overflow-y-auto p-4">
		{#if activeAnnotationId}
			{#key activeAnnotationId}
				<CommentThread
					documentId={documentId}
					annotationId={activeAnnotationId}
					canComment={canComment}
					currentUserId={currentUserId}
					canAdmin={canAdmin}
					targetCommentId={targetCommentId}
					loadOnMount={true}
				/>
			{/key}
		{/if}
	</div>
</div>
