/*
 * SPDX-FileCopyrightText: syuilo and misskey-project
 * SPDX-License-Identifier: AGPL-3.0-only
 */

import { reactive, ref, shallowRef, triggerRef, watch } from 'vue';
import * as BABYLON from '@babylonjs/core';
import { cm } from '../utility.js';
import RoomWorker from './worker?worker';
import { GRAPHICS_QUALITY_MEDIUM, RoomEngine } from './engine.js';
import type { ShallowRef } from 'vue';
import type { RoomState } from './engine.js';
import type { ObjectDef, RoomStateObject } from './object.js';
import * as sound from '@/utility/sound.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';

export type RoomControllerOptions = {
	workerMode?: boolean;
	graphicsQuality: number;
	fps: number | null;
	resolution: number;
	useVirtualJoystick?: boolean;
};

// 抽象化レイヤー
export class RoomController {
	private worker: Worker | null = null;
	private engine: RoomEngine | null = null;
	private canvas: HTMLCanvasElement | null = null;
	private options: RoomControllerOptions;
	public isReady = ref(false);
	public isSitting = ref(false);
	public isEditMode = ref(false);
	public grabbing = ref<{ forInstall: boolean } | null>(null);
	public gridSnapping = ref({ enabled: true, scale: cm(4) });
	public selected = ref<{
		objectId: string;
		objectState: RoomStateObject;
		objectDef: ObjectDef;
	} | null>(null);
	public roomState: ShallowRef<RoomState>;
	public initializeProgress = ref(0);
	private pointerDownPosition: { x: number; y: number } | null = null;

	constructor(roomState: RoomState, options: RoomControllerOptions) {
		this.roomState = shallowRef(roomState);
		this.options = options;

		this.onCanvasKeydown = this.onCanvasKeydown.bind(this);
		this.onCanvasKeyup = this.onCanvasKeyup.bind(this);
		this.onCanvasWheel = this.onCanvasWheel.bind(this);
		this.onCanvasPointerdown = this.onCanvasPointerdown.bind(this);
		this.onCanvasPointerup = this.onCanvasPointerup.bind(this);
	}

	public async init(canvas: HTMLCanvasElement) {
		this.canvas = canvas;
		this.canvas.width = canvas.clientWidth;
		this.canvas.height = canvas.clientHeight;

		if (this.options.workerMode) {
			const offscreen = canvas.transferControlToOffscreen();
			this.worker = new RoomWorker();
			this.worker.postMessage({ type: 'init', canvas: offscreen, roomState: this.roomState.value, options: this.options }, [offscreen]);
			this.worker.onmessage = (event) => {
				switch (event.data?.type) {
					case 'progress': {
						this.initializeProgress.value = event.data.progress;
						break;
					}
					case 'inited': {
						this.initializeProgress.value = 1;
						this.isReady.value = true;
						break;
					}
					case 'changeEditMode': {
						this.isEditMode.value = event.data.isEditMode;
						break;
					}
					default: {
						console.warn('Unrecognized message from worker:', event.data?.type);
					}
				}
			};
		} else {
			const babylonEngine = new BABYLON.WebGPUEngine(canvas, { doNotHandleContextLost: true, powerPreference: 'high-performance', antialias: this.options.graphicsQuality >= GRAPHICS_QUALITY_MEDIUM });
			babylonEngine.compatibilityMode = false;
			babylonEngine.enableOfflineSupport = false;
			babylonEngine.onContextLostObservable.add(() => {
				os.alert({
					type: 'error',
					title: i18n.ts.somethingHappened,
					text: i18n.ts._room.crushed_description,
				});
			});
			await babylonEngine.initAsync();
			if (this.options.resolution === 2) babylonEngine.setHardwareScalingLevel(0.5);
			if (this.options.resolution === 0.5) babylonEngine.setHardwareScalingLevel(2);

			this.engine = new RoomEngine(this.roomState.value, {
				canvas,
				engine: babylonEngine,
				...this.options,
			});

			this.engine.on('loadingProgress', ({ progress }) => {
				this.initializeProgress.value = progress;
			});

			await this.engine.init();

			this.initializeProgress.value = 1;
			this.isReady.value = true;

			this.engine.on('changeGrabbingState', ({ grabbing }) => {
				this.grabbing.value = grabbing;
			});

			this.engine.on('changeEditMode', ({ isEditMode }) => {
				this.isEditMode.value = isEditMode;
			});

			this.engine.on('changeGridSnapping', ({ gridSnapping }) => {
				this.gridSnapping.value = gridSnapping;
			});

			this.engine.on('changeSelectedState', ({ selected }) => {
				this.selected.value = selected;
			});

			this.engine.on('changeRoomState', ({ roomState }) => {
				this.roomState.value = roomState;
				triggerRef(this.selected);
			});

			this.engine.on('playSfxUrl', ({ url, options }) => {
				sound.playUrl(url, options);
			});

			if (_DEV_) {
				(window as any).showBabylonInspector = () => {
					import('@babylonjs/inspector').then(({ ShowInspector }) => {
						ShowInspector(this.engine.scene);
					});
				};
			}
		}

		this.canvas.addEventListener('keydown', this.onCanvasKeydown);
		this.canvas.addEventListener('keyup', this.onCanvasKeyup);
		this.canvas.addEventListener('wheel', this.onCanvasWheel);
		this.canvas.addEventListener('pointerdown', this.onCanvasPointerdown);
		this.canvas.addEventListener('pointerup', this.onCanvasPointerup);
	}

