import { useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { useParams } from "react-router";
import {
	type BrokerageOperation,
	type OperationCategory,
	useBrokerageOperations,
} from "@/entities/broker-operation";
import { apiQueryClient } from "@/shared/api";

type AccountOperationsPageViewModel =
	| { state: "loading" }
	| { state: "error"; retry: () => void }
	| {
			state: "loaded";
			draftFrom: string | null;
			draftTo: string | null;
			draftCategories: OperationCategory[];
			items: BrokerageOperation[];
			hasNext: boolean;
			hasPrevious: boolean;
			canApply: boolean;
			onDraftFromChange: (value: string | null) => void;
			onDraftToChange: (value: string | null) => void;
			onDraftCategoriesChange: (value: OperationCategory[]) => void;
			onApply: () => void;
			onReset: () => void;
			onNext: () => void;
			onPrevious: () => void;
	  };

const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
	const { accountId } = useParams();
	const queryClient = useQueryClient();
	const [appliedFrom, setAppliedFrom] = useState<string | null>(null);
	const [appliedTo, setAppliedTo] = useState<string | null>(null);
	const [appliedCategories, setAppliedCategories] = useState<
		OperationCategory[]
	>([]);
	const [draftFrom, setDraftFrom] = useState<string | null>(null);
	const [draftTo, setDraftTo] = useState<string | null>(null);
	const [draftCategories, setDraftCategories] = useState<OperationCategory[]>(
		[],
	);
	const [cursors, setCursors] = useState<string[]>([]);
	const cursor = cursors.at(-1);
	const operations = useBrokerageOperations(accountId, {
		from: dateStart(appliedFrom),
		to: dateEnd(appliedTo),
		...(appliedCategories.length ? { categories: appliedCategories } : {}),
		...(cursor ? { cursor } : {}),
		limit: 100,
	});
	const resetQueryKey = apiQueryClient.queryOptions(
		"get",
		"/api/v1/brokerage-accounts/{accountId}/operations",
		{ params: { path: { accountId: accountId ?? "" }, query: { limit: 100 } } },
	).queryKey;

	const resetCursors = () => setCursors([]);

	if (operations.isLoading) return { state: "loading" };
	if (operations.isError)
		return { state: "error", retry: () => operations.refetch() };
	if (!operations.data) return { state: "loading" };
	const nextCursor = operations.data.nextCursor;

	const isDirty =
		draftFrom !== appliedFrom ||
		draftTo !== appliedTo ||
		!sameCategories(draftCategories, appliedCategories);

	return {
		state: "loaded",
		draftFrom,
		draftTo,
		draftCategories,
		items: operations.data.items,
		hasNext: Boolean(operations.data.hasNext && nextCursor),
		hasPrevious: Boolean(cursors.length),
		canApply: isDirty,
		onDraftFromChange: setDraftFrom,
		onDraftToChange: setDraftTo,
		onDraftCategoriesChange: setDraftCategories,
		onApply: () => {
			setAppliedFrom(draftFrom);
			setAppliedTo(draftTo);
			setAppliedCategories(draftCategories);
			resetCursors();
		},
		onReset: () => {
			setDraftFrom(null);
			setDraftTo(null);
			setDraftCategories([]);
			setAppliedFrom(null);
			setAppliedTo(null);
			setAppliedCategories([]);
			resetCursors();
			void queryClient.invalidateQueries({ queryKey: resetQueryKey });
		},
		onNext: () => {
			if (nextCursor) setCursors((value) => [...value, nextCursor]);
		},
		onPrevious: () => setCursors((value) => value.slice(0, -1)),
	};
};

function dateStart(value: string | null) {
	return value ? `${value}T00:00:00.000Z` : undefined;
}

function dateEnd(value: string | null) {
	return value ? `${value}T23:59:59.999Z` : undefined;
}

function sameCategories(a: OperationCategory[], b: OperationCategory[]) {
	return a.length === b.length && a.every((value) => b.includes(value));
}

export { type AccountOperationsPageViewModel, useAccountOperationsPageVm };