import { ArrowLeft } from "@phosphor-icons/react/dist/icons/ArrowLeft";
import { useQuery } from "@tanstack/react-query";
import { Link, useParams, useSearch } from "@tanstack/react-router";
import * as stylex from "@stylexjs/stylex";
import InlineError from "@/lib/InlineError";
import { queryDetailQuery } from "@/lib/queries";
import type { QueryDetail } from "@/lib/types";
import { styles as shared } from "@/ui/styles";
import { colors } from "@/ui/tokens.stylex";
import ProvenanceDetail from "./ProvenanceDetail";
import RelatedActions from "./RelatedActions";
import type { ActivitySearch } from "./search";

const styles = stylex.create({
	back: {
		display: "inline-flex",
		alignItems: "center",
		gap: "0.25rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.primaryOnSurface,
		textDecorationLine: "none",
	},
	backIcon: {
		display: "inline-flex",
	},
	/** About the height of the filled detail surface, so it does not jump in. */
	loading: {
		marginTop: "1rem",
		minHeight: "20rem",
		color: colors.textMuted,
	},
});

/**
 * The way back to the investigation, not to a bare list. The originating
 * Activity search rides in this route's own search, so the reader returns to
 * the mode, the filters and the absolute window they left — a plain `/activity`
 * would silently widen the range they had chosen.
 */
function BackLink({ origin }: { origin: ActivitySearch }) {
	return (
		<Link to="/activity" search={origin} {...stylex.props(styles.back, shared.focusRing)}>
			<span aria-hidden="true" {...stylex.props(styles.backIcon)}>
				<ArrowLeft size={12} />
			</span>
			Activity
		</Link>
	);
}

export default function ActivityDetailPage() {
	const { id } = useParams({ from: "/shell/activity/queries/$id" });
	const origin = useSearch({ from: "/shell/activity/queries/$id" });
	const rowId = Number(id);
	const { data, error, isPending, refetch } = useQuery(queryDetailQuery(rowId));

	if (isPending) {
		return (
			<p {...stylex.props(styles.loading, shared.pulse)} role="status">
				Loading query…
			</p>
		);
	}
	if (data === undefined) {
		return (
			<section>
				<BackLink origin={origin} />
				<InlineError error={error} onRetry={() => void refetch()} />
			</section>
		);
	}

	const detail: QueryDetail = data;
	const { domain, client, time } = detail.request;

	return (
		<section>
			<BackLink origin={origin} />
			<ProvenanceDetail
				provenance={detail}
				persistedId={detail.id}
				relatedActions={<RelatedActions domain={domain} client={client} ts={time} origin={origin} />}
			/>
		</section>
	);
}