import { useQuery } from '@tanstack/react-query';
import { Skeleton } from '#/components/atoms/skeleton.jsx';
import { checkLogUrl, readLog } from '#/lib/checks.js';

/**
 * A run's combined output. The blob is on the runner's PDS and is capped at a
 * megabyte by the runner, so it is fetched whole and shown in a scrolling box
 * rather than paged.
 *
 * The fetch starts only when the caller mounts this, which is what keeps a
 * page of runs from pulling every log at once.
 */
export function CheckLog({ runner, check }) {
  const cid = check.logs?.ref?.$link;
  const { data, error, isPending } = useQuery({
    queryKey: ['check-log', runner?.did, cid],
    queryFn: () => readLog(runner, check),
    enabled: Boolean(cid),
    staleTime: Number.POSITIVE_INFINITY,
  });

  if (!cid) {
    return (
      <p className="px-(--gutter) py-3 text-[12.5px] text-faint">
        This run published no log.
      </p>
    );
  }
  if (isPending) return <Skeleton className="mx-4 my-3 h-24" />;
  if (error) {
    return (
      <p className="px-(--gutter) py-3 text-[12.5px] text-destructive">
        {error.message}
      </p>
    );
  }

  return (
    <>
      <pre className="overflow-auto px-(--gutter) py-3 font-mono text-[12px] leading-relaxed">
        {data || 'The log is empty.'}
      </pre>
      <div className="border-border border-t px-(--gutter) py-2 text-[12px]">
        <a
          href={checkLogUrl(runner, check)}
          target="_blank"
          rel="noopener noreferrer"
          className="text-faint hover:text-muted-foreground"
        >
          Raw log
        </a>
      </div>
    </>
  );
}