import { useQuery } from '@tanstack/react-query';
import { Skeleton } from '#/components/atoms/skeleton.jsx';
import { CheckRun } from '#/components/molecules/check-run.jsx';
import { EmptyState } from '#/components/molecules/empty-state.jsx';
import { PageNotice } from '#/components/molecules/page-notice.jsx';
import { Screen } from '#/components/molecules/screen.jsx';
import { loadChecks } from '#/lib/checks.js';
import { repoRecord } from '#/lib/git.js';

/**
 * One run, addressed by the record key the runner wrote it under. The listing
 * this reads from is the one the checks page already loaded, so arriving from
 * that page costs no request; arriving from a shared link loads it.
 */
export function CheckPage({ repo, rkey, space }) {
  const record = repoRecord(repo, space);
  const { data } = useQuery({
    queryKey: ['checks', repo, space ?? ''],
    queryFn: () => loadChecks(repo, space),
  });

  if (!record) {
    return <PageNotice>No such repository.</PageNotice>;
  }

  const check = data?.runs.find((run) => run.rkey === rkey);

  if (!data) {
    return (
      <Screen>
        <div className="flex flex-col gap-3 px-(--gutter) pt-4 pb-5">
          <Skeleton className="h-6 w-1/3 max-w-xs" />
          <Skeleton className="h-10 w-2/3 max-w-lg" />
        </div>
        <Skeleton className="mx-(--gutter) h-64" />
      </Screen>
    );
  }
  if (!check) {
    return (
      <Screen>
        <EmptyState
          title="No such run"
          description="The runner published no check under this key, or it has fallen past the runs this page reads."
        />
      </Screen>
    );
  }
  return (
    <CheckRun
      runner={data.runner}
      check={check}
      commitHref={`/${encodeURIComponent(repo)}/commit/${check.sha}`}
      checksHref={`/${encodeURIComponent(repo)}/checks`}
    />
  );
}