	private onCanvasKeydown(ev: KeyboardEvent) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'dom:keydown', ev: { code: ev.code, shiftKey: ev.shiftKey } });
		} else if (this.engine != null) {
			this.engine.domEvents.emit('keydown', { code: ev.code, shiftKey: ev.shiftKey });
		}
		ev.preventDefault();
		ev.stopPropagation();
		return false;
	}

	private onCanvasKeyup(ev: KeyboardEvent) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'dom:keyup', ev: { code: ev.code, shiftKey: ev.shiftKey } });
		} else if (this.engine != null) {
			this.engine.domEvents.emit('keyup', { code: ev.code, shiftKey: ev.shiftKey });
		}
		ev.preventDefault();
		ev.stopPropagation();
		return false;
	}

	private onCanvasWheel(ev: WheelEvent) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'dom:wheel', ev: { deltaY: ev.deltaY } });
		} else if (this.engine != null) {
			this.engine.domEvents.emit('wheel', { deltaY: ev.deltaY });
		}
		ev.preventDefault();
		ev.stopPropagation();
		return false;
	}

	private onCanvasPointerdown(ev: PointerEvent) {
		this.pointerDownPosition = { x: ev.offsetX, y: ev.offsetY };
		this.canvas!.setPointerCapture(ev.pointerId);
	}

	private onCanvasPointerup(ev: PointerEvent) {
		if (this.pointerDownPosition != null) {
			const dx = Math.abs(ev.offsetX - this.pointerDownPosition.x);
			const dy = Math.abs(ev.offsetY - this.pointerDownPosition.y);
			if (dx < 10 && dy < 10) {
				const median = { x: (ev.offsetX + this.pointerDownPosition.x) / 2, y: (ev.offsetY + this.pointerDownPosition.y) / 2 };
				if (this.worker != null) {
					this.worker.postMessage({ type: 'dom:click', ev: { x: median.x, y: median.y } });
				} else if (this.engine != null) {
					this.engine.domEvents.emit('click', { x: median.x, y: median.y });
				}
			}
		}
		this.pointerDownPosition = null;
		this.canvas!.releasePointerCapture(ev.pointerId);
	}

	public async reset(roomState?: RoomState | null, options?: RoomControllerOptions | null, canvas?: HTMLCanvasElement | null) {
		this.destroy();
		if (roomState != null) this.roomState.value = roomState;
		if (options != null) this.options = options;
		this.isReady.value = false;
		this.isSitting.value = false;
		this.isEditMode.value = false;
		this.grabbing.value = null;
		this.selected.value = null;
		this.initializeProgress.value = 0;
		await this.init(canvas ?? this.canvas!);
	}

	public pauseRender() {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'pauseRender' });
		} else if (this.engine != null) {
			this.engine.pauseRender();
		}
	}

	public resumeRender() {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'resumeRender' });
		} else if (this.engine != null) {
			this.engine.resumeRender();
		}
	}

	public setCameraMoveVector(vec: { x: number; y: number }, dash: boolean) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'cameraMove', args: [vec, dash] });
		} else if (this.engine != null) {
			this.engine.cameraMove(vec, dash);
		}
	}

	public setCameraRotateVector(vec: { x: number; y: number }) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'cameraRotate', args: [vec] });
		} else if (this.engine != null) {
			this.engine.cameraRotate(vec);
		}
	}

	public setCameraJoystickMoveVector(vec: { x: number; y: number }) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'cameraJoystickMove', args: [vec] });
		} else if (this.engine != null) {
			this.engine.cameraJoystickMove(vec);
		}
	}

	public enterEditMode() {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'enterEditMode' });
		} else if (this.engine != null) {
			this.engine.enterEditMode();
		}
	}

	public exitEditMode() {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'exitEditMode' });
		} else if (this.engine != null) {
			this.engine.exitEditMode();
		}
	}

	public setGridSnapping(gridSnapping: { enabled: boolean; scale: number }) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'setGridSnapping', gridSnapping });
		} else if (this.engine != null) {
			this.engine.gridSnapping = gridSnapping;
		}
	}

	public updateObjectOption(objectId: string, key: string, value: any) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'updateObjectOption', args: [objectId, key, value] });
		} else if (this.engine != null) {
			this.engine.updateObjectOption(objectId, key, value);
		}
	}

	public changeHeyaType(type: RoomState['heya']['type']) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'changeHeyaType', args: [type] });
		} else if (this.engine != null) {
			this.engine.changeHeyaType(type);
		}
	}

	public updateHeyaOptions(options: RoomState['heya']['options']) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'updateHeyaOptions', args: [options] });
		} else if (this.engine != null) {
			this.engine.updateHeyaOptions(options);
		}
	}

	public updateRoomLightColor(color: [number, number, number]) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'updateRoomLightColor', args: [color] });
		} else if (this.engine != null) {
			this.engine.updateRoomLightColor(color);
		}
	}

	public beginSelectedInstalledObjectGrabbing() {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'beginSelectedInstalledObjectGrabbing' });
		} else if (this.engine != null) {
			this.engine.beginSelectedInstalledObjectGrabbing();
		}
	}

	public removeSelectedObject() {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'removeSelectedObject' });
		} else if (this.engine != null) {
			this.engine.removeSelectedObject();
		}
	}

	public addObject(type: string, options: any) {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'addObject', args: [type, options] });
		} else if (this.engine != null) {
			this.engine.addObject(type, options);
		}
	}

	public endGrabbing() {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'endGrabbing' });
		} else if (this.engine != null) {
			this.engine.endGrabbing();
		}
	}

	public cancelGrabbing() {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'endGrabbing', args: [true] });
		} else if (this.engine != null) {
			this.engine.endGrabbing(true);
		}
	}

	public toggleRoomLight() {
		if (this.worker != null) {
			this.worker.postMessage({ type: 'call', fn: 'toggleRoomLight' });
		} else if (this.engine != null) {
			this.engine.toggleRoomLight();
		}
	}

	public resize() {
		if (this.canvas == null) return;
		const width = this.canvas.clientWidth;
		const height = this.canvas.clientHeight;
		if (this.worker != null) {
			this.worker.postMessage({ type: 'resize', width, height });
		} else if (this.engine != null) {
			this.engine.resize();
		}
	}

	public destroy() {
		this.canvas?.removeEventListener('keydown', this.onCanvasKeydown);
		this.canvas?.removeEventListener('keyup', this.onCanvasKeyup);
		this.canvas?.removeEventListener('wheel', this.onCanvasWheel);
		this.canvas?.removeEventListener('pointerdown', this.onCanvasPointerdown);
		this.canvas?.removeEventListener('pointerup', this.onCanvasPointerup);

		if (this.worker != null) {
			this.worker.terminate();
			this.worker = null;
		}
		if (this.engine != null) {
			this.engine.destroy();
			this.engine = null;
		}
	}
}