import { Link } from '#/components/atoms/link.jsx';
import { CheckLog } from '#/components/molecules/check-log.jsx';
import { CheckSteps } from '#/components/molecules/check-steps.jsx';
import { PageHead } from '#/components/molecules/page-head.jsx';
import { checkLook, runDuration, workflowOf } from '#/lib/checks.js';
import { shortRef } from '#/lib/git.js';
import { COLUMN } from '#/lib/layout.js';
import { cn } from '#/lib/utils.js';

/** One field of the run's summary block. */
function Field({ label, children }) {
  return (
    <div className="min-w-0">
      <div className="text-[11.5px] text-faint uppercase tracking-wide">
        {label}
      </div>
      <div className="mt-1 truncate text-[13px] text-foreground">
        {children}
      </div>
    </div>
  );
}

/**
 * One run in full, which is what the run's own page shows: what the runner
 * ran it against, how each step ended, and the whole log. The log is on this
 * page because a reader who opened one run came for its output.
 */
export function CheckRun({ runner, check, commitHref, checksHref }) {
  const look = checkLook(check.status);
  const took = runDuration(check);
  const steps = Array.isArray(check.steps) ? check.steps : [];

  return (
    <div className="flex min-h-0 flex-1 flex-col">
      <PageHead
        back={checksHref ? { href: checksHref, label: 'Checks' } : undefined}
        title={
          <span className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
            <look.Icon className={cn('size-5 shrink-0', look.className)} />
            {workflowOf(check)}
            <span className={cn('font-normal text-[15px]', look.className)}>
              {look.label}
            </span>
          </span>
        }
      >
        {/* The readings stand together rather than spread across the
            window. A run has four of them, and four columns cut to the width
            of a page put a sha at one edge and a date at the other. */}
        <div className="mt-4 flex flex-wrap gap-x-10 gap-y-4">
          <Field label="Commit">
            {commitHref ? (
              <Link href={commitHref} className="font-mono">
                {check.sha.slice(0, 8)}
              </Link>
            ) : (
              <code className="font-mono">{check.sha.slice(0, 8)}</code>
            )}
          </Field>
          {check.ref && (
            <Field label="Ref">
              <span className="font-mono">{shortRef(check.ref)}</span>
            </Field>
          )}
          <Field label="Duration">
            <span className="tabular-nums">{took ?? 'running'}</span>
          </Field>
          <Field label="Started">
            {new Date(check.startedAt).toLocaleString()}
          </Field>
        </div>
      </PageHead>

      {steps.length > 0 && (
        <div className="shrink-0 border-border border-t py-1">
          <div className={COLUMN}>
            <CheckSteps steps={steps} />
          </div>
        </div>
      )}

      {/* The log takes what the window has left, so a long run reads without
          moving the readings above it. */}
      <div className="min-h-0 flex-1 overflow-y-auto border-border border-t">
        <div className={COLUMN}>
          <CheckLog runner={runner} check={check} />
        </div>
      </div>
    </div>
  );
}