import { type Accessor, batch, createEffect, createSignal, For, Match, on, type Setter, Show, Switch } from "solid-js";
import { type AppOptions, AUDIO_BITRATES, FileDisplay, StreamingMode, VIDEO_BITRATES } from "../types";
import "./OptionsModal.css";
import "./Dialog.css";
import "toastify-js/src/toastify.css";
import { AudioCodec, MediaContainer, VideoCodec, VideoEncodingSetting } from "music-server-shared/types";
import { audioCodecHasBitrate } from "music-server-shared/utils";
import { createStore } from "solid-js/store";
import {
	checkAudioContainerSupport,
	checkSupport,
	checkVideoContainerSupport,
	type Combination,
	containerAudioCodecs,
	containerVideoCodecs,
	hasMediaSource,
	playableSettings,
	selectableVideoCodecs,
	type Support,
} from "../capabilities";
import { handleUnauthorized, toast } from "../utils";

interface OptionsModalProps {
	showOptions: Accessor<boolean>;
	setShowOptions: Setter<boolean>;
	options: AppOptions;
	setOptions: (options: AppOptions) => void;
}

const STREAMING_MODE_HINTS: Record<StreamingMode, string> = {
	[StreamingMode.mse]:
		"Media Source Extensions: the transcode is streamed into a SourceBuffer. The only mode that can seek within a transcode, but limited to the containers and codecs that support MSE.",
	[StreamingMode.progressive]:
		"The transcode is streamed straight to the player as it is produced. Plays whatever the browser can decode, but cannot seek.",
	[StreamingMode.buffered]:
		"The server transcodes the whole file before sending anything, so the response is a normal sized download instead of a chunked one. Much slower to start, and only needed for browsers that refuse chunked media sources (Safari).",
};

type Profile = "videoSettings" | "audioSettings";

function bitrateLabel(bitrate: number): string {
	return bitrate < 1_000_000 ? `${bitrate / 1000} kbps` : `${bitrate / 1_000_000} Mbps`;
}

function SupportedOption(props: { value: string; support: Support }) {
	return (
		<option value={props.value} disabled={!props.support.supported} title={props.support.reason}>
			{props.support.supported ? props.value : `${props.value} (unsupported)`}
		</option>
	);
}

