import { useState, type FormEvent } from "react";
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import InlineError from "@/lib/InlineError";
import { settingsPutMutation, settingsQuery } from "@/lib/queries";
import { buildSettingsPatch } from "@/lib/settingsDiff";
import type { Settings, SettingsPatch } from "@/lib/types";
import { raiseRestartBanner } from "./restartBanner";
import { READ_ONLY_HINT, useReadOnlyConfig } from "./authority";
import { focusRing } from "@/ui/classes";

/** True when the patch touches anything besides the write-only `web.password` (ruling 11). */
export function patchRequiresRestart(patch: SettingsPatch): boolean {
	return Object.entries(patch).some(([section, fields]) =>
		Object.keys(fields ?? {}).some((key) => !(section === "web" && key === "password")),
	);
}

interface FieldDef<S extends keyof Settings> {
	key: keyof Settings[S] & string;
	kind: "number" | "text" | "boolean" | readonly string[];
}

interface SectionDef<S extends keyof Settings> {
	section: S;
	title: string;
	fields: readonly FieldDef<S>[];
}

/** Binds each section's field keys to that section's Settings type at definition. */
function defineSection<S extends keyof Settings>(def: SectionDef<S>): SectionDef<S> {
	return def;
}

/** The registry read back as a heterogeneous list, once the per-section binding has been proven. */
type AnyFieldDef = { [S in keyof Settings]: FieldDef<S> }[keyof Settings];
type AnySectionDef = { [S in keyof Settings]: SectionDef<S> }[keyof Settings];

/**
 * A section's values as a string-keyed view. The keys are proven against
 * `Settings[S]` where each section is defined; iterating the heterogeneous
 * registry loses that correlation, so consumption widens here in one place.
 */
function sectionValues(settings: Settings, section: keyof Settings): Record<string, unknown> {
	return settings[section] as Record<string, unknown>;
}

const TLS_FIELDS: readonly FieldDef<"doh_server" | "dot_server">[] = [
	{ key: "enabled", kind: "boolean" },
	{ key: "bind", kind: "text" },
	{ key: "port", kind: "number" },
	{ key: "cert_path", kind: "text" },
	{ key: "key_path", kind: "text" },
];

const SECTIONS: readonly AnySectionDef[] = [
	defineSection({
		section: "upstream",
		title: "Upstream",
		fields: [
			{ key: "attempt_timeout_ms", kind: "number" },
			{ key: "read_timeout_ms", kind: "number" },
			{ key: "total_timeout_ms", kind: "number" },
		],
	}),
	defineSection({
		section: "dns",
		title: "DNS",
		fields: [
			{ key: "bind_ipv4", kind: "text" },
			{ key: "bind_ipv6", kind: "text" },
			{ key: "port", kind: "number" },
			{ key: "rate_limit", kind: "number" },
			{ key: "rate_window_seconds", kind: "number" },
		],
	}),
	defineSection({
		section: "blocking",
		title: "Blocking",
		fields: [
			{ key: "response", kind: ["zero", "nxdomain"] },
			{ key: "ttl", kind: "number" },
		],
	}),
	defineSection({
		section: "cache",
		title: "Cache",
		fields: [
			{ key: "size", kind: "number" },
			{ key: "negative_ttl_max", kind: "number" },
		],
	}),
	defineSection({
		section: "web",
		title: "Web",
		fields: [
			{ key: "enabled", kind: "boolean" },
			{ key: "bind", kind: "text" },
			{ key: "port", kind: "number" },
			{ key: "session_ttl_hours", kind: "number" },
			{ key: "api_rate_limit_per_min", kind: "number" },
			{ key: "api_localhost_exempt", kind: "boolean" },
			{ key: "sse_max_connections_per_ip", kind: "number" },
			{ key: "trusted_proxies", kind: "text" },
		],
	}),
	defineSection({ section: "doh_server", title: "DoH Server", fields: TLS_FIELDS }),
	defineSection({ section: "dot_server", title: "DoT Server", fields: TLS_FIELDS }),
	defineSection({ section: "edns", title: "EDNS", fields: [{ key: "ecs_mode", kind: ["strip", "forward"] }] }),
	defineSection({
		section: "logging",
		title: "Logging",
		fields: [
			{ key: "level", kind: ["error", "warn", "info", "debug"] },
			{ key: "retention_days", kind: "number" },
			{ key: "query_log_buffer_max", kind: "number" },
			{ key: "hide_domains", kind: "boolean" },
			{ key: "hide_client_ips", kind: "boolean" },
			{ key: "output", kind: ["stderr", "syslog", "file"] },
			{ key: "file_path", kind: "text" },
			{ key: "max_size_mb", kind: "number" },
			{ key: "max_files", kind: "number" },
		],
	}),
	defineSection({
		section: "disk",
		title: "Disk",
		fields: [
			{ key: "min_free_mb", kind: "number" },
			{ key: "warn_free_mb", kind: "number" },
		],
	}),
	defineSection({
		section: "blocklist_update",
		title: "Blocklist Update",
		fields: [
			{ key: "enabled", kind: "boolean" },
			{ key: "interval_hours", kind: "number" },
		],
	}),
];

