import { useLayoutBreakpoints } from '#/lib/hooks/use-breakpoints';

import { setTrendingEnabled, useIsTrendingEnabled } from '#/state/preferences/trending';
import { type TrendingTopic, useGetTrendsQuery } from '#/state/queries/trending/useGetTrendsQuery';

import * as Prompt from '#/components/Prompt';
import { Button, ButtonIcon } from '#/components/web/Button';
import { InlineLinkText } from '#/components/web/Link';
import * as Skeleton from '#/components/web/Skeleton';

import XIcon from '#/icons/central/CrossLarge_round_outlined_radius1_stroke2.svg';
import TrendingIcon from '#/icons/central/Trending3_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

import * as css from './TrendingInterstitial.css';

const SKELETON_WIDTHS = [80, 50, 120, 30, 180];

const TRENDING_LIMIT = 14;

export function useShowTrendingInterstitial({ enabled }: { enabled: boolean }): boolean {
	const trendingEnabled = useIsTrendingEnabled();
	const { rightNavVisible } = useLayoutBreakpoints();

	const eligible = enabled && trendingEnabled && !rightNavVisible;

	const {
		data: trending,
		error,
		isPending,
	} = useGetTrendsQuery({ enabled: eligible, limit: TRENDING_LIMIT, refetchOnWindowFocus: true });
	const noTopics = !isPending && !error && !trending?.trends?.length;

	return eligible && !error && !noTopics;
}

export function TrendingInterstitial() {
	const trendingPrompt = Prompt.usePromptHandle();
	const { data: trending, isPending } = useGetTrendsQuery({
		limit: TRENDING_LIMIT,
		refetchOnWindowFocus: true,
	});

	return (
		<>
			<div className={css.root}>
				<TrendingIcon className={css.icon} />
				{isPending
					? SKELETON_WIDTHS.map((width, i) => (
							// oxlint-disable-next-line react/no-array-index-key -- static skeleton
							<div key={i} className={css.topic}>
								<Skeleton.Text size="sm" width={width} />
							</div>
						))
					: trending?.trends.map((topic) => <TopicLink key={topic.link} topic={topic} />)}
				{!isPending && (
					<Button
						variant="ghost"
						size="tiny"
						color="secondary"
						shape="round"
						label={m['components.trendingTopics.a11y.hide']()}
						onClick={() => trendingPrompt.open(null)}
						className={css.hideButton}
					>
						<ButtonIcon icon={XIcon} size="xs" />
					</Button>
				)}
			</div>
			<Prompt.Basic
				handle={trendingPrompt}
				title={m['components.trendingTopics.hide.title']()}
				description={m['components.trendingTopics.hide.message']()}
				confirmButtonCta={m['common.action.hide']()}
				onConfirm={() => setTrendingEnabled(false)}
			/>
		</>
	);
}

function TopicLink({ topic }: { topic: TrendingTopic }) {
	return (
		<InlineLinkText
			to={topic.target}
			label={topic.label}
			size="sm"
			weight="semiBold"
			color="textContrastMedium"
			className={css.topic}
		>
			{topic.displayName}
		</InlineLinkText>
	);
}