import {
	type Accessor,
	batch,
	createEffect,
	createResource,
	createSelector,
	createSignal,
	on,
	onMount,
	type ResourceActions,
	type Setter,
	Show,
} from "solid-js";
import "./Playlist.css";
import type { FlatFileListing } from "../App";
import { download, getCover, savePlaylist, storedFilesLive } from "../offline";
import type { AppOptions, PlayerState, PlaylistItem } from "../types";
import { formatFilename, formatTime, LocalStorageValues, toast } from "../utils";
import { DraggableList } from "./DraggableList";
import { LoadingScreen } from "./LoadingScreen";
import { ClearSVG, DownloadSVG, DownSVG, DragSVG, LinkSVG, SaveSVG, SyncSVG, UpSVG } from "./SVG";

interface PlaylistProps {
	playlist: Accessor<PlaylistItem[]>;
	setPlaylist: Setter<PlaylistItem[]>;
	playerState: PlayerState;
	setPlayerState: Setter<PlayerState>;
	playTrack: (item: PlaylistItem) => void;
	playNext: () => void;
	videoElement: (el: HTMLVideoElement) => void;
	videoShown: Accessor<boolean>;
	options: AppOptions;
	fetchFiles: ResourceActions<FlatFileListing>;
	isOffline: Accessor<boolean>;
}

