<script lang="ts">
	import { page } from '$app/state';
	import { Download } from '@lucide/svelte';
	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';

	type TabMeta = {
		id: MediaTab;
		label: string;
		kicker: string;
		title: string;
		description: string;
		statLabel: string;
		statValue: string;
	};

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

	const tabs: TabMeta[] = [
		{
			id: 'books',
			label: 'Books',
			kicker: 'Direct releases',
			title: 'Source, queue, and route ebook drops.',
			description: 'Search releases, watch active transfers, and hand finished files into the right Booklore library without leaving the page.',
			statLabel: 'Flow',
			statValue: 'Search -> Download -> Import'
		},
		{
			id: 'music',
			label: 'Music',
			kicker: 'Spotify intake',
			title: 'Pull tracks, albums, artists, and playlists into one queue.',
			description: 'Keep discovery and active download tasks in the same lane so new pulls do not get buried under search results.',
			statLabel: 'Coverage',
			statValue: 'Tracks · Albums · Artists'
		},
		{
			id: 'library',
			label: 'Library',
			kicker: 'Shelves',
			title: 'Review the catalog after the download work is done.',
			description: 'Filter across libraries, search titles quickly, and open book details without switching to a separate management view.',
			statLabel: 'Output',
			statValue: 'Booklore shelves'
		}
	];

	const activeMeta = $derived(tabs.find((tab) => tab.id === activeTab) ?? tabs[0]);
</script>

<div class="downloads-page">
	<header class="downloads-header intro-sequence">
		<div class="downloads-heading">
			<h1>Downloads</h1>
			<p class="downloads-subcopy">Book pulls, music grabs, and the library handoff in one workspace.</p>
		</div>
	</header>

	<div class="top-tabs intro-sequence">
		{#each tabs as tab}
			<button class="top-tab" class:active={activeTab === tab.id} onclick={() => activeTab = tab.id}>
				{tab.label}
			</button>
		{/each}
	</div>

	<section class="workspace-frame intro-sequence">
		<div class="workspace-shell panel">
			<div class="workspace-label-row">
				<div>
					<div class="section-label">{activeMeta.kicker}</div>
					<h2>{activeMeta.title}</h2>
				</div>
				<div class="workspace-chip">
					<Download size={14} strokeWidth={2} />
					<span>{activeMeta.statLabel}</span>
					<strong>{activeMeta.statValue}</strong>
				</div>
			</div>

			<p class="workspace-copy">{activeMeta.description}</p>

			<section class="workspace-panel">
				<div class="workspace-body">
					{#if activeTab === 'books'}
						<BookSearch />
					{:else if activeTab === 'music'}
						<MusicSearch />
					{:else}
						<BookLibrary />
					{/if}
				</div>
			</section>
		</div>
	</section>
</div>

<style>
	.downloads-page {
		display: grid;
		gap: 18px;
		padding: 24px 24px 120px;
		max-width: 1460px;
		margin: 0 auto;
	}

	.downloads-header {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		align-items: end;
	}

	.downloads-heading h1 {
		margin: 0;
		font-size: clamp(2.6rem, 4.6vw, 4.25rem);
		line-height: 0.9;
		letter-spacing: -0.08em;
		color: #1e1812;
	}

	.downloads-subcopy {
		margin: 10px 0 0;
		max-width: 42rem;
		color: #5c5247;
		line-height: 1.6;
	}

	.panel {
		background: rgba(255, 252, 248, 0.82);
		border: 1px solid rgba(35, 26, 17, 0.12);
		backdrop-filter: blur(14px);
		box-shadow: 0 18px 40px rgba(35, 24, 15, 0.05);
	}

	.workspace-shell,
	.workspace-panel {
		border-radius: 28px;
	}

	.workspace-copy {
		color: #5c5247;
		line-height: 1.6;
	}

	.section-label {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.14em;
		color: #7b6d5f;
		font-weight: 700;
	}

	.top-tabs {
		display: inline-flex;
		gap: 4px;
		padding: 4px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.48);
		border: 1px solid rgba(35, 26, 17, 0.1);
		backdrop-filter: blur(12px);
		margin-bottom: 2px;
		width: fit-content;
	}

	.top-tab {
		padding: 10px 16px;
		border: none;
		border-radius: 999px;
		background: transparent;
		color: #6b5f52;
		cursor: pointer;
		font-size: 0.94rem;
		font-weight: 600;
		transition: all 180ms ease;
		font-family: var(--font);
	}

	.top-tab:hover {
		color: #1e1812;
	}

	.top-tab.active {
		background: rgba(255, 252, 248, 0.96);
		color: #1e1812;
		box-shadow: 0 10px 24px rgba(33, 22, 14, 0.08);
	}

	.workspace-label-row h2 {
		margin: 4px 0 0;
		font-size: 1.45rem;
		font-weight: 650;
		line-height: 1.02;
		letter-spacing: -0.05em;
		color: #1e1812;
	}

	.workspace-frame {
		min-width: 0;
	}

	.workspace-shell {
		display: grid;
		gap: 16px;
		padding: 22px;
	}

	.workspace-label-row {
		display: flex;
		justify-content: space-between;
		align-items: end;
		gap: 12px;
	}

	.workspace-chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 12px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.64);
		border: 1px solid rgba(35, 26, 17, 0.08);
		color: #6b6256;
		font-size: 0.82rem;
		white-space: nowrap;
	}

	.workspace-chip strong {
		color: #1e1812;
		font-family: var(--mono);
		font-weight: 600;
	}

	.workspace-copy {
		max-width: 72ch;
		margin: 0;
	}

	.workspace-panel {
		padding: 18px;
		background:
			linear-gradient(145deg, rgba(255, 251, 246, 0.96), rgba(241, 247, 243, 0.82)),
			radial-gradient(circle at 88% 14%, rgba(47, 106, 82, 0.1), transparent 28%);
	}

	.workspace-body {
		min-width: 0;
	}

	.intro-sequence {
		animation: riseIn 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.intro-sequence:nth-child(1) { animation-delay: 20ms; }
	.intro-sequence:nth-child(2) { animation-delay: 110ms; }
	.intro-sequence:nth-child(3) { animation-delay: 180ms; }

	.reveal-item {
		opacity: 0;
		animation: revealLine 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: var(--delay, 0ms);
	}

	@keyframes riseIn {
		from {
			opacity: 0;
			transform: translateY(18px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes revealLine {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (max-width: 1100px) {
		.top-tabs {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			overflow: visible;
			padding: 4px;
			gap: 0;
		}

		.top-tab {
			width: 100%;
			min-width: 0;
			text-align: center;
		}
	}

	@media (max-width: 768px) {
		.downloads-page {
			padding: 20px 16px 120px;
			gap: 14px;
		}

		.workspace-shell,
		.workspace-panel {
			padding: 18px;
			border-radius: 24px;
		}

		.downloads-heading h1 {
			font-size: 3rem;
		}

		.downloads-header,
		.workspace-label-row {
			flex-direction: column;
			align-items: start;
		}

		.top-tab {
			padding: 10px 8px;
			font-size: 0.84rem;
		}

		.workspace-chip {
			white-space: normal;
		}
	}
</style>
