import "./FileBrowser.css";
import {
	type Accessor,
	createEffect,
	createResource,
	createSignal,
	For,
	type InitializedResource,
	on,
	onMount,
	type ResourceActions,
	type Setter,
	Show,
	Suspense,
} from "solid-js";
import type { MediaFile, FileListing, Directory } from "music-server-shared/types";
import type { AppOptions, PlaylistItem } from "../types";
import { generateUUID, joinPath, LocalStorageValues } from "../utils";
import { ClosedFolderSVG, DownSVG, MusicSVG, RefreshSVG, UpSVG } from "./SVG";
import { clearCoverCache as deleteCover, clearDirectoryCache, getCover, listFiles } from "../offline";
import { DownloadButton } from "./DownloadButton";
import { LoadingScreen } from "./LoadingScreen";
import type { FlatFileListing } from "../App";
import { createStore, reconcile } from "solid-js/store";

interface FileBrowserProps {
	breadcrumbs: Accessor<string[]>;
	currentDir: Accessor<string>;
	setCurrentDir: Setter<string>;
	playTrack: (track: PlaylistItem) => void;
	playlist: Accessor<PlaylistItem[]>;
	setPlaylist: Setter<PlaylistItem[]>;
	showFileBrowser: Accessor<boolean>;
	setShowFileBrowser: Setter<boolean>;
	options: AppOptions;
	isOffline: Accessor<boolean>;
	files: InitializedResource<FlatFileListing>;
	fetchFiles: ResourceActions<FlatFileListing>;
}