export default function Playlist(props: PlaylistProps) {
	const [showActionButtons, setShowActionButtons] = createSignal(true);

	//TODO: add a way to refetch cover
	const [cover] = createResource<string | undefined, { filePath?: string; offline: boolean }>(
		() => ({ filePath: props.playerState.currentTrack?.path, offline: props.isOffline() }),
		async (args, info) => {
			if (info.value) URL.revokeObjectURL(info.value as string);
			if (!args.filePath) return undefined;
			return await getCover(args.filePath, props.options, false, args.offline);
		},
		{ initialValue: undefined },
	);

	function removeFromPlaylist(id: string) {
		const newPlaylist = props.playlist().filter((i) => i.id !== id);
		if (id === props.playerState.currentTrack?.id && newPlaylist.length > 0) props.playNext();
		props.setPlaylist(newPlaylist);
	}

	async function playlistDownload(download: boolean) {
		try {
			const playlist = props.playlist();
			const filePaths = playlist.map((item) => item.path);
			const response = await fetch("/prepare-playlist", {
				body: JSON.stringify(filePaths),
				method: "POST",
				credentials: "same-origin",
			});
			if (!response.ok) throw new Error(`Generating playlist id not successful: ${await response.text()}`);
			const id = await response.text();
			if (download) {
				toast("Started playlist download", "info");
				const a = document.createElement("a");
				a.href = `/download-playlist/${id}`;
				document.body.appendChild(a);
				a.click();
				document.body.removeChild(a);
			} else {
				toast("Copied playlist link to clipboard", "info");
				const urlPath = location.href.split(/\?|#/)[0];
				navigator.clipboard.writeText(`${urlPath}${urlPath.endsWith("/") ? "" : "/"}download-playlist/${id}`);
			}
		} catch (e) {
			toast("Playlist items download failed", "error", e);
		}
	}

	const [syncing, setSyncing] = createSignal(false);
	async function syncPlaylist() {
		if (syncing()) return;
		setSyncing(true);
		const progressToast = toast("Started playlist sync", "info");
		try {
			const itemsToSync: PlaylistItem[] = [];
			const playlist = props.playlist();
			const stored = new Set(storedFilesLive().map(String));
			//dedup by path (playlist items are always fresh objects, so reference dedup was a no-op)
			const seen = new Set<string>();
			for (const item of playlist) {
				if (seen.has(item.path) || stored.has(item.path)) continue;
				seen.add(item.path);
				itemsToSync.push(item);
			}
			let downloadPromises!: Promise<void>[];
			batch(() => {
				downloadPromises = itemsToSync.map((item) => download(item.path, item, props.options, props.fetchFiles));
			});
			await Promise.allSettled(downloadPromises);
			toast("Playlist sync completed", "success");
		} finally {
			progressToast.hideToast();
			setSyncing(false);
		}
	}

	let dialogElement!: HTMLDialogElement;
	let playlistNameInput!: HTMLInputElement;
	let allowOverwriteCheckbox!: HTMLInputElement;

	async function save() {
		try {
			if (!playlistNameInput.reportValidity()) return;
			await savePlaylist({ name: playlistNameInput.value, items: props.playlist() }, allowOverwriteCheckbox.checked);
			closeDialog();
		} catch (e) {
			if (e instanceof Error && e.name === "ConstraintError") {
				toast("Playlist with this name already exists", "error");
			} else {
				toast("Saving playlist failed", "error", e);
			}
		}
	}

	function closeDialog() {
		dialogElement.close();
		playlistNameInput.value = "";
		allowOverwriteCheckbox.checked = false;
	}

	const [syncedCount, setSyncedCount] = createSignal(0);
	createEffect(
		on([props.playlist, storedFilesLive], ([playlist, storedFiles]) => {
			const stored = new Set(storedFiles.map(String));
			setSyncedCount(playlist.filter((item) => stored.has(item.path)).length);
		}),
	);
	onMount(() => {
		const savedPlaylistButtons = localStorage.getItem(LocalStorageValues.playlistButtons);
		if (savedPlaylistButtons !== null) setShowActionButtons(savedPlaylistButtons === "true");
		createEffect(() => localStorage.setItem(LocalStorageValues.playlistButtons, showActionButtons().toString()));
	});

	return (
		<div class="playlist-container">
			<dialog class="save-dialog" ref={dialogElement} onclick={(e) => e.target.nodeName === "DIALOG" && closeDialog()}>
				<div>
					<input ref={playlistNameInput} required type="text" placeholder="Playlist name" />
					<div class="save-buttons">
						<label for="overwrite-checkbox">allow overwrite</label>
						<input ref={allowOverwriteCheckbox} id="overwrite-checkbox" type="checkbox" />
						<button onClick={save}>Save</button>
						<button onClick={closeDialog}>Cancel</button>
					</div>
				</div>
			</dialog>

			<div class="playlist-header">
				<div class="playlist-header-title">
					<span>
						Playlist ({props.playlist().length} tracks, {syncedCount()} synced)
					</span>
					<button title="Toggle playlist actions" onclick={() => setShowActionButtons(!showActionButtons())}>
						{showActionButtons() ? <UpSVG /> : <DownSVG />}
					</button>
				</div>
				<Show when={showActionButtons()}>
					<div class="button-container">
						<button title="Save playlist" onClick={() => dialogElement.showModal()}>
							<SaveSVG />
						</button>
						<button title="Sync all unsynced files in playlist" onClick={syncPlaylist} disabled={syncing()}>
							<SyncSVG />
						</button>
						<button
							title="Copies and 1-hour valid link for the same action as the download button"
							onClick={() => playlistDownload(false)}
						>
							<LinkSVG />
						</button>
						<button
							title="Download all files in the playlist in their original format as a .tar file, or without archive if it contains just a single item"
							onClick={() => playlistDownload(true)}
						>
							<DownloadSVG />
						</button>
						<button title="Clear Playlist" onClick={() => props.setPlaylist([])}>
							<ClearSVG />
						</button>
					</div>
				</Show>
			</div>

			<DraggableList<PlaylistItem> items={props.playlist} setItems={props.setPlaylist} id="playlist">
				{(item, _, { dragHandlers, isDragging, dropPosition }) => {
					const isActive = createSelector(
						() => props.playerState.currentTrack?.id,
						(itemId, currentId) => currentId === itemId,
					);
					return (
						<div
							classList={{
								"playlist-item": true,
								"draggable-item": true,
								active: isActive(item.id),
								"drop-target-top-border": dropPosition() === "before",
								"drop-target-bottom-border": dropPosition() === "after",
							}}
							style={{ opacity: isDragging() ? 0.5 : 1 }}
							onClick={() => props.playTrack(item)}
							title={item.path}
						>
							<div class="playlist-drag-btn" {...dragHandlers}>
								<DragSVG />
							</div>
							<span>{formatFilename(item, props.options.playlistDisplay)}</span>
							<div class="spacer" />
							{formatTime(item.metadata.duration)}
							<button
								title="Remove from playlist"
								onClick={(e) => {
									e.stopPropagation();
									removeFromPlaylist(item.id);
								}}
							>
								<ClearSVG />
							</button>
						</div>
					);
				}}
			</DraggableList>

			<div
				class="cover"
				style={{
					display:
						props.videoShown() || (!props.options.hidePlaylistCover && (cover.loading || cover())) ? undefined : "none",
				}}
			>
				<Show when={!props.videoShown()}>
					<Show when={cover.loading}>
						<LoadingScreen />
					</Show>
					<img src={cover()} alt="" />
				</Show>
				<video ref={props.videoElement} preload="auto" />
			</div>
		</div>
	);
}