import { batch, createEffect, createMemo, createSignal, For, Show, type Accessor, type Setter } from "solid-js";
import "./DownloadManager.css";
import "./Dialog.css";
import "toastify-js/src/toastify.css";
import { formatBytes } from "../utils";
import { ClearSVG, RefreshSVG, StopSVG } from "./SVG";
import { type DownloadStatus, downloadStatusMap, setDownloadStatusMap, type Progress } from "../offline";

interface DownloadManagerProps {
	showDownloadManager: Accessor<boolean>;
	setShowDownloadManager: Setter<boolean>;
}

export default function DownloadManager(props: DownloadManagerProps) {
	let dialogElement!: HTMLDialogElement;

	createEffect(() => {
		if (props.showDownloadManager()) {
			dialogElement.showModal();
		}
	});

	function handleClose() {
		dialogElement.close();
		props.setShowDownloadManager(false);
	}

	const downloadKeys = createMemo(() => {
		const keys = Object.keys(downloadStatusMap);
		const progressKeys = keys.filter((key) => isProgress(downloadStatusMap[key]));

		// Sort the keys: Running first (by path), then Failed (by path), then Aborted (by path)
		progressKeys.sort((pathA, pathB) => {
			const statusA = downloadStatusMap[pathA] as Progress;
			const statusB = downloadStatusMap[pathB] as Progress;

			// 0: Running, 1: Failed, 2: Aborted
			const typeA =
				typeof statusA.status === "number" ? (statusA.status > 0 ? 0 : 3) : statusA.status === "Failed" ? 1 : 2;
			const typeB =
				typeof statusB.status === "number" ? (statusB.status > 0 ? 0 : 3) : statusB.status === "Failed" ? 1 : 2;

			if (typeA !== typeB) {
				return typeA - typeB; // Sort by type first
			}

			// If types are the same, sort by path numerically/alphabetically
			return pathA.localeCompare(pathB, undefined, { numeric: true });
		});
		return progressKeys;
	});

	function isProgress(status: DownloadStatus | undefined): status is Progress {
		return status !== undefined && typeof status === "object" && "status" in status;
	}

	return (
		<dialog
			style={{ height: "90%" }}
			ref={dialogElement}
			onClose={handleClose}
			onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}
		>
			<div style={{ height: "100%" }}>
				<div class="downloadmanager-header title">
					Download
					<div class="spacer" />
					<button
						title="Retry all failed/aborted downloads"
						onClick={() => {
							batch(() => {
								for (const path of downloadKeys()) {
									const status = downloadStatusMap[path] as Progress;
									if ("retry" in status) status.retry();
								}
							});
						}}
					>
						<RefreshSVG />
					</button>
					<button
						title="stop all running downloads"
						onClick={async () => {
							batch(async () => {
								for (const path of downloadKeys()) {
									const status = downloadStatusMap[path] as Progress;
									if (typeof status.status === "number") {
										status.abort();
									}
								}
							});
						}}
					>
						<StopSVG />
					</button>
					<button
						title="Clear all failed/aborted downloads"
						onClick={() => {
							batch(() => {
								for (const path of downloadKeys()) {
									const status = downloadStatusMap[path] as Progress;
									if (status.status === "Aborted" || status.status === "Failed") setDownloadStatusMap(path, undefined);
								}
							});
						}}
					>
						Clear
					</button>
					<button title="Close dialog" onClick={handleClose}>
						<ClearSVG />
					</button>
				</div>
				<hr />
				<div class="downloadmanager-content">
					<For each={downloadKeys()}>
						{(path) => {
							const [showReason, setShowReason] = createSignal(false);
							const status = downloadStatusMap[path] as Progress;
							return (
								<div
									classList={{
										"downloadmanager-item": true,
										"downloadmanager-item-failed": status.status === "Failed",
										"downloadmanager-item-aborted": status.status === "Aborted",
									}}
								>
									<span>{path}</span>
									<hr />
									<div class="downloadmanager-buttons">
										{status && typeof status.status === "number" ? (
											<>
												<span>{formatBytes(status.status)}</span>
												<button title="Stop Download" onClick={() => status.abort()}>
													<StopSVG />
												</button>
											</>
										) : (
											<>
												{(status.status === "Failed" && (
													<button title="Show reason" onclick={() => setShowReason(!showReason())}>
														Reason
													</button>
												)) ||
													"Aborted"}
												<button title="Retry download" onClick={() => status.retry()}>
													<RefreshSVG />
												</button>
												<button title="Clear Download" onClick={() => setDownloadStatusMap(path, undefined)}>
													<ClearSVG />
												</button>
											</>
										)}
									</div>
									<Show when={showReason()}>{"reason" in status && status.reason}</Show>
								</div>
							);
						}}
					</For>
				</div>
			</div>
		</dialog>
	);
}