const LABEL_CLASS = "text-sm text-zinc-700 dark:text-zinc-300";
const fieldInputClass = `rounded border border-zinc-300 bg-white px-2 py-1 text-sm ${focusRing} dark:border-zinc-700 dark:bg-zinc-900`;

function FieldRow({
	section,
	def,
	value,
	onChange,
}: {
	section: string;
	def: AnyFieldDef;
	value: unknown;
	onChange: (value: unknown) => void;
}) {
	const id = `${section}.${def.key}`;
	if (def.kind === "boolean") {
		return (
			<div className="flex items-center gap-2">
				<input
					id={id}
					type="checkbox"
					checked={value as boolean}
					onChange={(e) => onChange(e.target.checked)}
					className={focusRing}
				/>
				<label htmlFor={id} className={LABEL_CLASS}>
					{def.key}
				</label>
			</div>
		);
	}
	if (Array.isArray(def.kind)) {
		return (
			<div className="flex flex-col gap-1">
				<label htmlFor={id} className={LABEL_CLASS}>
					{def.key}
				</label>
				<select
					id={id}
					value={value as string}
					onChange={(e) => onChange(e.target.value)}
					className={fieldInputClass}
				>
					{def.kind.map((option) => (
						<option key={option} value={option}>
							{option}
						</option>
					))}
				</select>
			</div>
		);
	}
	if (def.kind === "number") {
		const numeric = value as number;
		return (
			<div className="flex flex-col gap-1">
				<label htmlFor={id} className={LABEL_CLASS}>
					{def.key}
				</label>
				<input
					id={id}
					type="number"
					value={Number.isNaN(numeric) ? "" : numeric}
					onChange={(e) => onChange(e.target.valueAsNumber)}
					className={fieldInputClass}
				/>
			</div>
		);
	}
	return (
		<div className="flex flex-col gap-1">
			<label htmlFor={id} className={LABEL_CLASS}>
				{def.key}
			</label>
			<input
				id={id}
				type="text"
				value={value as string}
				onChange={(e) => onChange(e.target.value)}
				className={fieldInputClass}
			/>
		</div>
	);
}

