import "./PlayerControls.css";
import { type Accessor, createEffect, createSignal, For, type Setter, Show } from "solid-js";
import type { SetStoreFunction } from "solid-js/store";
import type { AppOptions, LoadedVideoExtras, PlayerState } from "../types";
import { formatFilename, formatTime, LocalStorageValues, persistedToggle } from "../utils";
import { LoadingSpinner } from "./LoadingScreen";
import {
	ClearSVG,
	DownSVG,
	FullscreenSVG,
	InfoSVG,
	NextTrackSVG,
	PauseSVG,
	PlaySVG,
	PreviousTrackSVG,
	RepeatSVG,
	ShuffleSVG,
	SquareSVG,
	TheaterSVG,
	UpSVG,
	VolumeSVG,
} from "./SVG";

type SubtitleSelection = "off" | number;

const PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];

interface PlayerControlsProps {
	playerState: PlayerState;
	setPlayerState: SetStoreFunction<PlayerState>;
	togglePlay: () => void;
	stopPlaying: () => void;
	playPrevious: () => void;
	playNext: () => void;
	isShuffled: Accessor<boolean>;
	setShuffled: Setter<boolean>;
	isRepeated: Accessor<boolean>;
	setRepeated: Setter<boolean>;
	needMSESeek: (seekTo: number) => boolean;
	seekTo: (seekTo: number) => void;
	options: AppOptions;
	videoElement: HTMLVideoElement;
	isVideoTrack: Accessor<boolean>;
	videoExtras: Accessor<LoadedVideoExtras | undefined>;
	selectedSubtitle: Accessor<SubtitleSelection>;
	setSelectedSubtitle: Setter<SubtitleSelection>;
	videoTheater: Accessor<boolean>;
	toggleVideoTheater: () => void;
}

