import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import * as stylex from "@stylexjs/stylex";
import InlineError from "@/lib/InlineError";
import { upstreamCreateMutation, upstreamDeleteMutation, upstreamUpdateMutation, upstreamsQuery } from "@/lib/queries";
import type { Upstream, UpstreamInput } from "@/lib/types";
import ConfirmDialog from "@/ui/ConfirmDialog";
import FactLine from "@/ui/FactLine";
import { styles as shared } from "@/ui/styles";
import { colors } from "@/ui/tokens.stylex";
import Switch from "@/ui/Switch";
import AuthorityGate from "./AuthorityGate";
import FileModeNote from "./FileModeNote";
import QueryPanel from "./QueryPanel";
import UpstreamForm from "./UpstreamForm";
import { styles as config } from "./styles";

const INTRO = "The pool is rebuilt as you save, so an edit here applies to the next query.";

/**
 * Narrower than the four columns side by side: below it the table keeps URL,
 * Enabled and the actions, and the URL cell carries the rest.
 */
const COMPACT = "@container (max-width: 42rem)";

const styles = stylex.create({
	/** Cut to one line beside the other columns; whole, wrapping, where it is the row's only text column. */
	url: {
		display: "block",
		maxWidth: "18rem",
		overflow: "hidden",
		textOverflow: "ellipsis",
		whiteSpace: { default: "nowrap", [COMPACT]: "normal" },
		overflowWrap: "anywhere",
		fontWeight: 500,
	},
	unbroken: {
		overflowWrap: "anywhere",
	},
	wide: {
		display: { default: null, [COMPACT]: "none" },
	},
	compact: {
		display: { default: "none", [COMPACT]: "block" },
		marginTop: "0.125rem",
		color: colors.textMuted,
		overflowWrap: "anywhere",
	},
	/** Stacked in the narrow form, which gives the first cell the width; the row is several lines tall there already. */
	actions: {
		display: "flex",
		flexDirection: { default: null, [COMPACT]: "column" },
		alignItems: { default: null, [COMPACT]: "flex-start" },
		gap: { default: "0.75rem", [COMPACT]: "0.5rem" },
	},
	dimWhenDisabled: {
		opacity: { default: 1, ":disabled": 0.5 },
	},
	absent: {
		color: colors.textMuted,
	},
});

/** The hidden columns' facts for the compact URL cell; an empty TLS name has nothing to say there. */
function UpstreamFacts({ upstream }: { upstream: Upstream }) {
	const facts = [`Priority ${upstream.priority}`];
	if (upstream.tls_name !== "") facts.push(`TLS name ${upstream.tls_name}`);
	return (
		<span {...stylex.props(styles.compact, shared.tabularNums)}>
			<FactLine facts={facts} />
		</span>
	);
}

export default function UpstreamsTab() {
	const upstreams = useQuery(upstreamsQuery());
	return (
		<AuthorityGate>
			{(status) => (
				<div>
					<p {...stylex.props(config.intro)}>{INTRO}</p>
					{status.authority === "managed_file" && <FileModeNote path={status.path} />}
					<QueryPanel query={upstreams}>
						{(rows) =>
							status.authority === "managed_file" ? (
								<UpstreamsReadOnly upstreams={rows} />
							) : (
								<UpstreamsEditor upstreams={rows} />
							)
						}
					</QueryPanel>
				</div>
			)}
		</AuthorityGate>
	);
}

function UpstreamsReadOnly({ upstreams }: { upstreams: Upstream[] }) {
	return (
		<section {...stylex.props(config.panel)}>
			<h2 {...stylex.props(config.panelHeading)}>
				Upstream pool
				<code {...stylex.props(shared.mono, config.panelKey)}>upstreams</code>
			</h2>
			<p {...stylex.props(config.panelDescription)}>
				The resolvers nxdns forwards to when neither a local record nor the cache has the answer.
			</p>
			{upstreams.length === 0 ? (
				<p {...stylex.props(config.empty)}>The file declares no upstreams.</p>
			) : (
				<div tabIndex={0} {...stylex.props(shared.tableWrap, shared.focusRing)}>
					<table {...stylex.props(config.table)}>
						<thead>
							<tr>
								<th {...stylex.props(shared.th)}>URL</th>
								<th {...stylex.props(shared.th, styles.wide)}>Priority</th>
								<th {...stylex.props(shared.th)}>Enabled</th>
								<th {...stylex.props(shared.th, styles.wide)}>TLS name</th>
							</tr>
						</thead>
						<tbody>
							{upstreams.map((u) => (
								<tr key={u.id}>
									<td {...stylex.props(shared.td, styles.unbroken)}>
										<span {...stylex.props(shared.mono)}>{u.url}</span>
										<UpstreamFacts upstream={u} />
									</td>
									<td {...stylex.props(shared.td, shared.tabularNums, styles.wide)}>{u.priority}</td>
									<td {...stylex.props(shared.td)}>{String(u.enabled)}</td>
									<td {...stylex.props(shared.td, styles.unbroken, styles.wide)}>
										{u.tls_name === "" ? (
											<span {...stylex.props(styles.absent)}>empty</span>
										) : (
											u.tls_name
										)}
									</td>
								</tr>
							))}
						</tbody>
					</table>
				</div>
			)}
		</section>
	);
}