export default function SettingsPage() {
	const { data } = useSuspenseQuery(settingsQuery());
	const queryClient = useQueryClient();
	const mutation = useMutation(settingsPutMutation(queryClient));
	// Frozen at mount and re-frozen on save: diffing against live query data would
	// turn a background refetch's out-of-band changes into phantom user edits.
	const [baseline, setBaseline] = useState<Settings>(() => structuredClone(data.settings));
	const [edited, setEdited] = useState<Settings>(() => structuredClone(data.settings));
	const [password, setPassword] = useState("");
	const [confirm, setConfirm] = useState("");

	const passwordsMismatch = (password !== "" || confirm !== "") && password !== confirm;
	const hasInvalidNumber = SECTIONS.some(({ section, fields }) => {
		const values = sectionValues(edited, section);
		return (fields as readonly AnyFieldDef[]).some(
			(field) => field.kind === "number" && Number.isNaN(values[field.key]),
		);
	});
	const patch = buildSettingsPatch(baseline, edited, password === "" ? undefined : password);
	const readOnly = useReadOnlyConfig();
	const saveDisabled = patch === null || passwordsMismatch || hasInvalidNumber || mutation.isPending || readOnly;

	function setField(section: keyof Settings, key: string, value: unknown): void {
		setEdited((prev) => ({
			...prev,
			[section]: { ...sectionValues(prev, section), [key]: value },
		}));
	}

	function handleSubmit(event: FormEvent): void {
		event.preventDefault();
		if (patch === null || passwordsMismatch || hasInvalidNumber) return;
		const restartNeeded = patchRequiresRestart(patch);
		mutation.mutate(patch, {
			onSuccess: (envelope) => {
				setBaseline(structuredClone(envelope.settings));
				setEdited(structuredClone(envelope.settings));
				setPassword("");
				setConfirm("");
				if (restartNeeded) raiseRestartBanner();
			},
		});
	}

	return (
		<section>
			<h1 className="text-2xl font-semibold">Settings</h1>
			<p className="mt-1 text-sm text-zinc-500">
				Changes are validated as a whole; every setting requires a restart to take effect.
			</p>
			<form onSubmit={handleSubmit} className="mt-4 max-w-3xl">
				<fieldset disabled={mutation.isPending || readOnly} className="space-y-6">
					{SECTIONS.map(({ section, title, fields }) => (
						<fieldset key={section} className="rounded border border-zinc-200 p-4 dark:border-zinc-800">
							<legend className="px-1 text-sm font-semibold">{title}</legend>
							<div className="grid gap-3 sm:grid-cols-2">
								{(fields as readonly AnyFieldDef[]).map((def) => (
									<FieldRow
										key={def.key}
										section={section}
										def={def}
										value={sectionValues(edited, section)[def.key]}
										onChange={(value) => setField(section, def.key, value)}
									/>
								))}
								{section === "web" && (
									<>
										<p className={LABEL_CLASS}>
											auth_enabled: {data.settings.web.auth_enabled ? "true" : "false"}{" "}
											<span className="text-zinc-500">(derived, read-only)</span>
										</p>
										<div className="flex flex-col gap-1">
											<label htmlFor="web.password" className={LABEL_CLASS}>
												password
											</label>
											<input
												id="web.password"
												type="password"
												autoComplete="new-password"
												value={password}
												onChange={(e) => setPassword(e.target.value)}
												className={fieldInputClass}
											/>
										</div>
										<div className="flex flex-col gap-1">
											<label htmlFor="web.password_confirm" className={LABEL_CLASS}>
												confirm password
											</label>
											<input
												id="web.password_confirm"
												type="password"
												autoComplete="new-password"
												value={confirm}
												onChange={(e) => setConfirm(e.target.value)}
												className={fieldInputClass}
											/>
										</div>
										{password !== "" && (
											<p className="text-sm text-amber-700 sm:col-span-2 dark:text-amber-400">
												Changing the password signs out every session; you will be asked to log
												in again.
											</p>
										)}
										{passwordsMismatch && (
											<p className="text-sm text-red-700 sm:col-span-2 dark:text-red-400">
												Passwords do not match.
											</p>
										)}
									</>
								)}
							</div>
						</fieldset>
					))}
					<div className="flex items-center gap-3">
						<button
							type="submit"
							disabled={saveDisabled}
							title={readOnly ? READ_ONLY_HINT : undefined}
							className={`rounded bg-blue-600 px-4 py-1.5 text-sm font-medium text-white ${focusRing} disabled:bg-zinc-300 disabled:text-zinc-500 dark:disabled:bg-zinc-800`}
						>
							{mutation.isPending ? "Saving…" : "Save"}
						</button>
						{mutation.isError && <InlineError error={mutation.error} />}
					</div>
				</fieldset>
			</form>
		</section>
	);
}