<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import DownloadStatusDock, { type DockItem } from '$lib/components/media/DownloadStatusDock.svelte';

	interface MusicTrack {
		id: string; name: string; artists: { name: string }[];
		album: { name: string; images: { url: string }[] };
		duration_ms: number; type: string;
		images?: { url: string }[]; owner?: { display_name: string };
		tracks?: { total: number }; total_tracks?: number; release_date?: string; genres?: string[];
	}
	interface MusicTask {
		task_id: string; status: string; download_type: string;
		name?: string; artist?: string; progress?: number;
		total_items?: number; completed_items?: number; speed?: string; eta?: string; error_message?: string;
	}

	let query = $state('');
	let searchType = $state<'track' | 'album' | 'artist' | 'playlist'>('track');
	let results = $state<MusicTrack[]>([]);
	let tasks = $state<MusicTask[]>([]);
	let searching = $state(false);
	let searched = $state(false);
	let downloading = $state<Set<string>>(new Set());
	let playingId = $state<string | null>(null);
	let playingEmbed = $state<string | null>(null);
	let poll: ReturnType<typeof setInterval> | null = null;
	let statusEvents = $state<DockItem[]>([]);

	const activeTasks = $derived(tasks.filter(t => ['downloading', 'queued'].includes(t.status)));
	const dockItems = $derived.by(() => {
		const liveItems = activeTasks.map((task) => ({
			id: `music-live-${task.task_id}`,
			label: task.name || task.task_id,
			message: task.status === 'queued' ? 'Waiting in queue' : 'Downloading now',
			tone: 'progress' as const,
			progress: task.progress ?? null,
			meta: [task.artist, task.speed, task.eta ? `ETA ${task.eta}` : null].filter(Boolean).join(' · '),
			actionLabel: 'Cancel',
			actionKind: 'cancel' as const
		}));

		return [...liveItems, ...statusEvents].slice(0, 4);
	});

	function pushStatusEvent(item: DockItem, ttl = 5200) {
		statusEvents = [item, ...statusEvents.filter((entry) => entry.id !== item.id)].slice(0, 6);
		const timer = setTimeout(() => {
			statusEvents = statusEvents.filter((entry) => entry.id !== item.id);
		}, ttl);
		return () => clearTimeout(timer);
	}

	function artistNames(t: MusicTrack): string { return t.artists?.map(a => a.name).join(', ') || ''; }
	function albumArt(t: MusicTrack): string | null { return t.album?.images?.[0]?.url || t.images?.[0]?.url || null; }
	function fmtDuration(ms: number): string { const m = Math.floor(ms / 60000); const s = Math.floor((ms % 60000) / 1000); return `${m}:${s.toString().padStart(2, '0')}`; }

	async function search() {
		if (!query.trim()) return;
		searching = true; searched = true; results = [];
		try {
			const res = await fetch(`/api/music/api/search?q=${encodeURIComponent(query.trim())}&search_type=${searchType}&limit=30`, { credentials: 'include' });
			if (res.ok) { const data = await res.json(); results = data.items || []; }
		} catch { /* silent */ }
		searching = false;
	}

	async function downloadItem(id: string, type: string) {
		downloading = new Set([...downloading, id]);
		try {
			await fetch(`/api/music/api/${type}/download/${id}`, { credentials: 'include' });
			pushStatusEvent({
				id: `music-queued-${id}`,
				label: 'Music download',
				message: 'Added to the queue',
				tone: 'progress',
				meta: type
			});
			fetchTasks();
		} catch { /* silent */ }
	}

	async function fetchTasks() {
		try {
			const res = await fetch('/api/music/api/prgs/list', { credentials: 'include' });
			if (res.ok) {
				const previous = tasks;
				const data = await res.json();
				tasks = Array.isArray(data) ? data : (data.tasks || []);
				for (const task of tasks) {
					const prev = previous.find((entry) => entry.task_id === task.task_id);
					if (prev && prev.status !== task.status) {
						if (task.status === 'completed') {
							pushStatusEvent({
								id: `music-complete-${task.task_id}`,
								label: task.name || task.task_id,
								message: 'Download finished',
								tone: 'success',
								meta: [task.artist, task.download_type].filter(Boolean).join(' · ')
							});
						}
						if (task.status === 'error') {
							pushStatusEvent({
								id: `music-error-${task.task_id}`,
								label: task.name || task.task_id,
								message: task.error_message || 'Download failed',
								tone: 'error',
								meta: task.artist || task.download_type,
								actionLabel: 'Cancel',
								actionKind: 'cancel'
							}, 8000);
						}
					}
				}
			}
		} catch { /* silent */ }
	}

	async function cancelTask(taskId: string) {
		try { await fetch(`/api/music/api/prgs/cancel/${taskId}`, { method: 'POST', credentials: 'include' }); fetchTasks(); } catch { /* silent */ }
	}

	function togglePlay(id: string) {
		if (playingId === id) { playingId = null; playingEmbed = null; }
		else { playingId = id; playingEmbed = `https://open.spotify.com/embed/track/${id}?utm_source=generator&theme=0`; }
	}

	function handleDockAction(event: CustomEvent<{ id: string; actionKind: 'cancel' | 'retry' | 'remove' }>) {
		const taskId = event.detail.id.replace(/^music-(live|queued|complete|error)-/, '');
		cancelTask(taskId);
	}

	onMount(() => { fetchTasks(); poll = setInterval(fetchTasks, 3000); });
	onDestroy(() => { if (poll) clearInterval(poll); });
