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, toggleSource } from "./sourceSet";
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",
	},
	checkboxLabel: {
		display: "inline-flex",
		alignItems: "center",
		gap: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.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)}>
			<ul {...stylex.props(styles.list)}>
				{blocklists.map((blocklist) => (
					<li key={blocklist.id}>
						<label {...stylex.props(styles.checkboxLabel)}>
							<input
								type="checkbox"
								checked={current.includes(blocklist.id)}
								onChange={() => setSelected(toggleSource(current, blocklist.id))}
								{...stylex.props(shared.focusRing)}
							/>
							{blocklist.name}
						</label>
					</li>
				))}
			</ul>
			<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>
	);
}