1"use client";
2
3import { Button, Card, EmptyState, StatusDot, Tabs, Timestamp } from "@versable-git/ui";
4import { useState } from "react";
5
6// walmart's dashboard card (Home.tsx: StatusDot plus a sentence with the
7// entity bolded, capped at MAX_ACTIVITY_ROWS) and speedway's claimable rail
8// (ActivityRail.tsx: the same event shape, plus a connector line behind the
9// dots) read one underlying shape. Day grouping and the load-more button
10// below are this composite's own addition for a longer feed than either app
11// shows today; the Tabs knob switches the same card through its populated
12// and empty states.
13type Tone = "ok" | "warn" | "err" | "info" | "review" | "neutral";
14
15interface Event {
16  id: string;
17  ts: string;
18  tone: Tone;
19  before?: string;
20  entity: string;
21  after?: string;
22}
23
24const HOUR_MS = 3_600_000;
25const DAY_MS = 24 * HOUR_MS;
26const NOW = Date.now();
27
28const EVENTS: Event[] = [
29  { id: "1", ts: new Date(NOW - 1 * HOUR_MS).toISOString(), tone: "ok", entity: "fitment-update.csv", after: " finished its pipeline: 1,204 parts enriched" },
30  { id: "2", ts: new Date(NOW - 3 * HOUR_MS).toISOString(), tone: "neutral", before: "New job: ", entity: "brake-pads-q3" },
31  { id: "3", ts: new Date(NOW - 5 * HOUR_MS).toISOString(), tone: "err", entity: "wiper-blades-import", after: " hit an ingest error" },
32  { id: "4", ts: new Date(NOW - 22 * HOUR_MS).toISOString(), tone: "ok", entity: "spark-plugs-refresh", after: " published 88 listings" },
33  { id: "5", ts: new Date(NOW - DAY_MS - 2 * HOUR_MS).toISOString(), tone: "review", entity: "cabin-filters", after: " has 6 rows awaiting review" },
34  { id: "6", ts: new Date(NOW - DAY_MS - 6 * HOUR_MS).toISOString(), tone: "neutral", before: "New job: ", entity: "oil-filters-batch2" },
35  { id: "7", ts: new Date(NOW - 2 * DAY_MS - 1 * HOUR_MS).toISOString(), tone: "ok", entity: "headlight-bulbs", after: " finished its pipeline: 340 parts enriched" },
36  { id: "8", ts: new Date(NOW - 2 * DAY_MS - 9 * HOUR_MS).toISOString(), tone: "warn", entity: "battery-terminals", after: " is stalled: awaiting a source file" },
37];
38
39const PAGE_SIZE = 4;
40
41function startOfDay(d: Date): number {
42  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
43}
44
45function dayLabel(iso: string): string {
46  const d = new Date(iso);
47  const diffDays = Math.round((startOfDay(new Date()) - startOfDay(d)) / DAY_MS);
48  if (diffDays === 0) return "Today";
49  if (diffDays === 1) return "Yesterday";
50  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
51}
52
53// Events already arrive newest first, so a single pass groups consecutive
54// same-day rows without a second sort.
55function groupByDay(events: Event[]): { label: string; events: Event[] }[] {
56  const groups: { label: string; events: Event[] }[] = [];
57  for (const e of events) {
58    const label = dayLabel(e.ts);
59    const current = groups.at(-1);
60    if (current && current.label === label) current.events.push(e);
61    else groups.push({ label, events: [e] });
62  }
63  return groups;
64}
65
66type View = "activity" | "empty";
67
68export function RecentActivityFeed() {
69  const [view, setView] = useState<View>("activity");
70  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
71
72  const events = view === "activity" ? EVENTS.slice(0, visibleCount) : [];
73  const groups = groupByDay(events);
74  const hasMore = view === "activity" && visibleCount < EVENTS.length;
75
76  return (
77    <div className="flex flex-col gap-3">
78      <Tabs
79        size="sm"
80        value={view}
81        onChange={(v) => {
82          setView(v as View);
83          setVisibleCount(PAGE_SIZE);
84        }}
85        items={[
86          { value: "activity", label: "Activity" },
87          { value: "empty", label: "Empty" },
88        ]}
89      />
90      <Card title="Recent activity" subtitle={view === "activity" ? `${EVENTS.length} events` : undefined} titleDivider noAnimate>
91        {events.length === 0 ? (
92          <EmptyState
93            compact
94            Icon="Clock"
95            title="Nothing yet"
96            description="Activity across your catalog will show up here."
97          />
98        ) : (
99          <>
100            <div className="flex flex-col gap-4">
101              {groups.map((g) => (
102                <div key={g.label} className="flex flex-col gap-1.5">
103                  <span className="text-base-content/65 text-xs font-semibold tracking-wide uppercase">{g.label}</span>
104                  <div className="relative flex flex-col gap-1">
105                    {/* Connector line behind the dots, speedway's ActivityRail touch:
106                        it only earns its place once there is more than one row to link. */}
107                    {g.events.length > 1 && (
108                      <span
109                        aria-hidden="true"
110                        className="bg-base-content/15 absolute top-2 bottom-2 left-1 w-0.5 rounded-full"
111                      />
112                    )}
113                    {g.events.map((e) => (
114                      <div key={e.id} className="relative flex items-start gap-3 py-1">
115                        <StatusDot kind={e.tone} size="sm" className="mt-1 shrink-0" />
116                        <span className="text-base-content/65 flex-1 text-sm leading-snug">
117                          {e.before}
118                          <b className="text-base-content font-medium">{e.entity}</b>
119                          {e.after}
120                        </span>
121                        <Timestamp iso={e.ts} className="text-base-content/45 shrink-0 text-xs whitespace-nowrap" />
122                      </div>
123                    ))}
124                  </div>
125                </div>
126              ))}
127            </div>
128            {hasMore && (
129              <Button
130                size="sm"
131                variant="ghost"
132                shade
133                content={`Load ${Math.min(PAGE_SIZE, EVENTS.length - visibleCount)} more`}
134                onClick={() => setVisibleCount((n) => Math.min(n + PAGE_SIZE, EVENTS.length))}
135                className="mt-3 w-fit"
136              />
137            )}
138          </>
139        )}
140      </Card>
141    </div>
142  );
143}
144