</script>

<div class="search-bar">
	<select class="type-select" bind:value={searchType}>
		<option value="track">Tracks</option>
		<option value="album">Albums</option>
		<option value="artist">Artists</option>
		<option value="playlist">Playlists</option>
	</select>
	<div class="search-wrap">
		<svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
		<input class="s-input" type="text" placeholder="Search songs, albums, artists..." bind:value={query} onkeydown={(e) => { if (e.key === 'Enter') search(); }} />
	</div>
	<button class="s-btn" onclick={search} disabled={searching || !query.trim()}>
		{#if searching}<span class="spinner"></span>{:else}Search{/if}
	</button>
</div>

{#if searching}
	<div class="empty">Searching Spotify...</div>
{:else if searched && results.length === 0}
	<div class="empty">No results for "{query}"</div>
{:else if results.length > 0}
	{#if searchType === 'track'}
		{#if playingEmbed}
			<div class="player-wrap">
				<iframe src={playingEmbed} width="100%" height="80" frameborder="0" allow="autoplay; clipboard-write; encrypted-media" title="Spotify player"></iframe>
			</div>
		{/if}
		<div class="track-list">
			{#each results as track (track.id)}
					{@const art = albumArt(track)}
					<div class="track-row">
						<button class="play-btn" onclick={() => togglePlay(track.id)}>
							{#if playingId === track.id}
								<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>
							{:else}
								<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
							{/if}
						</button>
						{#if art}<img class="track-art" src={art} alt="" loading="lazy" />{/if}
						<div class="track-info">
							<div class="track-name">{track.name}</div>
							<div class="track-artist">{artistNames(track)}{track.album?.name ? ` · ${track.album.name}` : ''}</div>
						</div>
						<span class="track-dur">{track.duration_ms ? fmtDuration(track.duration_ms) : ''}</span>
						{#if downloading.has(track.id)}
							<span class="dl-badge accent">Queued</span>
						{:else}
							<button class="dl-sm-btn" onclick={() => downloadItem(track.id, 'track')}>
								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
							</button>
						{/if}
					</div>
			{/each}
		</div>
	{:else}
		<div class="card-grid">
			{#each results as item (item.id)}
					{@const art = albumArt(item)}
					<div class="m-card">
						<div class="m-card-img" class:round={searchType === 'artist'}>
							{#if art}<img src={art} alt="" loading="lazy" />{:else}<div class="m-card-placeholder">♪</div>{/if}
						</div>
						<div class="m-card-name">{item.name}</div>
						<div class="m-card-sub">
							{#if searchType === 'playlist'}{item.owner?.display_name || ''}{item.tracks?.total ? ` · ${item.tracks.total} tracks` : ''}
							{:else if searchType === 'album'}{artistNames(item)}{item.release_date ? ` · ${item.release_date.slice(0, 4)}` : ''}
							{:else}{item.genres?.slice(0, 2).join(', ') || 'Artist'}{/if}
						</div>
						<button class="dl-card-btn" onclick={() => downloadItem(item.id, searchType)} disabled={downloading.has(item.id)}>
							{downloading.has(item.id) ? 'Queued' : 'Download'}
						</button>
					</div>
			{/each}
		</div>
	{/if}
{:else}
	<div class="empty">
		<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="width:64px;height:64px;opacity:0.2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
		<div>Search for music</div>
		<div class="empty-sub">Spotify tracks, albums, playlists</div>
	</div>
{/if}

<DownloadStatusDock heading="Download queue" items={dockItems} on:action={handleDockAction} />

<style>
	.search-bar { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 12px; margin-bottom: 22px; align-items: stretch; }
	.type-select { height: 50px; padding: 0 34px 0 14px; border-radius: 20px; border: 1px solid rgba(35, 26, 17, 0.1); background: rgba(255, 252, 248, 0.86); color: #1e1812; font-size: 0.9rem; font-weight: 600; font-family: var(--font); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b76' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
	.type-select:focus { outline: none; border-color: rgba(47, 106, 82, 0.34); box-shadow: 0 0 0 4px rgba(47, 106, 82, 0.08); }
	.search-wrap { flex: 1; position: relative; }
	.s-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #8a7d70; pointer-events: none; }
	.s-input { width: 100%; height: 50px; padding: 0 14px 0 44px; border-radius: 20px; border: 1px solid rgba(35, 26, 17, 0.1); background: rgba(255, 252, 248, 0.86); color: #1e1812; font-size: 0.98rem; font-family: var(--font); box-sizing: border-box; }
	.s-input:focus { outline: none; border-color: rgba(47, 106, 82, 0.34); box-shadow: 0 0 0 4px rgba(47, 106, 82, 0.08); background: rgba(255, 253, 250, 0.98); }
	.s-input::placeholder { color: #8a7d70; }
	.s-btn { height: 50px; padding: 0 20px; border-radius: 20px; background: #1f1a15; color: #fffaf5; border: none; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; font-family: var(--font); white-space: nowrap; box-shadow: 0 14px 28px rgba(35, 24, 15, 0.12); transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease; }
	.s-btn:disabled { opacity: 0.4; cursor: default; }
	.s-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(35, 24, 15, 0.16); }
	.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; }
	@keyframes spin { to { transform: rotate(360deg); } }

	.empty { padding: 52px 24px; text-align: center; color: #675b4f; font-size: 0.98rem; display: flex; flex-direction: column; align-items: center; gap: 8px; border-radius: 28px; border: 1px dashed rgba(35, 26, 17, 0.12); background: linear-gradient(180deg, rgba(255, 251, 246, 0.78), rgba(246, 240, 232, 0.58)); }
	.empty-sub { font-size: 0.88rem; color: #8a7d70; }

	.player-wrap { margin-bottom: 12px; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 36px rgba(35, 24, 15, 0.08); }

	.track-list { background: rgba(255, 252, 248, 0.9); border-radius: 28px; border: 1px solid rgba(35, 26, 17, 0.08); box-shadow: 0 20px 40px rgba(35, 24, 15, 0.06); overflow: hidden; }
	.track-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(35, 26, 17, 0.08); transition: background var(--transition); }
	.track-row:last-child { border-bottom: none; }
	.track-row:hover { background: rgba(248, 242, 235, 0.78); }
	.play-btn { width: 34px; height: 34px; border-radius: 999px; background: none; border: none; cursor: pointer; color: #675b4f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color var(--transition), background 160ms ease; }
	.play-btn:hover { color: var(--accent); }
	.play-btn svg { width: 16px; height: 16px; }
	.track-art { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
	.track-info { flex: 1; min-width: 0; }
	.track-name { font-size: 0.98rem; font-weight: 600; color: #1e1812; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.track-artist { font-size: 0.88rem; color: #675b4f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.track-dur { font-size: 0.82rem; font-family: var(--mono); color: #8a7d70; flex-shrink: 0; }
	.dl-sm-btn { width: 34px; height: 34px; border-radius: 14px; background: rgba(249, 244, 237, 0.92); border: 1px solid rgba(35, 26, 17, 0.1); cursor: pointer; color: #675b4f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition); }
	.dl-sm-btn:hover { color: var(--accent); border-color: var(--accent); }
	.dl-sm-btn svg { width: 14px; height: 14px; }

	.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
	.m-card { text-align: center; }
	.m-card-img { width: 100%; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, rgba(239, 231, 221, 0.9), rgba(247, 241, 233, 0.72)); margin-bottom: 10px; box-shadow: 0 18px 36px rgba(35, 24, 15, 0.06); }
	.m-card-img.round { border-radius: var(--radius-full); }
	.m-card-img img { width: 100%; height: 100%; object-fit: cover; }
	.m-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--text-3xl); color: #8a7d70; }
	.m-card-name { font-size: 0.9rem; font-weight: 600; color: #1e1812; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.m-card-sub { font-size: 0.76rem; color: #675b4f; margin-top: 4px; }
	.dl-card-btn { margin-top: 10px; padding: 9px 14px; border-radius: 14px; background: #2f6a52; color: white; border: none; font-size: 0.76rem; font-weight: 700; cursor: pointer; font-family: var(--font); box-shadow: 0 12px 24px rgba(47, 106, 82, 0.18); }
	.dl-card-btn:disabled { opacity: 0.4; }

	.dl-badge { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
	.dl-badge.success { background: var(--success-dim); color: var(--success); }
	.dl-badge.accent { background: var(--accent-dim); color: var(--accent); }
	.dl-badge.error { background: var(--error-dim); color: var(--error); }
	.dl-badge.muted { background: var(--card-hover); color: var(--text-4); }

	.dl-bar { width: 100%; height: 4px; background: rgba(35, 26, 17, 0.1); border-radius: 999px; overflow: hidden; margin-top: 10px; }
	.dl-bar.full { width: 100%; }
	.dl-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; }

	@media (max-width: 768px) {
		.search-bar { grid-template-columns: 1fr; }
		.type-select { width: 100%; }
		.card-grid { grid-template-columns: repeat(2, 1fr); }
	}
</style>
