<script lang="ts">
	import { Play, LoaderCircle } from '@lucide/svelte';
	import { Button } from 'bits-ui';
	import type { Project, RepoDefinition } from './types/project';
	import { goto } from '$app/navigation';
	import Image from './Image.svelte';
	import { createQuery } from '@tanstack/svelte-query';

	const reposQuery = createQuery<RepoDefinition[]>(() => ({
		queryKey: ['global-repos'],
		queryFn: async () => {
			const response = await fetch('/api/v0/repos');
			if (!response.ok) {
				throw new Error('Failed to fetch repositories');
			}
			return response.json();
		},
		staleTime: 60000
	}));

	const projects = $derived(reposQuery.data ?? []);
	const isLoading = $derived(reposQuery.isPending);
	const hasError = $derived(reposQuery.isError);
	const isEmpty = $derived(!isLoading && !hasError && projects.length === 0);
</script>

{#if isLoading}
	<div class="flex items-center justify-center py-12">
		<LoaderCircle class="h-8 w-8 animate-spin text-text-muted" />
	</div>
{:else if hasError}
	<div class="py-12 text-center text-text-muted">
		<p>Failed to load projects. Please try again later.</p>
	</div>
{:else if isEmpty}
	<div class="py-12 text-center text-text-muted">
		<p>No projects available yet.</p>
	</div>
{:else}
	<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
		{#each projects as project (project.id)}
			<div
				class="group relative overflow-hidden rounded-lg bg-gray-900 shadow-xl ring-1 ring-gray-800 transition-transform hover:scale-[1.02]"
			>
				<div class="relative aspect-video overflow-hidden">
					<Image
						src={`/api/v0/repos/${project.id}/files/thumbnail.webp`}
						fallback={`https://picsum.photos/seed/${project.id}/400/225`}
						alt={project.full_name}
						class="min-h-56.5 w-full min-w-100 object-cover transition-transform duration-300 group-hover:scale-105"
					/>

					<div
						class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
					>
						<Button.Root
							class="flex h-10 w-14 items-center justify-center rounded-md bg-white/90 text-gray-900 shadow-lg transition-transform hover:scale-110 hover:bg-white"
							onclick={() => {
								goto(`/p/${project.id}`).catch((e) => {
									console.warn(e);
								});
							}}
						>
							<Play />
						</Button.Root>
					</div>
				</div>

				<div class="p-4">
					<h3 class="text-lg font-semibold text-white">{project.full_name}</h3>
					<p class="mt-1 text-sm text-gray-400">{project.description}</p>
				</div>
			</div>
		{/each}
	</div>
{/if}