export default function FileBrowser(props: FileBrowserProps) {
	const [loadingActions, setLoadingActions] = createSignal(0);
	const [showActionButtons, setShowActionButtons] = createSignal(true);
	const [cover, fetchCover] = createResource<string | undefined, { dir: string; offline: boolean }>(
		() => ({ dir: props.currentDir(), offline: props.isOffline() }),
		async (args, info) => {
			if (info.value) URL.revokeObjectURL(info.value as string);
			return await getCover(args.dir, args.offline);
		},
		{ initialValue: undefined },
	);

	let dialogElement!: HTMLDialogElement;
	let addAnywayButton!: HTMLButtonElement;

	function handleBreadcrumbClick(index: number) {
		if (index === 0) {
			props.setCurrentDir("");
		} else {
			props.setCurrentDir(joinPath(...props.breadcrumbs().slice(1, index + 1)));
		}
	}

	function fileToPlaylistItem(path: string, item: MediaFile): PlaylistItem {
		return {
			id: generateUUID(),
			metadata: item.metadata,
			path: path,
		};
	}

	// Recursively convert file listing to PlaylistItem array
	function listingToPlaylistItems(basePath: string, files: FileListing): PlaylistItem[] {
		let result: PlaylistItem[] = [];
		for (const [fileName, file] of files) {
			const fullPath = joinPath(basePath, fileName);
			if ("metadata" in file) {
				// It's an audio file
				result.push(fileToPlaylistItem(fullPath, file));
			} else if (file.files && file.files.size > 0) {
				// It's a directory with files, recursively add its contents
				result = [...result, ...listingToPlaylistItems(fullPath, file.files)];
			}
		}
		return result;
	}

	function playFile(path: string, item: MediaFile) {
		props.playTrack(fileToPlaylistItem(path, item));
	}

	function scrollPlaylistToBottom() {
		const element = document.getElementById("playlist");
		if (!element) return;
		element.scrollTop = element.scrollHeight;
	}

	async function playFiles(fileName: string, recursive: boolean, queue: boolean, item?: MediaFile) {
		if (recursive) {
			setLoadingActions(loadingActions() + 1);
		}
		try {
			const fullPath = joinPath(props.currentDir(), fileName);
			let oldLength = 0;
			let newPlaylist: PlaylistItem[];
			const oldPlaylist = queue ? props.playlist() : [];
			if (item) {
				newPlaylist = [fileToPlaylistItem(fullPath, item)];
			} else {
				const files = await listFiles(fullPath, props.isOffline(), recursive);
				newPlaylist = listingToPlaylistItems(fullPath, files);
				if (queue) {
					oldLength = oldPlaylist.length;
				}
			}
			const addAction = () => {
				if (newPlaylist.length !== 0 && oldLength === 0) props.playTrack(newPlaylist[0]);
				props.setPlaylist([...oldPlaylist, ...newPlaylist]);
				if (queue) scrollPlaylistToBottom();
			};
			if (
				props.options.duplicateWarning &&
				oldPlaylist.some((oldItem) => newPlaylist.some((newItem) => oldItem.path === newItem.path))
			) {
				addAnywayButton.onclick = () => {
					addAction();
					dialogElement.close();
				};
				dialogElement.showModal();
			} else {
				addAction();
			}
		} finally {
			if (recursive) {
				setLoadingActions(loadingActions() - 1);
			}
		}
	}

	function reloadDirectory() {
		clearDirectoryCache(props.currentDir());
		//TODO: only clears the current dir, not recursively like clearDirectoryCache
		deleteCover(props.currentDir());
		props.fetchFiles.refetch();
		fetchCover.refetch();
	}

	let filelistElement!: HTMLDivElement;
	const scrollPositions: { part: string; pos: number }[] = [];
	createEffect(
		on(props.currentDir, () => {
			//need the timeout, otherwise we could execute the scroll before rendering finishes
			setTimeout(() => {
				let parts = `${props.currentDir()}`.split("/");
				if (props.currentDir() !== "") parts = ["", ...parts];
				scrollPositions.length = Math.min(parts.length, scrollPositions.length);
				for (let index = 0; index < parts.length; index++) {
					const part = parts[index];
					if (scrollPositions.length - 1 < index) {
						scrollPositions.push({ part, pos: 0 });
					} else if (scrollPositions[index].part !== part) {
						scrollPositions[index] = { part, pos: 0 };
					}
				}
				filelistElement.scrollTop = scrollPositions[scrollPositions.length - 1].pos;
			}, 0);
		}),
	);

	onMount(() => {
		const savedFileBrowserButtons = localStorage.getItem(LocalStorageValues.fileBrowserButtons);
		if (savedFileBrowserButtons !== null) setShowActionButtons(savedFileBrowserButtons === "true");
		createEffect(() => localStorage.setItem(LocalStorageValues.fileBrowserButtons, showActionButtons().toString()));

		filelistElement.addEventListener("scrollend", () => {
			scrollPositions[scrollPositions.length - 1].pos = filelistElement.scrollTop;
		});
	});

	//this proxy store allows us to diff changes correctly when the filelisting changes, only rerendering the changed items
	//absolute paths are required here to make sure it's really the same file in the same directory
	const [fileStore, setFileStore] = createStore<FlatFileListing>([]);
	createEffect(() => {
		const absolutePathArray = props.files.latest.map(([name, item]) => {
			return [joinPath(props.currentDir(), name), item] as [string, Directory | MediaFile];
		});
		setFileStore(reconcile(absolutePathArray, { key: "0" }));
	});

	return (
		<>
			<dialog
				class="duplicate-warning-dialog"
				ref={dialogElement}
				onclick={(e) => e.target.nodeName === "DIALOG" && dialogElement.close()}
			>
				<div>
					Some of the items you're trying to add already exists in your current playlist
					<div class="buttons">
						<button ref={addAnywayButton}>Add anyway</button>
						<button onClick={() => dialogElement.close()}>Cancel</button>
					</div>
				</div>
			</dialog>
			<div classList={{ "file-browser": true, hidden: !props.showFileBrowser() }}>
				<div class="breadcrumb">
					<For each={props.breadcrumbs()}>
						{(crumb, index) => (
							<>
								<span onClick={() => handleBreadcrumbClick(index())}>{crumb}</span>
								{index() < props.breadcrumbs().length - 1 && "/"}
							</>
						)}
					</For>
					<button
						class="toggle-browser-actions"
						title="Toggle filebrowser actions"
						onclick={() => setShowActionButtons(!showActionButtons())}
					>
						{showActionButtons() ? <UpSVG /> : <DownSVG />}
					</button>
				</div>

				<Show when={showActionButtons()}>
					<div class="browser-actions">
						<div>
							<button
								title="Replace playlist with all files in current directory"
								onClick={() => playFiles("", false, false)}
							>
								Play Directory
							</button>
							<button
								title="Replace playlist with all files in current directory and all subdirectories"
								onClick={() => playFiles("", true, false)}
							>
								Play All
							</button>
							<button title="Add all files in current directory to playlist" onClick={() => playFiles("", false, true)}>
								Queue Directory
							</button>
							<button
								title="Add all files in current directory and all subdirectories to playlist"
								onClick={() => playFiles("", true, true)}
							>
								Queue All
							</button>
						</div>
						<div class="spacer" />
						<Show when={!props.isOffline()}>
							<button
								class="refresh-button"
								title="Refresh current directory, bypassing cache"
								onClick={reloadDirectory}
							>
								<RefreshSVG />
							</button>
						</Show>
					</div>
				</Show>

				<div class="file-list-wrapper">
					<Show when={props.files.loading}>
						<LoadingScreen />
					</Show>

					<div class="file-list" ref={filelistElement}>
						<For each={fileStore}>
							{([fullPath, item]) => {
								const isDirectory = !("metadata" in item);
								const fileName = fullPath.split("/").toReversed()[0];
								return (
									<>
										<div
											class={(isDirectory && "directory-item") || "file-item"}
											onClick={() => {
												(isDirectory && props.setCurrentDir(fullPath)) || playFile(fullPath, item as MediaFile);
											}}
										>
											{(isDirectory && <ClosedFolderSVG forButton={false} />) || <MusicSVG />}
											<span>{fileName}</span>
											<div class="spacer" />
											<DownloadButton
												fileName={fileName}
												item={item}
												fetchFiles={props.fetchFiles}
												isOffline={props.isOffline}
												currentDir={props.currentDir}
												options={props.options}
											/>
											<button
												title="Add to Playlist"
												onClick={(event) => {
													event.stopPropagation();
													if (isDirectory) {
														playFiles(fileName, true, true);
													} else {
														playFiles(fileName, false, true, item);
													}
												}}
											>
												Add
											</button>
										</div>
									</>
								);
							}}
						</For>
					</div>
				</div>
				<Show when={!props.options.hideCover && (cover.loading || cover())}>
					<div class="cover">
						<Suspense fallback={<LoadingScreen />}>
							<img src={cover()} alt="" />
						</Suspense>
					</div>
				</Show>
				<Show when={loadingActions() > 0}>
					<LoadingScreen text="Loading files from subdirectories, this might take a while.." />
				</Show>
			</div>
			<div
				class="file-browser-overlay"
				style={{ display: props.showFileBrowser() ? "block" : "none" }}
				onClick={() => props.setShowFileBrowser(false)}
			/>
		</>
	);
}