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

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

export default function DownloadManager(props: DownloadManagerProps) {
	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;
	}

	const counts = createMemo(() => {
		const counted = { downloading: 0, aborted: 0, failed: 0 };
		for (const key of downloadKeys()) {
			const status = downloadStatusMap[key];
			if (!isProgress(status)) continue;
			if (typeof status.status === "number") counted.downloading++;
			else if (status.status === "Aborted") counted.aborted++;
			else if (status.status === "Failed") counted.failed++;
		}
		return counted;
	});

	return (
		<Modal show={props.showDownloadManager} setShow={props.setShowDownloadManager} style={{ height: "90%" }}>
			{(close) => (
				<div style={{ height: "100%" }}>
					<div class="downloadmanager-header title">
						<span>Downloads</span>
						<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={() => {
								batch(() => {
									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={close}>
							<ClearSVG />
						</button>
					</div>
					<hr />
					<div class="downloadmanager-counters">
						<span>In progress: {counts().downloading}</span>
						<span>Aborted: {counts().aborted}</span>
						<span>Failed: {counts().failed}</span>
					</div>
					<div class="downloadmanager-content">
						<For each={downloadKeys()}>
							{(path) => {
								const [showReason, setShowReason] = createSignal(false);
								//an accessor, not a snapshot: progress updates replace the whole value object while <For>
								//keeps this row alive, so reading it once would freeze the byte counter and the status styling
								const status = () => downloadStatusMap[path] as Progress | undefined;
								return (
									<Show when={status()}>
										{(currentStatus) => (
											<div
												classList={{
													"downloadmanager-item": true,
													"downloadmanager-item-failed": currentStatus().status === "Failed",
													"downloadmanager-item-aborted": currentStatus().status === "Aborted",
												}}
											>
												<span>{path}</span>
												<hr />
												<div class="downloadmanager-buttons">
													{typeof currentStatus().status === "number" ? (
														<>
															<span>{formatBytes(currentStatus().status as number)}</span>
															<button
																title="Stop Download"
																onClick={() => {
																	const running = currentStatus();
																	if ("abort" in running) running.abort();
																}}
															>
																<StopSVG />
															</button>
														</>
													) : (
														<>
															{(currentStatus().status === "Failed" && (
																<button title="Show reason" onclick={() => setShowReason(!showReason())}>
																	Reason
																</button>
															)) ||
																"Aborted"}
															<button
																title="Retry download"
																onClick={() => {
																	const stopped = currentStatus();
																	if ("retry" in stopped) stopped.retry();
																}}
															>
																<RefreshSVG />
															</button>
															<button title="Clear Download" onClick={() => setDownloadStatusMap(path, undefined)}>
																<ClearSVG />
															</button>
														</>
													)}
												</div>
												<Show when={showReason()}>
													{(() => {
														const reasonStatus = currentStatus();
														return "reason" in reasonStatus && reasonStatus.reason;
													})()}
												</Show>
											</div>
										)}
									</Show>
								);
							}}
						</For>
					</div>
				</div>
			)}
		</Modal>
	);
}