export default function OptionsModal(props: OptionsModalProps) {
	//clone, otherwise it shares the reference
	const [newOptions, setNewOptions] = createStore<AppOptions>({ ...props.options });
	const [optionsPage, setOptionsPage] = createSignal(1);
	let dialogElement!: HTMLDialogElement;
	let formElement!: HTMLFormElement;

	const videoSupport = () => checkSupport(newOptions.videoSettings);
	const audioSupport = () => checkSupport(newOptions.audioSettings);

	//keep the selection playable, so the greyed-out entries in the lists are only ever ones the user could
	//pick and never the one they are already on. writing a value a store already holds notifies nobody, so
	//once the selection is playable this re-runs, finds the same values and settles
	function coerceProfile(profile: Profile) {
		const playable = playableSettings<Combination>(newOptions[profile]);
		batch(() => {
			setNewOptions(profile, "streamingMode", playable.streamingMode);
			setNewOptions(profile, "container", playable.container);
			setNewOptions(profile, "audioCodec", playable.audioCodec);
			//only videoSettings has a video codec, which is exactly when playableSettings returns one
			if (playable.videoCodec !== undefined) setNewOptions("videoSettings", "videoCodec", playable.videoCodec);
		});
	}
	createEffect(() => coerceProfile("videoSettings"));
	createEffect(() => coerceProfile("audioSettings"));

	createEffect(
		on(props.showOptions, () => {
			if (props.showOptions()) {
				dialogElement.showModal();
				setNewOptions(props.options);
				setOptionsPage(1);
			}
		}),
	);

	function handleSave(e: Event) {
		e.preventDefault();
		if (!formElement.reportValidity()) return;
		toast("Saved changes", "success");
		props.setOptions(newOptions);
		handleClose();
	}

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

	async function deleteServerCache() {
		const response = await fetch("/reset-cache", { method: "POST", credentials: "same-origin" }).catch(() => {});
		if (handleUnauthorized(response)) return;
		if (response?.status !== 200) {
			toast("Clearing server cache failed", "error");
		} else {
			toast("Server cache cleared", "info");
		}
	}

	return (
		<dialog ref={dialogElement} onClose={handleClose} onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}>
			<form class="option-content" ref={formElement}>
				<div class="title">Player Options</div>
				<hr />
				<div class="options-page-buttons">
					<button
						onClick={(e) => {
							e.preventDefault();
							return setOptionsPage(1);
						}}
						classList={{ "page-button-active": optionsPage() === 1 }}
					>
						1
					</button>
					<button
						onClick={(e) => {
							e.preventDefault();
							return setOptionsPage(2);
						}}
						classList={{ "page-button-active": optionsPage() === 2 }}
					>
						2
					</button>
					<button
						onClick={(e) => {
							e.preventDefault();
							return setOptionsPage(3);
						}}
						classList={{ "page-button-active": optionsPage() === 3 }}
					>
						3
					</button>
					{newOptions.enableTranscoding && (
						<button
							onClick={(e) => {
								e.preventDefault();
								return setOptionsPage(4);
							}}
							classList={{ "page-button-active": optionsPage() === 4 }}
						>
							4
						</button>
					)}
					{newOptions.enableTranscoding && (
						<button
							onClick={(e) => {
								e.preventDefault();
								return setOptionsPage(5);
							}}
							classList={{ "page-button-active": optionsPage() === 5 }}
						>
							5
						</button>
					)}
				</div>
				<Switch>
					<Match when={optionsPage() === 1}>
						<div>
							<label for="transcoding-checkbox">Enable transcoding:</label>
							<input
								id="transcoding-checkbox"
								type="checkbox"
								checked={newOptions.enableTranscoding}
								onChange={(e) => setNewOptions("enableTranscoding", e.target.checked)}
							/>
						</div>
						<div>
							<label for="language-input">Language preference:</label>
							<input
								id="language-input"
								type="text"
								placeholder="en,de"
								title="Two-letter language codes (ISO 639-1), separated by commas, most preferred first. Three-letter codes like 'eng' do not match."
								value={newOptions.languages}
								onChange={(e) => setNewOptions("languages", e.target.value)}
								disabled={!newOptions.enableTranscoding}
							/>
						</div>
						<div>
							<label for="max-transcodes-input">Max concurrent transcodes:</label>
							<input
								id="max-transcodes-input"
								type="number"
								min={1}
								required
								value={newOptions.maxTranscodes}
								disabled={!newOptions.enableTranscoding}
								onChange={(e) => setNewOptions("maxTranscodes", e.target.valueAsNumber)}
							/>
						</div>
						<div>
							<label for="max-downloads-input">Max concurrent downloads:</label>
							<input
								id="max-downloads-input"
								type="number"
								min={1}
								required
								value={newOptions.maxDownloads}
								onChange={(e) => setNewOptions("maxDownloads", e.target.valueAsNumber)}
							/>
						</div>
					</Match>
					<Match when={optionsPage() === 2}>
						<div>
							<label for="hide-volume-checkbox">Hide volume:</label>
							<input
								id="hide-volume-checkbox"
								type="checkbox"
								checked={newOptions.hideVolume}
								onChange={(e) => setNewOptions("hideVolume", e.target.checked)}
							/>
						</div>
						<div>
							<label for="hide-cover-checkbox">Hide file browser cover:</label>
							<input
								id="hide-cover-checkbox"
								type="checkbox"
								checked={newOptions.hideCover}
								onChange={(e) => setNewOptions("hideCover", e.target.checked)}
							/>
						</div>
						<div>
							<label for="hide-playlist-cover-checkbox">Hide current track cover:</label>
							<input
								id="hide-playlist-cover-checkbox"
								type="checkbox"
								checked={newOptions.hidePlaylistCover}
								onChange={(e) => setNewOptions("hidePlaylistCover", e.target.checked)}
							/>
						</div>
						<div>
							<label for="filebrowser-display-select">Filebrowser:</label>
							<select
								id="filebrowser-display-select"
								value={newOptions.filebrowserDisplay}
								onChange={(e) => setNewOptions("filebrowserDisplay", Number.parseInt(e.target.value, 10))}
							>
								<option value={FileDisplay.FILENAME}>Filename</option>
								<option value={FileDisplay.TITLE}>Media title</option>
								<option value={FileDisplay.TRACKNO_TITLE}>Track number + Media title</option>
							</select>
						</div>
						<div>
							<label for="playlist-display-select">Playlist:</label>
							<select
								id="playlist-display-select"
								value={newOptions.playlistDisplay}
								onChange={(e) => setNewOptions("playlistDisplay", Number.parseInt(e.target.value, 10))}
							>
								<option value={FileDisplay.FILENAME}>Filename</option>
								<option value={FileDisplay.TITLE}>Media title</option>
								<option value={FileDisplay.TRACKNO_TITLE}>Track number + Media title</option>
							</select>
						</div>
						<div>
							<label for="controls-display-select">Current track:</label>
							<select
								id="controls-display-select"
								value={newOptions.controlsDisplay}
								onChange={(e) => setNewOptions("controlsDisplay", Number.parseInt(e.target.value, 10))}
							>
								<option value={FileDisplay.FILENAME}>Filename</option>
								<option value={FileDisplay.TITLE}>Media title</option>
								<option value={FileDisplay.TRACKNO_TITLE}>Track number + Media title</option>
							</select>
						</div>

						<div>
							<label for="font-resolution-select">Font resolution:</label>
							<select
								id="font-resolution-select"
								value={newOptions.fontResolution}
								onChange={(e) => setNewOptions("fontResolution", Number.parseInt(e.target.value, 10))}
							>
								<option value={10}>10px</option>
								<option value={12}>12px</option>
								<option value={16}>16px</option>
							</select>
						</div>
						<div>
							<label for="progress-height-input">Progress bar height:</label>
							<input
								id="progress-height-input"
								type="number"
								min={0}
								required
								value={newOptions.progressBarHeight}
								onChange={(e) => setNewOptions("progressBarHeight", e.target.valueAsNumber)}
							/>
						</div>
					</Match>
					<Match when={optionsPage() === 3}>
						<div>
							<label for="remember-dir-checkbox">Remember last directory:</label>
							<input
								id="remember-dir-checkbox"
								type="checkbox"
								checked={newOptions.rememberDir}
								onChange={(e) => setNewOptions("rememberDir", e.target.checked)}
							/>
						</div>
						<div>
							<label for="duplicate-checkbox">Warn when adding duplicate to playlist:</label>
							<input
								id="duplicate-checkbox"
								type="checkbox"
								checked={newOptions.duplicateWarning}
								onChange={(e) => setNewOptions("duplicateWarning", e.target.checked)}
							/>
						</div>
						<div>
							<label for="transcode-covers-checkbox">Transcode covers to avif:</label>
							<input
								id="transcode-covers-checkbox"
								type="checkbox"
								checked={newOptions.transcodeCovers}
								onChange={(e) => setNewOptions("transcodeCovers", e.target.checked)}
							/>
						</div>
					</Match>
					<Match when={optionsPage() === 4}>
						<div style={{ "font-size": "1.2rem" }} class="title">
							Transcoding settings for videos
						</div>
						<div>
							<label for="video-streaming-mode-select">Streaming mode:</label>
							<select
								id="video-streaming-mode-select"
								title={STREAMING_MODE_HINTS[newOptions.videoSettings.streamingMode]}
								value={newOptions.videoSettings.streamingMode}
								onChange={(e) => setNewOptions("videoSettings", "streamingMode", e.target.value as StreamingMode)}
							>
								<For each={Object.values(StreamingMode)}>
									{(mode) => (
										<option value={mode} disabled={mode === StreamingMode.mse && !hasMediaSource}>
											{mode}
										</option>
									)}
								</For>
							</select>
						</div>
						<div>
							<label for="container-select">Container:</label>
							<select
								id="container-select"
								title={videoSupport().reason}
								value={newOptions.videoSettings.container}
								onChange={(e) => setNewOptions("videoSettings", "container", e.target.value as MediaContainer)}
							>
								<For each={Object.values(MediaContainer)}>
									{(format) => (
										<SupportedOption
											value={format}
											support={checkVideoContainerSupport({ ...newOptions.videoSettings, container: format })}
										/>
									)}
								</For>
							</select>
						</div>
						<Show when={selectableVideoCodecs(newOptions.videoSettings).length > 0}>
							<div>
								<label for="video-codec-select">Video codec:</label>
								<select
									id="video-codec-select"
									value={newOptions.videoSettings.videoCodec}
									onChange={(e) => setNewOptions("videoSettings", "videoCodec", e.target.value as VideoCodec)}
								>
									<For each={containerVideoCodecs(newOptions.videoSettings.container)}>
										{(codec) => (
											<SupportedOption
												value={codec}
												support={checkSupport({ ...newOptions.videoSettings, videoCodec: codec })}
											/>
										)}
									</For>
								</select>
							</div>
						</Show>
						<Show when={newOptions.videoSettings.videoCodec !== VideoCodec.none}>
							<div>
								<label for="video-settings-select">Video encoding settings:</label>
								<select
									id="video-settings-select"
									value={newOptions.videoSettings.videoEncodingSetting}
									onChange={(e) =>
										setNewOptions("videoSettings", "videoEncodingSetting", e.target.value as VideoEncodingSetting)
									}
								>
									<For each={Object.values(VideoEncodingSetting)}>
										{(setting) => {
											return <option value={setting}>{setting}</option>;
										}}
									</For>
								</select>
							</div>
							<div>
								<label for="video-bitrate-select">Video bitrate:</label>
								<select
									id="video-bitrate-select"
									value={newOptions.videoSettings.videoBitrate}
									onChange={(e) => setNewOptions("videoSettings", "videoBitrate", Number.parseInt(e.target.value, 10))}
								>
									<For each={VIDEO_BITRATES}>{(rate) => <option value={rate}>{bitrateLabel(rate)}</option>}</For>
								</select>
							</div>
						</Show>
						<div>
							<label for="audio-codec-select">Audio codec:</label>
							<select
								id="audio-codec-select"
								value={newOptions.videoSettings.audioCodec}
								onChange={(e) => setNewOptions("videoSettings", "audioCodec", e.target.value as AudioCodec)}
							>
								<For each={containerAudioCodecs(newOptions.videoSettings.container)}>
									{(codec) => (
										<SupportedOption
											value={codec}
											support={checkSupport({ ...newOptions.videoSettings, audioCodec: codec })}
										/>
									)}
								</For>
							</select>
						</div>
						<Show when={audioCodecHasBitrate(newOptions.videoSettings.audioCodec)}>
							<div>
								<label for="audio-bitrate-select">Audio bitrate:</label>
								<select
									id="audio-bitrate-select"
									value={newOptions.videoSettings.audioBitrate}
									onChange={(e) => setNewOptions("videoSettings", "audioBitrate", Number.parseInt(e.target.value, 10))}
								>
									<For each={AUDIO_BITRATES}>{(rate) => <option value={rate}>{bitrateLabel(rate)}</option>}</For>
								</select>
							</div>
						</Show>
					</Match>
					<Match when={optionsPage() === 5}>
						<div style={{ "font-size": "1.2rem" }} class="title">
							Transcoding settings for music
						</div>
						<div>
							<label for="audio-streaming-mode-select">Streaming mode:</label>
							<select
								id="audio-streaming-mode-select"
								title={STREAMING_MODE_HINTS[newOptions.audioSettings.streamingMode]}
								value={newOptions.audioSettings.streamingMode}
								onChange={(e) => setNewOptions("audioSettings", "streamingMode", e.target.value as StreamingMode)}
							>
								<For each={Object.values(StreamingMode)}>
									{(mode) => (
										<option value={mode} disabled={mode === StreamingMode.mse && !hasMediaSource}>
											{mode}
										</option>
									)}
								</For>
							</select>
						</div>
						<div>
							<label for="music-container-select">Container:</label>
							<select
								id="music-container-select"
								title={audioSupport().reason}
								value={newOptions.audioSettings.container}
								onChange={(e) => setNewOptions("audioSettings", "container", e.target.value as MediaContainer)}
							>
								<For each={Object.values(MediaContainer)}>
									{(format) => (
										<SupportedOption
											value={format}
											support={checkAudioContainerSupport({ ...newOptions.audioSettings, container: format })}
										/>
									)}
								</For>
							</select>
						</div>
						<div>
							<label for="music-audio-codec-select">Audio codec:</label>
							<select
								id="music-audio-codec-select"
								value={newOptions.audioSettings.audioCodec}
								onChange={(e) => setNewOptions("audioSettings", "audioCodec", e.target.value as AudioCodec)}
							>
								<For each={containerAudioCodecs(newOptions.audioSettings.container)}>
									{(codec) => (
										<SupportedOption
											value={codec}
											support={checkSupport({ ...newOptions.audioSettings, audioCodec: codec })}
										/>
									)}
								</For>
							</select>
						</div>
						<Show when={audioCodecHasBitrate(newOptions.audioSettings.audioCodec)}>
							<div>
								<label for="music-audio-bitrate-select">Audio bitrate:</label>
								<select
									id="music-audio-bitrate-select"
									value={newOptions.audioSettings.audioBitrate}
									onChange={(e) => setNewOptions("audioSettings", "audioBitrate", Number.parseInt(e.target.value, 10))}
								>
									<For each={AUDIO_BITRATES}>{(rate) => <option value={rate}>{bitrateLabel(rate)}</option>}</For>
								</select>
							</div>
						</Show>
					</Match>
				</Switch>
				<div class="option-buttons">
					<button title="Clear server caches" type="button" class="cache-button" onclick={deleteServerCache}>
						Clear server caches
					</button>
					<button title="Save settings" type="button" onClick={handleSave}>
						Save
					</button>
					<button title="Cancel changes settings" type="button" class="cancel-button" onClick={handleClose}>
						Cancel
					</button>
				</div>
			</form>
		</dialog>
	);
}