1"use client";
2
3import { Button, RenderIcon } from "@versable-git/ui";
4import { useState } from "react";
5
6// items-start, not items-center: labels wrap to different heights, and
7// centering puts each knob at a different Y, which zigzags the connectors.
8// Advance and Block drive the same stages live, so mid-run, complete, and
9// blocked are all reachable from one interactive stepper. Failed and skipped
10// only ever appear in the static state gallery below.
11type StageState = "done" | "active" | "blocked" | "failed" | "skipped" | "pending";
12
13const initialLabels = ["Ingestion", "Part types", "Scrape", "Attribute normalization", "Export"];
14
15const longChainLabels = [
16  "Ingestion",
17  "Validation",
18  "Part types",
19  "Scrape",
20  "Normalize",
21  "Attribute mapping",
22  "QA review",
23  "Export",
24];
25
26function initialStates(): StageState[] {
27  return ["done", "done", "active", "pending", "pending"];
28}
29
30function Knob({ state, index }: { state: StageState; index: number }) {
31  if (state === "done") {
32    return (
33      <span className="bg-success text-success-content ring-success/25 flex size-6 items-center justify-center rounded-full ring-2">
34        <RenderIcon Icon="Success" size={14} />
35      </span>
36    );
37  }
38  if (state === "blocked") {
39    return (
40      <span className="bg-warning text-warning-content flex size-6 items-center justify-center rounded-full">
41        <RenderIcon Icon="Warning" size={13} />
42      </span>
43    );
44  }
45  if (state === "failed") {
46    return (
47      <span className="bg-error text-error-content flex size-6 items-center justify-center rounded-full">
48        <RenderIcon Icon="Error" size={13} />
49      </span>
50    );
51  }
52  if (state === "skipped") {
53    return (
54      <span
55        aria-label="skipped"
56        className="border-base-content/30 flex size-6 items-center justify-center rounded-full border border-dashed"
57      >
58        <span aria-hidden className="bg-base-content/45 h-px w-2.5 rounded-full" />
59      </span>
60    );
61  }
62  if (state === "active") {
63    // The ring lives on its own layer behind the number so its opacity can
64    // pulse without dimming the digit sitting on top of it.
65    return (
66      <span className="relative inline-flex">
67        <span aria-hidden="true" className="ring-primary/50 motion-safe:animate-pulse absolute inset-0 rounded-full ring-4" />
68        <span className="bg-primary text-primary-content relative flex size-6 items-center justify-center rounded-full text-xs font-semibold">
69          {index + 1}
70        </span>
71      </span>
72    );
73  }
74  return (
75    <span className="bg-base-300 text-base-content/65 flex size-6 items-center justify-center rounded-full text-xs font-semibold">
76      {index + 1}
77    </span>
78  );
79}
80
81function connectorClass(prev: StageState) {
82  if (prev === "done") return "bg-success";
83  if (prev === "blocked") return "bg-warning";
84  if (prev === "failed") return "bg-error";
85  return "bg-base-300";
86}
87
88function labelClass(state: StageState) {
89  if (state === "active") return "text-base-content font-medium";
90  if (state === "blocked") return "text-warning font-medium";
91  if (state === "failed") return "text-error font-medium";
92  return "text-base-content/65";
93}
94
95function phaseLabel(states: StageState[]) {
96  if (states.some((s) => s === "blocked")) return "Blocked: the active stage needs attention, so the chain is paused.";
97  if (states.every((s) => s === "done")) return "Complete: every stage finished.";
98  return "Mid-run: earlier stages are done, one stage is active.";
99}
100
101/** The chain itself, stateless: the same markup renders live or as a snapshot. */
102export function Stepper({ states, labels = initialLabels }: { states: StageState[]; labels?: string[] }) {
103  return (
104    <ol className="flex items-start" aria-label="Pipeline progress">
105      {states.map((s, i) => (
106        <li key={labels[i] ?? i} className="relative flex flex-1 flex-col items-center gap-2">
107          {i > 0 ? (
108            <span aria-hidden="true" className={`absolute top-3 right-1/2 left-[-50%] h-0.5 ${connectorClass(states[i - 1]!)}`} />
109          ) : null}
110          <span className="relative z-10">
111            <Knob state={s} index={i} />
112          </span>
113          <span className={`px-1 text-center text-xs ${labelClass(s)}`}>{labels[i]}</span>
114        </li>
115      ))}
116    </ol>
117  );
118}
119
120/** The state gallery: every shape the chain can take, so variance is visible without clicking. */
121export function StepperStates() {
122  const rows: { label: string; states: StageState[]; labels?: string[] }[] = [
123    { label: "Not started", states: ["pending", "pending", "pending", "pending", "pending"] },
124    { label: "Mid-run", states: ["done", "done", "active", "pending", "pending"] },
125    { label: "Blocked at scrape", states: ["done", "done", "blocked", "pending", "pending"] },
126    { label: "Failed at scrape", states: ["done", "done", "failed", "pending", "pending"] },
127    { label: "Attribute normalization skipped", states: ["done", "done", "done", "skipped", "done"] },
128    { label: "Complete", states: ["done", "done", "done", "done", "done"] },
129    {
130      label: "Long chain (8 stages)",
131      states: ["done", "done", "done", "active", "pending", "pending", "pending", "pending"],
132      labels: longChainLabels,
133    },
134  ];
135  return (
136    <div className="flex flex-col gap-5">
137      {rows.map((r) => (
138        <div key={r.label} className="flex flex-col gap-2">
139          <span className="text-base-content/70 text-xs font-semibold tracking-wide uppercase">{r.label}</span>
140          <Stepper states={r.states} labels={r.labels} />
141        </div>
142      ))}
143    </div>
144  );
145}
146
147export function WorkflowStepper() {
148  const [states, setStates] = useState<StageState[]>(initialStates);
149  const activeIndex = states.findIndex((s) => s === "active");
150  const canAdvance = activeIndex !== -1;
151
152  function advance() {
153    setStates((prev) => {
154      const next = [...prev];
155      const i = next.findIndex((s) => s === "active");
156      if (i === -1) return prev;
157      next[i] = "done";
158      if (i + 1 < next.length) next[i + 1] = "active";
159      return next;
160    });
161  }
162
163  function block() {
164    setStates((prev) => {
165      const next = [...prev];
166      const i = next.findIndex((s) => s === "active");
167      if (i === -1) return prev;
168      next[i] = "blocked";
169      return next;
170    });
171  }
172
173  function reset() {
174    setStates(initialStates());
175  }
176
177  return (
178    <div className="flex flex-col gap-4">
179      <Stepper states={states} />
180      <p className="text-base-content/70 text-sm">{phaseLabel(states)}</p>
181      <div className="flex gap-2">
182        <Button size="sm" content="Advance" onClick={advance} disabled={!canAdvance} />
183        <Button size="sm" variant="outline" color="warning" content="Mark blocked" onClick={block} disabled={!canAdvance} />
184        <Button size="sm" variant="text" shade content="Reset" onClick={reset} />
185      </div>
186    </div>
187  );
188}
189