EventSnap/frontend/src/lib/components/LightboxModal.svelte

<script lang="ts">
	import type { FeedUpload } from '$lib/types';
	import { api, ApiError } from '$lib/api';
	import { getUserId } from '$lib/auth';

	interface CommentDto {
		id: string;
		upload_id: string;
		user_id: string;
		uploader_name: string;
		body: string;
		created_at: string;
	}

	interface Props {
		upload: FeedUpload;
		onclose: () => void;
		onlike: (id: string) => void;
	}

	let { upload, onclose, onlike }: Props = $props();

	let comments = $state<CommentDto[]>([]);
	let newComment = $state('');
	let loading = $state(false);
	let userId = getUserId();

	$effect(() => {
		loadComments();
	});

	async function loadComments() {
		try {
			comments = await api.get<CommentDto[]>(`/upload/${upload.id}/comments`);
		} catch {
			// Ignore
		}
	}

	async function submitComment() {
		if (!newComment.trim()) return;
		loading = true;
		try {
			const comment = await api.post<CommentDto>(`/upload/${upload.id}/comment`, {
				body: newComment.trim()
			});
			comments = [...comments, comment];
			newComment = '';
		} catch {
			// Ignore
		} finally {
			loading = false;
		}
	}

	async function deleteComment(id: string) {
		try {
			await api.delete(`/comment/${id}`);
			comments = comments.filter((c) => c.id !== id);
		} catch {
			// Ignore
		}
	}

	function isVideo(mime: string): boolean {
		return mime.startsWith('video/');
	}

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape') onclose();
	}

	function formatTime(iso: string): string {
		return new Date(iso).toLocaleString('de-DE', {
			day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
		});
	}
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4" role="dialog">
	<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white">
		<!-- Media -->
		<div class="relative bg-black">
			<button onclick={onclose} class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70">
				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
				</svg>
			</button>
			{#if isVideo(upload.mime_type)}
				<video
					src={upload.preview_url ?? ''}
					controls
					class="max-h-[50vh] w-full object-contain"
					poster={upload.thumbnail_url ?? undefined}
				></video>
			{:else}
				<img
					src={upload.preview_url ?? ''}
					alt=""
					class="max-h-[50vh] w-full object-contain"
				/>
			{/if}
		</div>

		<!-- Info + Comments -->
		<div class="flex flex-1 flex-col overflow-hidden">
			<div class="border-b border-gray-100 p-3">
				<div class="flex items-center justify-between">
					<div>
						<span class="font-medium text-gray-900">{upload.uploader_name}</span>
						<span class="ml-2 text-xs text-gray-400">{formatTime(upload.created_at)}</span>
					</div>
					<button
						onclick={() => onlike(upload.id)}
						class="flex items-center gap-1 rounded-full px-2.5 py-1 text-sm transition {
							upload.liked_by_me
								? 'bg-red-50 text-red-600'
								: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
						}"
					>
						<svg class="h-4 w-4 {upload.liked_by_me ? 'fill-current' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
						</svg>
						{upload.like_count}
					</button>
				</div>
				{#if upload.caption}
					<p class="mt-1 text-sm text-gray-700">{upload.caption}</p>
				{/if}
			</div>

			<!-- Comments list -->
			<div class="flex-1 overflow-y-auto p-3">
				{#if comments.length === 0}
					<p class="text-center text-sm text-gray-400">Noch keine Kommentare.</p>
				{:else}
					<div class="space-y-3">
						{#each comments as comment (comment.id)}
							<div class="flex items-start gap-2">
								<div class="flex-1">
									<span class="text-sm font-medium text-gray-900">{comment.uploader_name}</span>
									<span class="ml-1 text-sm text-gray-700">{comment.body}</span>
									<div class="mt-0.5 text-xs text-gray-400">{formatTime(comment.created_at)}</div>
								</div>
								{#if comment.user_id === userId}
									<button
										onclick={() => deleteComment(comment.id)}
										class="shrink-0 text-gray-400 hover:text-red-500"
										aria-label="Löschen"
									>
										<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
										</svg>
									</button>
								{/if}
							</div>
						{/each}
					</div>
				{/if}
			</div>

			<!-- Comment input -->
			<form
				onsubmit={(e) => { e.preventDefault(); submitComment(); }}
				class="flex gap-2 border-t border-gray-100 p-3"
			>
				<input
					type="text"
					bind:value={newComment}
					placeholder="Kommentar schreiben..."
					maxlength={500}
					class="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
				/>
				<button
					type="submit"
					disabled={loading || !newComment.trim()}
					class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
				>
					Senden
				</button>
			</form>
		</div>
	</div>
</div>