<script lang="ts">
	import { onMount } from 'svelte';
	import { apiService, type Score } from '$lib/api';

	let scores: Score[] = [];
	let loading = true;
	let error = '';
	let sortBy: 'id' | 'name' | 'compositor' = 'id';
	let sortOrder: 'asc' | 'desc' = 'asc';

	onMount(async () => {
		try {
			scores = await apiService.getScores();
		} catch (err) {
			error = 'Erreur lors du chargement des partitions';
			console.error(err);
		} finally {
			loading = false;
		}
	});

	function sortScores(key: 'id' | 'name' | 'compositor') {
		if (sortBy === key) {
			sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
		} else {
			sortBy = key;
			sortOrder = 'asc';
		}
	}

	$: sortedScores = [...scores].sort((a, b) => {
		let aVal = a[sortBy] || '';
		let bVal = b[sortBy] || '';
		let cmp: number;
		if (sortBy === 'id') {
			cmp = parseInt(a.id) - parseInt(b.id);
		} else {
			cmp = aVal.localeCompare(bVal);
		}
		return sortOrder === 'asc' ? cmp : -cmp;
	});
</script>

<svelte:head>
	<title>Répertoire - OHMJ</title>
</svelte:head>

<div class="container mx-auto px-4 py-8">
	<div class="mb-6">
		<h1 class="text-3xl font-bold text-ohmj-primary">Répertoire</h1>
		<p class="text-gray-600 mt-2">{scores.length} partitions disponibles</p>
	</div>

	{#if loading}
		<div class="flex justify-center items-center py-20">
			<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-ohmj-primary"></div>
		</div>
	{:else if error}
		<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
			{error}
		</div>
	{:else}
		<div class="bg-white rounded-lg shadow overflow-hidden">
			<table class="min-w-full">
				<thead class="bg-gray-50">
					<tr>
						<th
							class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 w-20"
							onclick={() => sortScores('id')}
						>
							№ {sortBy === 'id' ? (sortOrder === 'asc' ? '↑' : '↓') : ''}
						</th>
						<th
							class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
							onclick={() => sortScores('name')}
						>
							Nom {sortBy === 'name' ? (sortOrder === 'asc' ? '↑' : '↓') : ''}
						</th>
						<th
							class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
							onclick={() => sortScores('compositor')}
						>
							Compositeur {sortBy === 'compositor' ? (sortOrder === 'asc' ? '↑' : '↓') : ''}
						</th>
					</tr>
				</thead>
				<tbody class="divide-y divide-gray-200">
					{#each sortedScores as score}
						<tr class="hover:bg-ohmj-light transition-colors cursor-pointer" onclick={() => window.location.href = '/scores/' + score.id}>
							<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
								{score.id}
							</td>
							<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-ohmj-primary hover:text-ohmj-secondary">
								{score.name}
							</td>
							<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
								{score.compositor || '-'}
							</td>
						</tr>
					{/each}
				</tbody>
			</table>
		</div>
	{/if}
</div>
