1"use client";
2
3import { useState } from "react";
4import { Button, CopyButton, PageTitle, StatusPill, Tooltip } from "@versable-git/ui";
5
6// Designed fresh (ruling D6): the job name carries a quieter mono suffix for
7// the run identity, a copy affordance for the id, and a dot-joined meta line.
8// The kit only styles string titles, so the JSX title self-styles its h1.
9// One state axis: click a stage button and the pill, its pulse, and the
10// meta line update together, the way a real run actually moves.
11type Stage = "queued" | "running" | "done" | "failed";
12
13const STAGES: { key: Stage; label: string }[] = [
14  { key: "queued", label: "Queued" },
15  { key: "running", label: "Running" },
16  { key: "done", label: "Done" },
17  { key: "failed", label: "Failed" },
18];
19
20const STAGE_META: Record<Stage, { kind: "neutral" | "info" | "ok" | "err"; pillLabel: string; meta: string }> = {
21  queued: { kind: "neutral", pillLabel: "queued", meta: "3 files · Scrape · waiting for run 3 to finish" },
22  running: { kind: "info", pillLabel: "running", meta: "3 files · Scrape · AC Delco Q3 taxonomy" },
23  done: { kind: "ok", pillLabel: "done", meta: "3 files · Scrape · finished in 4m 12s" },
24  failed: { kind: "err", pillLabel: "failed", meta: "3 files · Scrape · stopped on file 2 of 3" },
25};
26
27export function JobTitle() {
28  const [stage, setStage] = useState<Stage>("running");
29  const meta = STAGE_META[stage];
30
31  return (
32    <div className="flex flex-col gap-3">
33      <div className="flex gap-2">
34        {STAGES.map((s) => (
35          <Button
36            key={s.key}
37            size="xs"
38            variant={s.key === stage ? "solid" : "outline"}
39            content={s.label}
40            onClick={() => setStage(s.key)}
41          />
42        ))}
43      </div>
44      <PageTitle
45        Icon="Refresh"
46        title={
47          <span className="flex min-w-0 items-baseline gap-2">
48            <h1 className="truncate text-2xl font-bold">Brake pads Q3</h1>
49            <Tooltip content="The 4th run of this job">
50              <span className="text-base-content/50 shrink-0 font-mono text-lg font-medium">run 4</span>
51            </Tooltip>
52            <CopyButton value="job_h83k2m" size="xs" copiedLabel="Job id copied" />
53          </span>
54        }
55        subtitle={meta.meta}
56        titleExtra={
57          <StatusPill kind={meta.kind} size="sm" dot dotPulse={stage === "running"}>
58            {meta.pillLabel}
59          </StatusPill>
60        }
61      />
62    </div>
63  );
64}
65