import './StepsFooter.styles.scss';

import { Button, Skeleton } from 'antd';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import { Cone, Play, RefreshCcw } from 'lucide-react';
import { useFunnelContext } from 'pages/TracesFunnels/FunnelContext';
import { useEffect, useMemo } from 'react';
import { useIsFetching, useQueryClient } from 'react-query';

const useFunnelResultsLoading = (): boolean => {
	const { funnelId } = useFunnelContext();

	const isFetchingFunnelOverview = useIsFetching({
		queryKey: [REACT_QUERY_KEY.GET_FUNNEL_OVERVIEW, funnelId],
	});

	const isFetchingStepsGraphData = useIsFetching({
		queryKey: [REACT_QUERY_KEY.GET_FUNNEL_STEPS_GRAPH_DATA, funnelId],
	});

	const isFetchingErrorTraces = useIsFetching({
		queryKey: [REACT_QUERY_KEY.GET_FUNNEL_ERROR_TRACES, funnelId],
	});

	const isFetchingSlowTraces = useIsFetching({
		queryKey: [REACT_QUERY_KEY.GET_FUNNEL_SLOW_TRACES, funnelId],
	});

	return useMemo(() => {
		if (!funnelId) {
			return false;
		}
		return (
			!!isFetchingFunnelOverview ||
			!!isFetchingStepsGraphData ||
			!!isFetchingErrorTraces ||
			!!isFetchingSlowTraces
		);
	}, [
		funnelId,
		isFetchingFunnelOverview,
		isFetchingStepsGraphData,
		isFetchingErrorTraces,
		isFetchingSlowTraces,
	]);
};

interface StepsFooterProps {
	stepsCount: number;
}

function ValidTracesCount(): JSX.Element {
	const {
		hasAllEmptyStepFields,
		isValidateStepsLoading,
		hasIncompleteStepFields,
		validTracesCount,
		funnelId,
		selectedTime,
	} = useFunnelContext();
	const queryClient = useQueryClient();
	const validationQueryKey = useMemo(
		() => [REACT_QUERY_KEY.VALIDATE_FUNNEL_STEPS, funnelId, selectedTime],
		[funnelId, selectedTime],
	);
	const validationStatus = queryClient.getQueryData(validationQueryKey);

	useEffect(() => {
		// Show loading state immediately when fields become valid
		if (hasIncompleteStepFields && validationStatus !== 'pending') {
			queryClient.setQueryData(validationQueryKey, 'pending');
		}
	}, [
		hasIncompleteStepFields,
		queryClient,
		validationQueryKey,
		validationStatus,
	]);

	if (hasAllEmptyStepFields) {
		return (
			<span className="steps-footer__valid-traces">No service / span names</span>
		);
	}

	if (hasIncompleteStepFields) {
		return (
			<span className="steps-footer__valid-traces">
				Missing service / span names
			</span>
		);
	}

	if (isValidateStepsLoading || validationStatus === 'pending') {
		return <Skeleton.Button size="small" />;
	}

	if (validTracesCount === 0) {
		return (
			<span className="steps-footer__valid-traces steps-footer__valid-traces--none">
				No valid traces found
			</span>
		);
	}

	return <span className="steps-footer__valid-traces">Valid traces found</span>;
}

function StepsFooter({ stepsCount }: StepsFooterProps): JSX.Element {
	const {
		validTracesCount,
		handleRunFunnel,
		hasFunnelBeenExecuted,
	} = useFunnelContext();

	const isFunnelResultsLoading = useFunnelResultsLoading();

	return (
		<div className="steps-footer">
			<div className="steps-footer__left">
				<Cone className="funnel-icon" size={14} />
				<span>{stepsCount} steps</span>
				<span>·</span>
				<ValidTracesCount />
			</div>
			<div className="steps-footer__right">
				{!hasFunnelBeenExecuted ? (
					<Button
						disabled={validTracesCount === 0}
						onClick={handleRunFunnel}
						type="primary"
						className="steps-footer__button steps-footer__button--run"
						icon={<Play size={16} />}
					>
						Run funnel
					</Button>
				) : (
					<Button
						type="text"
						className="steps-footer__button steps-footer__button--sync"
						icon={<RefreshCcw size={16} />}
						onClick={handleRunFunnel}
						loading={isFunnelResultsLoading}
						disabled={validTracesCount === 0}
					>
						Refresh
					</Button>
				)}
			</div>
		</div>
	);
}

export default StepsFooter;