function UpstreamsEditor({ upstreams }: { upstreams: Upstream[] }) {
	const queryClient = useQueryClient();
	const [editing, setEditing] = useState<Upstream | null>(null);
	const [pendingDelete, setPendingDelete] = useState<Upstream | null>(null);

	const create = useMutation(upstreamCreateMutation(queryClient));
	const save = useMutation(upstreamUpdateMutation(queryClient));
	const toggle = useMutation(upstreamUpdateMutation(queryClient));
	const remove = useMutation(upstreamDeleteMutation(queryClient));

	async function submitForm(input: UpstreamInput) {
		if (editing === null) {
			await create.mutateAsync(input);
		} else {
			await save.mutateAsync({ id: editing.id, input });
			setEditing(null);
		}
	}

	function toggleEnabled(u: Upstream) {
		toggle.mutate({
			id: u.id,
			input: { url: u.url, priority: u.priority, enabled: !u.enabled, tls_name: u.tls_name },
		});
	}

	function confirmDelete() {
		if (pendingDelete === null) return;
		remove.mutate(pendingDelete.id);
		setPendingDelete(null);
	}

	const formError = editing === null ? create.error : save.error;
	const tableError = remove.error ?? toggle.error;

	return (
		<div>
			{upstreams.length === 0 ? (
				<p {...stylex.props(config.empty)}>No upstreams yet. Add one below.</p>
			) : (
				<div tabIndex={0} {...stylex.props(shared.tableWrap, shared.focusRing)}>
					<table {...stylex.props(config.table)}>
						<thead>
							<tr>
								<th {...stylex.props(shared.th)}>URL</th>
								<th {...stylex.props(shared.th, styles.wide)}>Priority</th>
								<th {...stylex.props(shared.th)}>Enabled</th>
								<th {...stylex.props(shared.th, styles.wide)}>TLS name</th>
								<th {...stylex.props(shared.th)}>
									<span {...stylex.props(shared.srOnly)}>Actions</span>
								</th>
							</tr>
						</thead>
						<tbody>
							{upstreams.map((u) => (
								<tr key={u.id}>
									<td {...stylex.props(shared.td)}>
										<span {...stylex.props(styles.url)} title={u.url}>
											{u.url}
										</span>
										<UpstreamFacts upstream={u} />
									</td>
									<td {...stylex.props(shared.td, shared.tabularNums, styles.wide)}>{u.priority}</td>
									<td {...stylex.props(shared.td)}>
										<Switch
											aria-label={`${u.url} enabled`}
											isSelected={u.enabled}
											isDisabled={toggle.isPending}
											onChange={() => toggleEnabled(u)}
										/>
									</td>
									<td {...stylex.props(shared.td, styles.unbroken, styles.wide)}>
										{u.tls_name === "" ? "—" : u.tls_name}
									</td>
									<td {...stylex.props(shared.td)}>
										<div {...stylex.props(styles.actions)}>
											<button
												type="button"
												onClick={() => setEditing(u)}
												{...stylex.props(shared.linkButton, shared.focusRing)}
											>
												Edit
											</button>
											<button
												type="button"
												onClick={() => setPendingDelete(u)}
												disabled={remove.isPending}
												{...stylex.props(
													shared.dangerLinkButton,
													styles.dimWhenDisabled,
													shared.focusRing,
												)}
											>
												Delete
											</button>
										</div>
									</td>
								</tr>
							))}
						</tbody>
					</table>
				</div>
			)}
			<InlineError error={tableError} />

			<UpstreamForm
				key={editing?.id ?? "add"}
				initial={editing ?? undefined}
				busy={editing === null ? create.isPending : save.isPending}
				error={formError}
				onSubmit={submitForm}
				onCancel={editing === null ? undefined : () => setEditing(null)}
			/>

			<ConfirmDialog
				isOpen={pendingDelete !== null}
				title="Delete upstream"
				message={
					pendingDelete === null
						? ""
						: `Delete upstream "${pendingDelete.url}"? Queries stop being forwarded to it.`
				}
				confirmLabel="Delete"
				onConfirm={confirmDelete}
				onCancel={() => setPendingDelete(null)}
			/>
		</div>
	);
}