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

type Doc = {
	id: string;
	filePath?: string | null;
	contentType?: string | null;
	fileHash?: string | null;
};

type DrawRect = { x: number; y: number; width: number; height: number; pageNumber: number };

type Props = {
	doc: Doc;
	fileUrl: string;
	isLoading: boolean;
	error: string;
	transcribeMode?: boolean;
	canAnnotate?: boolean;
	blockNumbers?: Record<string, number>;
	annotationReloadKey?: number;
	activeAnnotationId: string | null;
	annotationsDimmed?: boolean;
	flashAnnotationId?: string | null;
	onAnnotationClick: (id: string) => void;
	onTranscriptionDraw?: (rect: DrawRect) => void;
	onAnnotationFocus?: (id: string) => void;
};

let {
	doc,
	fileUrl,
	isLoading,
	error,
	transcribeMode = false,
	canAnnotate = false,
	blockNumbers = {},
	annotationReloadKey = 0,
	activeAnnotationId = $bindable(),
	annotationsDimmed = false,
	flashAnnotationId = null,
	onAnnotationClick,
	onTranscriptionDraw,
	onAnnotationFocus
}: Props = $props();
</script>

<div class="absolute inset-0 bg-pdf-bg">
	{#if isLoading}
		<div class="flex h-full flex-col items-center justify-center text-accent">
			<svg
				class="mb-4 h-8 w-8 animate-spin"
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
			>
				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
				></circle>
				<path
					class="opacity-75"
					fill="currentColor"
					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
				></path>
			</svg>
			<span class="font-sans text-sm tracking-wide">{m.doc_loading()}</span>
		</div>
	{:else if error}
		<div class="flex h-full flex-col items-center justify-center px-4 text-center text-ink-3">
			<p class="mb-2 font-serif">{error}</p>
			{#if doc.filePath}
				<a
					href="/api/documents/{doc.id}/file"
					target="_blank"
					rel="noopener noreferrer"
					class="text-sm underline hover:text-white"
				>
					{m.doc_download_link()}
				</a>
			{/if}
		</div>
	{:else if !doc.filePath}
		<div class="flex h-full flex-col items-center justify-center text-ink-3">
			<div class="mb-6 rounded-full bg-surface/5 p-8">
				<img
					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
					alt=""
					aria-hidden="true"
					class="h-12 w-12 opacity-50 invert"
				/>
			</div>
			<p class="font-sans text-sm tracking-wide uppercase">{m.doc_no_scan()}</p>
		</div>
	{:else if fileUrl && doc.contentType?.startsWith('application/pdf')}
		<PdfViewer
			url={fileUrl}
			documentId={doc.id}
			transcribeMode={transcribeMode}
			canAnnotate={canAnnotate}
			blockNumbers={blockNumbers}
			annotationReloadKey={annotationReloadKey}
			bind:activeAnnotationId={activeAnnotationId}
			annotationsDimmed={annotationsDimmed}
			flashAnnotationId={flashAnnotationId}
			onAnnotationClick={onAnnotationClick}
			onTranscriptionDraw={onTranscriptionDraw}
			onAnnotationFocus={onAnnotationFocus}
			documentFileHash={doc.fileHash ?? null}
		/>
	{:else if fileUrl}
		<div class="flex h-full w-full items-center justify-center overflow-auto p-8">
			<img
				src={fileUrl}
				alt={m.doc_image_alt()}
				class="max-h-full max-w-full object-contain shadow-2xl"
			/>
		</div>
	{/if}
</div>
