<script lang="ts">
	import { page } from '$app/state';
	import BookSearch from '$lib/components/media/BookSearch.svelte';
	import MusicSearch from '$lib/components/media/MusicSearch.svelte';
	import BookLibrary from '$lib/components/media/BookLibrary.svelte';

	type MediaTab = 'books' | 'music' | 'library';

	const urlMode = page.url.searchParams.get('mode');
	let activeTab = $state<MediaTab>(urlMode === 'music' ? 'music' : urlMode === 'library' ? 'library' : 'books');
</script>

<div class="page">
	<div class="app-surface">
		<div class="page-header">
			<div class="page-title">DOWNLOADS</div>
			<div class="page-subtitle">
				{#if activeTab === 'books'}Book Downloads
				{:else if activeTab === 'music'}Music Downloads
				{:else}Book Library{/if}
			</div>
		</div>

		<div class="media-tabs">
			<button class="tab" class:active={activeTab === 'books'} onclick={() => activeTab = 'books'}>
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
				Books
			</button>
			<button class="tab" class:active={activeTab === 'music'} onclick={() => activeTab = 'music'}>
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
				Music
			</button>
			<button class="tab" class:active={activeTab === 'library'} onclick={() => activeTab = 'library'}>
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
				Library
			</button>
		</div>

		{#if activeTab === 'books'}
			<BookSearch />
		{:else if activeTab === 'music'}
			<MusicSearch />
		{:else}
			<BookLibrary />
		{/if}
	</div>
</div>

<style>
	.page-subtitle {
		font-size: var(--text-2xl);
		font-weight: 300;
		color: var(--text-1);
		line-height: 1.2;
	}

	.media-tabs {
		display: flex; gap: var(--sp-1); margin-bottom: var(--sp-5);
		border-bottom: 1px solid var(--border); padding-bottom: 0;
	}
	.tab {
		display: flex; align-items: center; gap: var(--sp-2);
		flex: 1; padding: 10px var(--sp-2) 12px; font-size: var(--text-base); font-weight: 500;
		color: var(--text-3); background: none; border: none; border-bottom: 2px solid transparent;
		cursor: pointer; font-family: var(--font); transition: all var(--transition);
		text-align: center; justify-content: center; margin-bottom: -1px;
	}
	.tab:hover { color: var(--text-2); }
	.tab.active { color: var(--text-1); border-bottom-color: var(--accent); font-weight: 600; }
	.tab svg { width: 16px; height: 16px; flex-shrink: 0; }

	@media (max-width: 768px) {
		.page-subtitle { font-size: var(--text-xl); }
	}
</style>