export default function PlayerControls(props: PlayerControlsProps) {
	const controlsDisabled = () => !props.playerState.currentTrack;

	function setVolume(e: Event) {
		const input = e.target as HTMLInputElement;
		const volume = Number.parseFloat(input.value);
		props.setPlayerState("volume", volume);

		if (props.videoElement) {
			props.videoElement.volume = volume;
		}
	}

	function progressClick(e: MouseEvent) {
		const progressBar = e.currentTarget as HTMLDivElement;
		const rect = progressBar.getBoundingClientRect();
		seekTo((e.clientX - rect.left) / rect.width);
	}

	// Seek to position
	function seekTo(posPercent: number) {
		const playerState = props.playerState;
		if (!props.videoElement || !playerState.currentTrack) return;
		const duration = playerState.currentTrack.metadata.duration;
		const seekTime = Math.max(0, posPercent * duration);
		if (props.needMSESeek(seekTime)) {
			props.seekTo(seekTime);
		} else {
			props.setPlayerState("waitingForStart", true);
			props.videoElement.currentTime = seekTime;
		}
	}

	function seekToChapter(start: number) {
		const duration = props.playerState.currentTrack?.metadata.duration;
		if (!duration || !Number.isFinite(start)) return;
		seekTo(Math.max(0, Math.min(1, start / duration)));
	}

	//percentage position of a chapter marker; bad metadata can carry chapters beyond the reported
	//duration, so clamp instead of letting the marker overflow the progress bar
	function chapterMarkerPosition(start: number): number {
		const duration = props.playerState.currentTrack?.metadata.duration;
		if (!duration || !Number.isFinite(start)) return 0;
		return Math.max(0, Math.min(100, (start / duration) * 100));
	}

	//how far along the current track is, in percent
	const playedPercent = () => {
		const track = props.playerState.currentTrack;
		if (!track) return 0;
		return Math.min(100, (props.playerState.currentTime / (track.metadata.duration || Number.POSITIVE_INFINITY)) * 100);
	};
	const [isDragging, setIsDragging] = createSignal(false);
	const [dragPos, setDragPos] = createSignal(0);
	//the handle follows playback except while it is being dragged, when it follows the pointer instead
	createEffect(() => {
		if (isDragging()) return;
		setDragPos(playedPercent());
	});
	let progressContainerRef!: HTMLDivElement;
	let handleRef!: HTMLDivElement;

	//pointer instead drag events needed, because for some reason e.clientX is always 0 on firefox during the drag
	function handlePointerDown(e: PointerEvent) {
		if (e.button !== 0) return;
		e.preventDefault();
		handleRef.setPointerCapture(e.pointerId); //needed for mobile drag to work
		setIsDragging(true);
		handlePointerMove(e);
		window.addEventListener("pointermove", handlePointerMove);
		window.addEventListener("pointerup", handlePointerUp);
		window.addEventListener("pointercancel", handlePointerUp); //just for safety
	}

	function handlePointerMove(e: PointerEvent) {
		if (!isDragging() || !props.playerState.currentTrack) return;
		e.preventDefault();
		const rect = progressContainerRef.getBoundingClientRect();
		const pos = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
		setDragPos(pos * 100);
	}

	function handlePointerUp(e: PointerEvent) {
		if (!isDragging() || !props.playerState.currentTrack) return;
		setIsDragging(false);
		if (e.type !== "pointercancel") {
			const rect = progressContainerRef.getBoundingClientRect();
			seekTo(Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)));
		}
		window.removeEventListener("pointermove", handlePointerMove);
		window.removeEventListener("pointerup", handlePointerUp);
		window.removeEventListener("pointercancel", handlePointerUp);
		handleRef.releasePointerCapture(e.pointerId);
	}

	const [showPlayerControls, setShowPlayerControls] = persistedToggle(LocalStorageValues.playerControls, true);

	let metadataDialogRef!: HTMLDialogElement;

	function handleClose() {
		metadataDialogRef.close();
	}

	//every row of the metadata dialog, in display order. a falsy value drops its row
	function metadataEntries(): [label: string, value: unknown, suffix?: string][] {
		const track = props.playerState.currentTrack;
		if (!track) return [];
		const metadata = track.metadata;
		const perThousand = (value: number | undefined, divisor: number) => (value ? value / divisor : undefined);
		return [
			["Path", track.path],
			["Title", metadata.title],
			["Track number", metadata.trackNumber],
			["Album", metadata.album],
			["Artist", metadata.artist],
			["Genre", metadata.genre?.join(", ")],
			["Duration", metadata.duration.toFixed(1), " seconds"],
			["Container format", metadata.container],
			["Audio codec", metadata.audioCodec],
			["Audio bitrate", perThousand(metadata.audioBitrate, 1000), " kbps"],
			["Video codec", metadata.videoCodec],
			["Video bitrate", perThousand(metadata.videoBitrate, 1000 * 1000), " mbps"],
			[
				"Video dimensions",
				metadata.videoWidth && metadata.videoHeight ? `${metadata.videoWidth} × ${metadata.videoHeight}` : undefined,
			],
			["Frame rate", metadata.frameRate, " fps"],
			["Interlaced", metadata.interlaced === undefined ? undefined : metadata.interlaced ? "yes" : "no"],
			["Subtitle tracks", props.videoExtras()?.subtitleTracks.length || undefined],
			["Chapters", props.videoExtras()?.chapters.length || undefined],
		];
	}

	return (
		<>
			<dialog ref={metadataDialogRef} onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}>
				<div>
					<div style={{ display: "flex" }}>
						<div class="title">Metadata</div>
						<div class="spacer" />
						<button title="Close dialog" onClick={handleClose}>
							<ClearSVG />
						</button>
					</div>
					<hr />
					<div class="metadata-list">
						<For each={metadataEntries().filter(([, value]) => value)}>
							{([label, value, suffix]) => (
								<div>
									<strong>{label}</strong>: {value?.toString()}
									{suffix}
									<br />
								</div>
							)}
						</For>
					</div>
				</div>
			</dialog>
			<div class="player-controls">
				<div class="track-info-toggle-container">
					<button title="Toggle player controls" onclick={() => setShowPlayerControls(!showPlayerControls())}>
						{showPlayerControls() ? <DownSVG /> : <UpSVG />}
					</button>

					<div class="track-info">
						<Show when={props.playerState.currentTrack}>
							<button title="Show metadata" onClick={() => metadataDialogRef.showModal()}>
								<InfoSVG />
							</button>
						</Show>
						<span classList={{ "short-name": !showPlayerControls() }}>
							{props.playerState.currentTrack
								? formatFilename(props.playerState.currentTrack, props.options.controlsDisplay)
								: "No track selected"}
						</span>
						{props.playerState.waitingForStart ? (
							<div>
								<LoadingSpinner center={true} />
							</div>
						) : (
							""
						)}
					</div>
				</div>
				<div class="progress-container" onClick={progressClick} ref={progressContainerRef}>
					<div
						class="progress-bar"
						style={{
							cursor: controlsDisabled() ? "default" : undefined,
							height: `${props.options.progressBarHeight}px`,
						}}
					>
						<For each={props.isVideoTrack() ? props.videoExtras()?.chapters || [] : []}>
							{(chapter, index) => (
								<button
									class="chapter-marker"
									title={chapter.title || `Chapter ${index() + 1}`}
									aria-label={`Jump to ${chapter.title || `chapter ${index() + 1}`}`}
									style={{
										left: `${chapterMarkerPosition(chapter.start)}%`,
									}}
									onClick={(event) => {
										event.stopPropagation();
										seekToChapter(chapter.start);
									}}
								/>
							)}
						</For>
						<For each={props.playerState.buffered}>
							{(bufferRange) => {
								return (
									<div
										class="buffered-fill"
										style={{
											left: `${(bufferRange.start / (props.playerState.currentTrack?.metadata.duration as number)) * 100}%`,
											right: `${100 - (bufferRange.end / (props.playerState.currentTrack?.metadata.duration as number)) * 100}%`,
										}}
									/>
								);
							}}
						</For>
						<div class="progress-fill" style={{ width: `${playedPercent()}%` }} />
						<div
							class="progress-handle"
							style={{
								left: `${dragPos()}%`,
								height: `${props.options.progressBarHeight * 2}px`,
								width: `${props.options.progressBarHeight * 2}px`,
							}}
							onPointerDown={handlePointerDown}
							//pointerup already seeked, the container's click handler would seek a second time
							onClick={(e) => e.stopPropagation()}
							ref={handleRef}
						/>
					</div>
				</div>
				<Show when={showPlayerControls()}>
					<div class="time-container">
						<span>{formatTime(props.playerState.currentTime)}</span>/
						<span>{formatTime(props.playerState.currentTrack?.metadata.duration || 0)}</span>
					</div>

					<div class="control-buttons">
						<button title="Previous track" disabled={controlsDisabled()} onClick={props.playPrevious}>
							<PreviousTrackSVG disabled={controlsDisabled} />
						</button>
						<button title="Toggle play/pause" disabled={controlsDisabled()} onClick={props.togglePlay}>
							{props.playerState.isPlaying ? (
								<PauseSVG disabled={controlsDisabled} />
							) : (
								<PlaySVG disabled={controlsDisabled} />
							)}
						</button>
						<button title="Next track" disabled={controlsDisabled()} onClick={props.playNext}>
							<NextTrackSVG disabled={controlsDisabled} />
						</button>
						<button title="Stop playback" disabled={controlsDisabled()} onClick={props.stopPlaying}>
							<SquareSVG disabled={controlsDisabled} />
						</button>

						<button title="Repeat Playlist" onClick={() => props.setRepeated(!props.isRepeated())}>
							<RepeatSVG disabled={() => !props.isRepeated()} />
						</button>

						<button title="Shuffle" onClick={() => props.setShuffled(!props.isShuffled())}>
							<ShuffleSVG disabled={() => !props.isShuffled()} />
						</button>

						<div class="volume-control" style={props.options.hideVolume ? { display: "none" } : {}}>
							<VolumeSVG />
							<input type="range" min="0" max="1" step="0.01" value={props.playerState.volume} onInput={setVolume} />
						</div>
						<div>
							<select
								value={props.playerState.rate}
								onchange={(e) => props.setPlayerState("rate", Number.parseFloat(e.target.value))}
							>
								<For each={PLAYBACK_RATES}>{(rate) => <option value={rate}>{rate}x</option>}</For>
							</select>
						</div>
						<Show when={props.isVideoTrack() && props.videoExtras()?.subtitleTracks.length}>
							<select
								title="Subtitle track"
								value={props.selectedSubtitle() === "off" ? "off" : props.selectedSubtitle().toString()}
								onchange={(e) => {
									const value = e.currentTarget.value;
									props.setSelectedSubtitle(value === "off" ? value : Number.parseInt(value, 10));
								}}
							>
								<option value="off">Subtitles: off</option>
								<For each={props.videoExtras()?.subtitleTracks || []}>
									{(track, index) => (
										<option value={track.streamIndex}>{track.title || track.language || `Track ${index() + 1}`}</option>
									)}
								</For>
							</select>
						</Show>

						<Show when={props.isVideoTrack() && props.videoExtras()?.chapters.length}>
							<select
								title="Jump to chapter"
								value=""
								onchange={(e) => {
									seekToChapter(Number.parseFloat(e.currentTarget.value));
									e.currentTarget.value = "";
								}}
							>
								<option value="">Chapters</option>
								<For each={props.videoExtras()?.chapters || []}>
									{(chapter, index) => (
										<option value={chapter.start}>{chapter.title || `Chapter ${index() + 1}`}</option>
									)}
								</For>
							</select>
						</Show>

						<Show when={props.isVideoTrack()}>
							<button
								title={props.videoTheater() ? "Close theater mode" : "Open theater mode"}
								aria-label={props.videoTheater() ? "Close theater mode" : "Open theater mode"}
								onClick={props.toggleVideoTheater}
							>
								<TheaterSVG />
							</button>
							<button
								title="Toggle video fullscreen"
								onClick={() => {
									props.videoElement.controls = true;
									void props.videoElement.requestFullscreen();
								}}
							>
								<FullscreenSVG />
							</button>
						</Show>
					</div>
				</Show>
			</div>
		</>
	);
}