/**
 * EditorPane edits a workspace file with Monaco: dirty indicator, Save
 * button and Ctrl/Cmd+S, saving through the backend file API.
 *
 * @example
 * <EditorPane path="src/main.go" />
 */

import { lazy, Suspense, useCallback, useEffect, useState } from "react";
import { readFile, writeFile } from "../api";
import { languageForPath } from "../lang";

const MonacoViewer = lazy(() => import("./MonacoViewer"));

type SaveStatus = "idle" | "saving" | "saved";

export function EditorPane({ path }: { path: string | null }) {
	const [original, setOriginal] = useState<string | null>(null);
	const [text, setText] = useState("");
	const [error, setError] = useState<string | null>(null);
	const [status, setStatus] = useState<SaveStatus>("idle");

	useEffect(() => {
		if (!path) {
			return;
		}
		setOriginal(null);
		setError(null);
		setStatus("idle");
		readFile(path)
			.then((file) => {
				setOriginal(file.content);
				setText(file.content);
			})
			.catch((cause: Error) => setError(cause.message));
	}, [path]);

	const dirty = original !== null && text !== original;

	const save = useCallback(async () => {
		if (!path || original === null || text === original) {
			return;
		}
		setStatus("saving");
		setError(null);
		try {
			await writeFile(path, text);
			setOriginal(text);
			setStatus("saved");
		} catch (cause) {
			setError((cause as Error).message);
			setStatus("idle");
		}
	}, [path, text, original]);

	const placeholder = editorPlaceholder(path, original, error);
	if (placeholder) {
		return placeholder;
	}

	return (
		// The shortcut is handled on the wrapper so it works wherever the
		// focus sits inside the pane, Monaco included.
		<div
			className="editor"
			onKeyDown={(event) => {
				if ((event.ctrlKey || event.metaKey) && event.key === "s") {
					event.preventDefault();
					void save();
				}
			}}
		>
			<EditorHeader
				path={path as string}
				dirty={dirty}
				status={status}
				error={error}
				onSave={save}
			/>
			<div className="editor-body">
				<Suspense fallback={<p className="pane-empty">loading editor…</p>}>
					<MonacoViewer
						content={text}
						language={languageForPath(path as string)}
						onChange={(value) => setText(value ?? "")}
					/>
				</Suspense>
			</div>
		</div>
	);
}

/** editorPlaceholder covers the no-file / error / loading states. */
function editorPlaceholder(
	path: string | null,
	original: string | null,
	error: string | null,
) {
	if (!path) {
		return (
			<p className="pane-empty">Double-click a file in the tree to edit it.</p>
		);
	}
	if (error && original === null) {
		return <p className="pane-error">{error}</p>;
	}
	if (original === null) {
		return <p className="pane-empty">loading…</p>;
	}
	return null;
}

/** EditorHeader shows the file name, dirty marker, save state and button. */
function EditorHeader({
	path,
	dirty,
	status,
	error,
	onSave,
}: {
	path: string;
	dirty: boolean;
	status: SaveStatus;
	error: string | null;
	onSave: () => Promise<void>;
}) {
	return (
		<div className="pane-header">
			<span className="pane-path" title={path}>
				{path.split("/").pop()}
				{dirty ? " ●" : ""}
			</span>
			{error && <span className="pane-error-inline">{error}</span>}
			{status === "saved" && !dirty && (
				<span className="pane-saved">saved</span>
			)}
			<button
				type="button"
				className="pane-action"
				disabled={!dirty || status === "saving"}
				onClick={() => void onSave()}
			>
				{status === "saving" ? "Saving…" : "Save"}
			</button>
		</div>
	);
}