import {
	type Accessor,
	createEffect,
	createMemo,
	createSignal,
	For,
	onCleanup,
	type ResourceActions,
	type Setter,
	Show,
} from "solid-js";
import "./StorageManager.css";
import "./Dialog.css";
import "toastify-js/src/toastify.css";
import type { FlatFileListing } from "../App";
import { clearAllDownloads, clearLocalData, storageStatsLive } from "../offline";
import { formatBytes, toast } from "../utils";
import { ClearSVG } from "./SVG";

interface StorageManagerProps {
	showStorage: Accessor<boolean>;
	setShowStorage: Setter<boolean>;
	fetchFiles: ResourceActions<FlatFileListing>;
}

//formatBytes(0) returns "Queued...", which fits download progress but not a usage display
function formatSize(bytes: number): string {
	return bytes === 0 ? "0 B" : formatBytes(bytes);
}

//not part of the TS dom lib types yet, only implemented in Chromium
type StorageEstimateWithDetails = StorageEstimate & { usageDetails?: Record<string, number> };

const USAGE_DETAIL_LABELS: Record<string, string> = {
	indexeddb: "IndexedDB",
	caches: "Cache storage",
	serviceWorkerRegistrations: "Service workers",
};

//two-step button for destructive actions: the first click arms it for a few seconds,
//the second actually runs onConfirm
function ConfirmButton(props: { label: string; title: string; onConfirm: () => void }) {
	const [armed, setArmed] = createSignal(false);
	let timer: ReturnType<typeof setTimeout> | undefined;
	onCleanup(() => clearTimeout(timer));

	return (
		<button
			title={props.title}
			classList={{ "storagemanager-armed": armed() }}
			onClick={() => {
				if (armed()) {
					clearTimeout(timer);
					setArmed(false);
					props.onConfirm();
				} else {
					setArmed(true);
					timer = setTimeout(() => setArmed(false), 3000);
				}
			}}
		>
			{armed() ? "Click again to confirm" : props.label}
		</button>
	);
}

export default function StorageManager(props: StorageManagerProps) {
	let dialogElement!: HTMLDialogElement;

	const [estimate, setEstimate] = createSignal<StorageEstimateWithDetails>();
	const [estimateSupported, setEstimateSupported] = createSignal(true);
	const [persisted, setPersisted] = createSignal<boolean>();
	const [persistedSupported, setPersistedSupported] = createSignal(true);
	const [requestingPersist, setRequestingPersist] = createSignal(false);
	const [resetError, setResetError] = createSignal<string>();
	const [resetting, setResetting] = createSignal(false);

	async function refreshStorageInfo() {
		if (navigator.storage?.estimate) {
			setEstimateSupported(true);
			setEstimate(await navigator.storage.estimate().catch(() => undefined));
		} else {
			setEstimateSupported(false);
		}
		if (navigator.storage?.persisted) {
			setPersistedSupported(true);
			setPersisted(await navigator.storage.persisted().catch(() => undefined));
		} else {
			setPersistedSupported(false);
		}
	}

	createEffect(() => {
		if (props.showStorage()) {
			dialogElement.showModal();
			refreshStorageInfo();
			setResetError(undefined);
		}
	});

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

	const usagePercent = createMemo(() => {
		const current = estimate();
		if (!current?.quota || !current.usage) return 0;
		return Math.min(100, (current.usage / current.quota) * 100);
	});

	//usageDetails is Chromium-only; elsewhere this stays empty and the breakdown is skipped
	const usageDetails = createMemo(() => Object.entries(estimate()?.usageDetails ?? {}));

	const quotaLabel = createMemo(() => {
		const quota = estimate()?.quota;
		return quota === undefined ? "unknown" : formatSize(quota);
	});

	async function requestPersistence() {
		setRequestingPersist(true);
		try {
			setPersisted(await navigator.storage.persist());
		} catch (e) {
			toast("Requesting persistent storage failed", "error", e);
		}
		setRequestingPersist(false);
	}

	async function clearSynced() {
		try {
			await clearAllDownloads(props.fetchFiles);
			toast("Cleared all synced files", "success");
		} catch (e) {
			toast("Clearing synced files failed", "error", e);
		}
		refreshStorageInfo();
	}

	async function fullReset() {
		setResetting(true);
		setResetError(undefined);
		const failure = await clearLocalData().catch((e) => e?.toString() ?? "Unknown error");
		if (failure) {
			setResetError(failure);
			setResetting(false);
			return;
		}
		location.hash = "";
		location.reload();
	}

	return (
		<dialog
			ref={dialogElement}
			onClose={handleClose}
			onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}
		>
			<div>
				<div class="storagemanager-header title">
					<span>Storage</span>
					<button title="Close dialog" onClick={handleClose}>
						<ClearSVG />
					</button>
				</div>
				<hr />

				<Show
					when={estimateSupported()}
					fallback={<div class="storagemanager-section">Storage estimate API not available in this browser</div>}
				>
					<div class="storagemanager-section">
						<div class="storagemanager-row">
							<span>Usage: {formatSize(estimate()?.usage ?? 0)}</span>
							<span>Quota: {quotaLabel()}</span>
						</div>
						<div class="storagemanager-bar" title={`${usagePercent().toFixed(1)}% of quota used`}>
							<div class="storagemanager-bar-fill" style={{ width: `${usagePercent()}%` }} />
							<span>{usagePercent().toFixed(1)}%</span>
						</div>
						<Show when={usageDetails().length > 0}>
							<For each={usageDetails()}>
								{([key, bytes]) => (
									<div class="storagemanager-row storagemanager-detail">
										<span>{USAGE_DETAIL_LABELS[key] ?? key}</span>
										<span>{formatSize(bytes)}</span>
									</div>
								)}
							</For>
						</Show>
					</div>
				</Show>

				<Show when={persistedSupported()}>
					<div class="storagemanager-section">
						<div class="storagemanager-row">
							<span>Persistent storage: {persisted() === undefined ? "unknown" : persisted() ? "yes" : "no"}</span>
							<Show when={persisted() === false}>
								<button
									title="Ask the browser to never evict this site's stored files when space runs low"
									disabled={requestingPersist()}
									onClick={requestPersistence}
								>
									Request persistent storage
								</button>
							</Show>
						</div>
					</div>
				</Show>

				<div class="storagemanager-section">
					<div class="storagemanager-row">
						<span>Synced files: {storageStatsLive().fileCount}</span>
						<span>{formatSize(storageStatsLive().fileBytes)}</span>
					</div>
					<div class="storagemanager-row">
						<span>Covers: {storageStatsLive().coverCount}</span>
						<span>Playlists: {storageStatsLive().playlistCount}</span>
					</div>
				</div>

				<div class="storagemanager-section storagemanager-actions">
					<ConfirmButton
						label="Clear synced files"
						title="Delete all synced files and covers from local storage. Playlists and settings are kept"
						onConfirm={clearSynced}
					/>
					<ConfirmButton
						label={resetting() ? "Resetting..." : "Full reset"}
						title="Delete everything this app has stored locally - files, covers, playlists, settings and caches - then reload the page"
						onConfirm={fullReset}
					/>
					<Show when={resetError()}>
						<div class="storagemanager-error">{resetError()}</div>
					</Show>
				</div>
			</div>
		</dialog>
	);
}