import { useState } from "react";
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import * as stylex from "@stylexjs/stylex";
import { formatTime } from "@/lib/format";
import InlineError from "@/lib/InlineError";
import {
	blocklistCreateMutation,
	blocklistDeleteMutation,
	blocklistUpdateMutation,
	blocklistsQuery,
	blocklistsUpdateNowMutation,
} from "@/lib/queries";
import type { Blocklist, BlocklistInput } from "@/lib/types";
import BlocklistForm from "./BlocklistForm";
import { useRefreshStatus } from "./refreshStore";
import SourceStatusSection from "./SourceStatusSection";
import ConfirmDialog from "@/ui/ConfirmDialog";
import { styles as shared } from "@/ui/styles";
import { colors } from "@/ui/tokens.stylex";
import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";

const styles = stylex.create({
	header: {
		display: "flex",
		flexWrap: "wrap",
		alignItems: "center",
		justifyContent: "space-between",
		gap: "0.75rem",
	},
	heading: {
		fontSize: "1.5rem",
		lineHeight: "2rem",
		fontWeight: 600,
	},
	done: {
		marginTop: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.primaryOnSurface,
	},
	empty: {
		marginTop: "1rem",
		color: colors.textMuted,
	},
	note: {
		marginTop: "0.5rem",
		color: colors.textMuted,
	},
	table: {
		width: "100%",
		minWidth: "max-content",
		borderCollapse: "collapse",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
	name: {
		fontWeight: 500,
	},
	badge: {
		marginLeft: "0.5rem",
		borderRadius: "0.25rem",
		backgroundColor: colors.border,
		paddingInline: "0.375rem",
		paddingBlock: "0.125rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
		color: colors.text,
	},
	url: {
		display: "block",
		maxWidth: "18rem",
		overflow: "hidden",
		textOverflow: "ellipsis",
		whiteSpace: "nowrap",
	},
	actions: {
		display: "flex",
		gap: "0.75rem",
	},
	dimWhenDisabled: {
		opacity: { default: 1, ":disabled": 0.5 },
	},
});

export default function BlocklistsPage() {
	const queryClient = useQueryClient();
	const { data: blocklists } = useSuspenseQuery(blocklistsQuery());
	const [editing, setEditing] = useState<Blocklist | null>(null);
	const [pendingDelete, setPendingDelete] = useState<Blocklist | null>(null);

	const create = useMutation(blocklistCreateMutation(queryClient));
	const save = useMutation(blocklistUpdateMutation(queryClient));
	const toggle = useMutation(blocklistUpdateMutation(queryClient));
	const remove = useMutation(blocklistDeleteMutation(queryClient));
	const updateNow = useMutation(blocklistsUpdateNowMutation(queryClient));

	const sources = useRefreshStatus();
	const namesById = new Map(blocklists.map((b) => [b.id, b.name]));
	// The refresh below re-fetches the sources the config already declares, so
	// it stays live in file mode; every other control here writes config.
	const readOnly = useReadOnlyConfig();

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

	function toggleEnabled(b: Blocklist) {
		toggle.mutate({
			id: b.id,
			input: { url: b.url, name: b.name, enabled: !b.enabled, is_suggested: b.is_suggested },
		});
	}

	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 (
		<section>
			<div {...stylex.props(styles.header)}>
				<h1 {...stylex.props(styles.heading)}>Blocklists</h1>
				<button
					type="button"
					onClick={() => updateNow.mutate()}
					disabled={updateNow.isPending}
					{...stylex.props(shared.primaryButton, shared.focusRing)}
				>
					{updateNow.isPending ? "Updating…" : "Update now"}
				</button>
			</div>
			{updateNow.isSuccess && !updateNow.isPending && (
				<p {...stylex.props(styles.done)} role="status">
					Update completed; source status refreshed below.
				</p>
			)}
			<InlineError error={updateNow.error} />

			{blocklists.length === 0 ? (
				<p {...stylex.props(styles.empty)}>No blocklist sources yet. Add one below.</p>
			) : (
				<div {...stylex.props(shared.tableWrap)}>
					<table {...stylex.props(styles.table)}>
						<thead>
							<tr>
								<th {...stylex.props(shared.th)}>Name</th>
								<th {...stylex.props(shared.th)}>URL</th>
								<th {...stylex.props(shared.th)}>Enabled</th>
								<th {...stylex.props(shared.th)}>Domains</th>
								<th {...stylex.props(shared.th)}>Wildcards</th>
								<th {...stylex.props(shared.th)}>Exceptions</th>
								<th {...stylex.props(shared.th)}>Skipped regex</th>
								<th {...stylex.props(shared.th)}>Skipped unsupported</th>
								<th {...stylex.props(shared.th)}>Last updated</th>
								<th {...stylex.props(shared.th)}>
									<span {...stylex.props(shared.srOnly)}>Actions</span>
								</th>
							</tr>
						</thead>
						<tbody>
							{blocklists.map((b) => (
								<tr key={b.id}>
									<td {...stylex.props(shared.td)}>
										<span {...stylex.props(styles.name)}>{b.name}</span>
										{b.is_suggested && <span {...stylex.props(styles.badge)}>Suggested</span>}
									</td>
									<td {...stylex.props(shared.td)}>
										<span {...stylex.props(styles.url)} title={b.url}>
											{b.url}
										</span>
									</td>
									<td {...stylex.props(shared.td)}>
										<input
											type="checkbox"
											aria-label={`${b.name} enabled`}
											checked={b.enabled}
											disabled={toggle.isPending || readOnly}
											title={readOnly ? READ_ONLY_HINT : undefined}
											onChange={() => toggleEnabled(b)}
											{...stylex.props(shared.focusRing)}
										/>
									</td>
									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.domain_count}</td>
									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.wildcard_count}</td>
									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.exception_count}</td>
									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.skipped_regex_count}</td>
									<td {...stylex.props(shared.td, shared.tabularNums)}>
										{b.skipped_unsupported_count}
									</td>
									<td {...stylex.props(shared.td)}>
										{b.last_updated === null ? "never" : formatTime(b.last_updated)}
									</td>
									<td {...stylex.props(shared.td)}>
										<div {...stylex.props(styles.actions)}>
											<button
												type="button"
												onClick={() => setEditing(b)}
												disabled={readOnly}
												title={readOnly ? READ_ONLY_HINT : undefined}
												{...stylex.props(
													shared.linkButton,
													styles.dimWhenDisabled,
													shared.focusRing,
												)}
											>
												Edit
											</button>
											<button
												type="button"
												onClick={() => setPendingDelete(b)}
												disabled={remove.isPending || readOnly}
												title={readOnly ? READ_ONLY_HINT : undefined}
												{...stylex.props(shared.dangerLinkButton, shared.focusRing)}
											>
												Delete
											</button>
										</div>
									</td>
								</tr>
							))}
						</tbody>
					</table>
					<p {...stylex.props(styles.note)}>
						Both “Skipped” columns count lines nxdns read and did not take. Skipped regex lines are patterns
						nxdns accepts only from you — adopt one you trust as a regex rule. Skipped unsupported lines are
						syntax nxdns cannot translate into a DNS decision: cosmetic element hiding, browser-only
						modifiers. A skipped unsupported count that dwarfs the domain count usually means the list is
						written for a browser extension, and its DNS or hosts variant will block more here.
					</p>
				</div>
			)}
			<InlineError error={tableError} />

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

			<SourceStatusSection sources={sources} namesById={namesById} />

			<ConfirmDialog
				isOpen={pendingDelete !== null}
				title="Delete blocklist"
				message={
					pendingDelete === null
						? ""
						: `Delete blocklist "${pendingDelete.name}"? Its domains stop being blocked.`
				}
				confirmLabel="Delete"
				onConfirm={confirmDelete}
				onCancel={() => setPendingDelete(null)}
			/>
		</section>
	);
}