import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import * as stylex from "@stylexjs/stylex";
import { groupSourcesPutMutation, groupSourcesQuery } from "@/lib/queries";
import type { Blocklist } from "@/lib/types";
import { sameSet } from "./sourceSet";
import Checkbox, { CheckboxGroup } from "@/ui/Checkbox";
import InlineError from "@/lib/InlineError";
import { styles as shared } from "@/ui/styles";
import { colors } from "@/ui/tokens.stylex";

interface Props {
	groupId: number;
	blocklists: Blocklist[];
}

const styles = stylex.create({
	note: {
		marginTop: "0.75rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textMuted,
	},
	root: {
		marginTop: "0.75rem",
	},
	list: {
		display: "flex",
		flexDirection: "column",
		gap: "0.25rem",
	},
	buttonRow: {
		marginTop: "0.75rem",
		display: "flex",
		gap: "0.5rem",
	},
});

export default function GroupSourcesEditor({ groupId, blocklists }: Props) {
	const queryClient = useQueryClient();
	const sources = useQuery(groupSourcesQuery(groupId));
	const mutation = useMutation(groupSourcesPutMutation(queryClient));
	const [selected, setSelected] = useState<number[] | null>(null);

	if (sources.isPending) {
		return (
			<p role="status" {...stylex.props(styles.note)}>
				Loading sources…
			</p>
		);
	}
	if (sources.isError) return <InlineError error={sources.error} />;

	if (blocklists.length === 0) {
		return <p {...stylex.props(styles.note)}>No blocklist sources exist yet — add them on the Sources tab.</p>;
	}

	const current = selected ?? sources.data;
	const dirty = !sameSet(current, sources.data);

	return (
		<div {...stylex.props(styles.root)}>
			{/* The section's own "Assigned sources" heading is the visible label; a
			    Label here would put the same words on screen twice. Ids cross the
			    React Aria boundary as strings, the same convention as Select. */}
			<CheckboxGroup
				aria-label="Assigned sources"
				value={current.map(String)}
				onChange={(values) => setSelected(values.map(Number).sort((a, b) => a - b))}
			>
				<ul {...stylex.props(styles.list)}>
					{blocklists.map((blocklist) => (
						<li key={blocklist.id}>
							<Checkbox value={String(blocklist.id)}>{blocklist.name}</Checkbox>
						</li>
					))}
				</ul>
			</CheckboxGroup>
			<InlineError error={mutation.error} />
			<div {...stylex.props(styles.buttonRow)}>
				<button
					type="button"
					disabled={!dirty || mutation.isPending}
					onClick={() =>
						mutation.mutate({ id: groupId, sourceIds: current }, { onSuccess: () => setSelected(null) })
					}
					{...stylex.props(shared.primaryButton, shared.focusRing)}
				>
					Save sources
				</button>
				{dirty && (
					<button
						type="button"
						onClick={() => setSelected(null)}
						{...stylex.props(shared.button, shared.focusRing)}
					>
						Discard
					</button>
				)}
			</div>
		</div>
	);
}
