import { type Accessor, createEffect, createSignal, For, type JSX, Match, 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 { MediaContainer, VideoCodec, VideoEncodingSetting } from "music-server-shared/types";
import { audioCodecHasBitrate } from "music-server-shared/utils";
import { createStore } from "solid-js/store";
import {
	type Combination,
	checkContainerSupport,
	checkSupport,
	containerAudioCodecs,
	containerVideoCodecs,
	hasMediaSource,
	playableSettings,
	type Support,
	selectableVideoCodecs,
} from "../capabilities";
import { handleUnauthorized, toast } from "../utils";
import { Modal } from "./Modal";

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>
	);
}

//all three display settings offer the same choices
function FileDisplaySelect(props: {
	id: string;
	label: string;
	value: FileDisplay;
	onPick: (value: FileDisplay) => void;
}) {
	return (
		<div>
			<label for={props.id}>{props.label}</label>
			<select id={props.id} value={props.value} onChange={(e) => props.onPick(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>
	);
}

//the parts of a transcoding profile that video and music have in common. the video-only controls are
//passed as children, so they land between the container and the audio codec like they did per-page
function ProfileSection(props: {
	title: string;
	idPrefix: string;
	settings: AppOptions["videoSettings"] | AppOptions["audioSettings"];
	setField: (field: "streamingMode" | "container" | "audioCodec" | "audioBitrate", value: string | number) => void;
	children?: JSX.Element;
}) {
	return (
		<>
			<div style={{ "font-size": "1.2rem" }} class="title">
				{props.title}
			</div>
			<div>
				<label for={`${props.idPrefix}-streaming-mode`}>Streaming mode:</label>
				<select
					id={`${props.idPrefix}-streaming-mode`}
					title={STREAMING_MODE_HINTS[props.settings.streamingMode]}
					value={props.settings.streamingMode}
					onChange={(e) => props.setField("streamingMode", e.target.value)}
				>
					<For each={Object.values(StreamingMode)}>
						{(mode) => (
							<option value={mode} disabled={mode === StreamingMode.mse && !hasMediaSource}>
								{mode}
							</option>
						)}
					</For>
				</select>
			</div>
			<div>
				<label for={`${props.idPrefix}-container`}>Container:</label>
				<select
					id={`${props.idPrefix}-container`}
					title={checkSupport(props.settings).reason}
					value={props.settings.container}
					onChange={(e) => props.setField("container", e.target.value)}
				>
					<For each={Object.values(MediaContainer)}>
						{(format) => (
							<SupportedOption
								value={format}
								support={checkContainerSupport({ ...props.settings, container: format })}
							/>
						)}
					</For>
				</select>
			</div>
			{props.children}
			<div>
				<label for={`${props.idPrefix}-audio-codec`}>Audio codec:</label>
				<select
					id={`${props.idPrefix}-audio-codec`}
					value={props.settings.audioCodec}
					onChange={(e) => props.setField("audioCodec", e.target.value)}
				>
					<For each={containerAudioCodecs(props.settings.container)}>
						{(codec) => (
							<SupportedOption value={codec} support={checkSupport({ ...props.settings, audioCodec: codec })} />
						)}
					</For>
				</select>
			</div>
			<Show when={audioCodecHasBitrate(props.settings.audioCodec)}>
				<div>
					<label for={`${props.idPrefix}-audio-bitrate`}>Audio bitrate:</label>
					<select
						id={`${props.idPrefix}-audio-bitrate`}
						value={props.settings.audioBitrate}
						onChange={(e) => props.setField("audioBitrate", Number.parseInt(e.target.value, 10))}
					>
						<For each={AUDIO_BITRATES}>{(rate) => <option value={rate}>{bitrateLabel(rate)}</option>}</For>
					</select>
				</div>
			</Show>
		</>
	);
}

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 formElement!: HTMLFormElement;

	//the last two pages only exist while transcoding is on
	const pages = () => (newOptions.enableTranscoding ? [1, 2, 3, 4, 5] : [1, 2, 3]);

	//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. the store setter merges key by key and skips values it
	//already holds, so a settled selection writes nothing, notifies nobody and this re-run is the last
	function coerceProfile(profile: Profile) {
		setNewOptions(profile, playableSettings<Combination>(newOptions[profile]));
	}
	createEffect(() => coerceProfile("videoSettings"));
	createEffect(() => coerceProfile("audioSettings"));

	function handleSave(close: () => void) {
		if (!formElement.reportValidity()) return;
		toast("Saved changes", "success");
		props.setOptions(newOptions);
		close();
	}

	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 (
		<Modal
			show={props.showOptions}
			setShow={props.setShowOptions}
			onOpen={() => {
				setNewOptions(props.options);
				setOptionsPage(1);
			}}
		>
			{(close) => (
				<form class="option-content" ref={formElement}>
					<div class="title">Player Options</div>
					<hr />
					<div class="options-page-buttons">
						<For each={pages()}>
							{(page) => (
								<button
									onClick={(e) => {
										e.preventDefault();
										setOptionsPage(page);
									}}
									classList={{ "page-button-active": optionsPage() === page }}
								>
									{page}
								</button>
							)}
						</For>
					</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">Subtitle 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. A matching subtitle is selected by default; no match leaves subtitles off."
									value={newOptions.languages}
									onChange={(e) => setNewOptions("languages", e.target.value)}
								/>
							</div>
							<div>
								<label for="audio-language-input">Audio language preference:</label>
								<input
									id="audio-language-input"
									type="text"
									placeholder="en,de"
									title="Two-letter language codes (ISO 639-1), separated by commas, most preferred first. A matching audio track is selected during transcoding; no match uses the source default track."
									value={newOptions.audioLanguagePreference}
									onChange={(e) => setNewOptions("audioLanguagePreference", 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>
							<FileDisplaySelect
								id="filebrowser-display-select"
								label="Filebrowser:"
								value={newOptions.filebrowserDisplay}
								onPick={(value) => setNewOptions("filebrowserDisplay", value)}
							/>
							<FileDisplaySelect
								id="playlist-display-select"
								label="Playlist:"
								value={newOptions.playlistDisplay}
								onPick={(value) => setNewOptions("playlistDisplay", value)}
							/>
							<FileDisplaySelect
								id="controls-display-select"
								label="Current track:"
								value={newOptions.controlsDisplay}
								onPick={(value) => setNewOptions("controlsDisplay", value)}
							/>
							<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}>
							<ProfileSection
								title="Transcoding settings for videos"
								idPrefix="video"
								settings={newOptions.videoSettings}
								setField={(field, value) =>
									setNewOptions("videoSettings", field as "container", value as MediaContainer)
								}
							>
								<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) => <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>
							</ProfileSection>
						</Match>
						<Match when={optionsPage() === 5}>
							<ProfileSection
								title="Transcoding settings for music"
								idPrefix="music"
								settings={newOptions.audioSettings}
								setField={(field, value) =>
									setNewOptions("audioSettings", field as "container", value as MediaContainer)
								}
							/>
						</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(close)}>
							Save
						</button>
						<button title="Cancel changes settings" type="button" class="cancel-button" onClick={close}>
							Cancel
						</button>
					</div>
				</form>
			)}
		</Modal>
	);
}