Insight Cards

1"use client";
2
3import { Liveline, type LivelinePoint, type LivelineSeries } from "@/components/primitives/Liveline";
4import { useEffect, useMemo, useState } from "react";
5
6/* ─────────────────────────────────────────────────────────
7 * INSIGHT CARDS
8 * Embedded mini-visualizations in an "Insights N ‹ ›"
9 * carousel. Autoplay yields as soon as a person uses it.
10 * ───────────────────────────────────────────────────────── */
11
12const EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
13
14const formatPercent = (v: number) => `${v > 0 ? "+" : ""}${v.toFixed(2)}%`;
15const formatMoney = (v: number) => `$${Math.round(v).toLocaleString("en-US")}`;
16/* anchor the snapshot to *call* time (inside each card's mount-time memo) —
17 * a module-load constant goes stale, and once the points age past the chart
18 * window the canvas renders empty */
19function makePoints(values: number[], gap = 6): LivelinePoint[] {
20  const end = Math.floor(Date.now() / 1000);
21  return values.map((value, index) => ({
22    time: end - (values.length - 1 - index) * gap,
23    value,
24  }));
25}
26
27/* Catmull-Rom resample — turn a sparse series into a dense, smoothly curved
28 * one so both the line and the hover cursor glide instead of stepping between
29 * a handful of points. */
30function smooth(values: number[], perSegment = 9): number[] {
31  if (values.length < 3) return values.slice();
32  const out: number[] = [];
33  const n = values.length;
34  for (let i = 0; i < n - 1; i += 1) {
35    const p0 = values[Math.max(0, i - 1)];
36    const p1 = values[i];
37    const p2 = values[i + 1];
38    const p3 = values[Math.min(n - 1, i + 2)];
39    for (let s = 0; s < perSegment; s += 1) {
40      const t = s / perSegment;
41      const t2 = t * t;
42      const t3 = t2 * t;
43      out.push(
44        0.5 *
45          (2 * p1 +
46            (-p0 + p2) * t +
47            (2 * p0 - 5 * p1 + 4 * p2 - p3) * t2 +
48            (-p0 + 3 * p1 - 3 * p2 + p3) * t3),
49      );
50    }
51  }
52  out.push(values[n - 1]);
53  return out;
54}
55
56/* dense, smoothed points spanning exactly `spanSecs` — keeps the chart window
57 * unchanged while multiplying the resolution. */
58function smoothPoints(values: number[], spanSecs: number): LivelinePoint[] {
59  const dense = smooth(values);
60  return makePoints(dense, spanSecs / (dense.length - 1));
61}
62
63function useDarkMode() {
64  const [dark, setDark] = useState(false);
65
66  useEffect(() => {
67    const root = document.documentElement;
68    const update = () => setDark(root.classList.contains("dark"));
69    update();
70    const observer = new MutationObserver(update);
71    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
72    return () => observer.disconnect();
73  }, []);
74
75  return dark;
76}
77
78/* inline @entity mention */
79function Entity({ name, tone }: { name: string; tone: string }) {
80  return (
81    <span className="inline-flex items-center gap-1 align-baseline font-medium text-ink">
82      <span className={`inline-block size-2.5 rounded-full ${tone}`} />
83      @{name}
84    </span>
85  );
86}
87
88function Mono({ children, tone }: { children: React.ReactNode; tone: "red" | "green" }) {
89  return (
90    <code className={`font-mono text-[11.5px] ${tone === "red" ? "text-red" : "text-green"}`}>
91      {children}
92    </code>
93  );
94}
95
96function chartIndexFromPointer(event: React.PointerEvent<HTMLDivElement>, pointCount: number) {
97  const rect = event.currentTarget.getBoundingClientRect();
98  const progress = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
99  return Math.round(progress * (pointCount - 1));
100}
101
102function ChartTooltip({ rows }: { rows: { label: string; value: string; color: string }[] }) {
103  return (
104    <div className="insight-chart-tooltip">
105      {rows.map((row) => (
106        <span key={row.label} className="insight-chart-tooltip-item">
107          <span className="insight-chart-tooltip-dot" style={{ background: row.color }} />
108          {row.value}
109        </span>
110      ))}
111    </div>
112  );
113}
114
115/* 1 — return comparison: 2 series, legend + big deltas + line chart */
116function CompareCard() {
117  const dark = useDarkMode();
118  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
119  const data = useMemo(
120    () => ({
121      mint: smoothPoints([-2.9, -3.4, -3.05, -3.86, -3.52, -4.1, -3.82, -4.41], 42),
122      pistachio: smoothPoints([0.22, 0.58, 0.42, 0.91, 0.76, 1.08, 0.96, 1.15], 42),
123    }),
124    [],
125  );
126
127  const latestMint = data.mint.at(-1)?.value ?? -4.41;
128  const latestPistachio = data.pistachio.at(-1)?.value ?? 1.15;
129  const series: LivelineSeries[] = useMemo(
130    () => [
131      {
132        id: "mint",
133        label: "",
134        data: data.mint,
135        value: latestMint,
136        color: "#f68f3c",
137      },
138      {
139        id: "pistachio",
140        label: "",
141        data: data.pistachio,
142        value: latestPistachio,
143        color: "#3d9aff",
144      },
145    ],
146    [data.mint, data.pistachio, latestMint, latestPistachio],
147  );
148
149  return (
150    <div className="min-h-[278px] rounded-card bg-surface p-3 shadow-hairline">
151      <div className="flex items-center gap-4">
152        {[
153          {
154            name: "Mint Chip",
155            delta: formatPercent(latestMint),
156            sub: "-$2,377.66",
157            tone: "red",
158            dot: "bg-orange",
159          },
160          {
161            name: "Pistachio",
162            delta: formatPercent(latestPistachio),
163            sub: "+$617.22",
164            tone: "green",
165            dot: "bg-accent",
166          },
167        ].map((s) => (
168          <div key={s.name} className="flex-1">
169            <span className="flex items-center gap-1.5 text-[11.5px] text-ink-2">
170              <span className={`size-2 rounded-full ${s.dot}`} />
171              {s.name}
172            </span>
173            <span className={`block text-[17px] font-semibold tracking-[-0.01em] tabular-nums ${s.tone === "red" ? "text-red" : "text-green"}`}>
174              {s.delta}
175            </span>
176            <Mono tone={s.tone as "red" | "green"}>{s.sub}</Mono>
177          </div>
178        ))}
179      </div>
180      <div className="mt-2 overflow-hidden rounded-control bg-inset shadow-hairline">
181        <div className="flex items-center justify-between border-b border-line px-2.5 py-1.5">
182          <span className="text-[11px] text-ink-3 tabular-nums">
183            Trend snapshot
184          </span>
185          <span className="rounded-full bg-field px-2 py-0.5 text-[10.5px] font-medium text-ink-2">
186            Snapshot
187          </span>
188        </div>
189        <div
190          className="insight-chart-stage relative h-[166px]"
191          onPointerDown={(event) => setHoverIndex(chartIndexFromPointer(event, data.mint.length))}
192          onPointerMove={(event) => setHoverIndex(chartIndexFromPointer(event, data.mint.length))}
193          onPointerLeave={() => setHoverIndex(null)}
194          onPointerCancel={() => setHoverIndex(null)}
195          onPointerUp={() => setHoverIndex(null)}
196        >
197          <Liveline
198            data={[]}
199            value={0}
200            series={series}
201            theme={dark ? "dark" : "light"}
202            grid={false}
203            pulse={false}
204            window={42}
205            paused
206            scrub={false}
207            cursor="default"
208            lineWidth={2.25}
209            padding={{ top: 40, right: 0, bottom: 22, left: 0 }}
210            formatValue={formatPercent}
211          />
212          {hoverIndex !== null && <>
213            <span className="insight-chart-cursor" style={{ left: `${(hoverIndex / (data.mint.length - 1)) * 100}%` }} />
214            <span className="insight-chart-tooltip-anchor" style={{ left: `${Math.min(Math.max((hoverIndex / (data.mint.length - 1)) * 100, 28), 72)}%` }}>
215              <ChartTooltip rows={[{ label: "Mint Chip", value: formatPercent(data.mint[hoverIndex].value), color: "var(--orange)" }, { label: "Pistachio", value: formatPercent(data.pistachio[hoverIndex].value), color: "var(--accent)" }]} />
216            </span>
217          </>}
218        </div>
219      </div>
220    </div>
221  );
222}
223
224/* 2 — anomaly: bars with threshold + big spent value */
225function AnomalyCard() {
226  const dark = useDarkMode();
227  const [metric, setMetric] = useState<"spend" | "usage">("spend");
228  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
229  const spend = useMemo(
230    () => makePoints([274, 289, 264, 307, 331, 1210, 1718, 2112], 7),
231    [],
232  );
233  const usage = useMemo(
234    () => makePoints([18, 19, 17, 21, 22, 58, 81, 96], 7),
235    [],
236  );
237
238  const data = metric === "spend" ? spend : usage;
239  const value = data.at(-1)?.value ?? (metric === "spend" ? 2112 : 96);
240  const threshold = metric === "spend" ? "$2,112" : "82 kWh";
241  const moneyLabel = formatMoney(spend.at(-1)?.value ?? 2112);
242
243  return (
244    <div className="min-h-[278px] rounded-card bg-surface p-3 shadow-hairline">
245      <div className="flex items-center justify-between">
246        <span className="flex items-center gap-1.5 text-[12px] font-medium text-ink">
247          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--red)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
248          High freezer spend
249        </span>
250        <span className="rounded-full bg-field px-2 py-0.5 text-[10.5px] font-medium text-ink-2">
251          Snapshot
252        </span>
253      </div>
254      <div className="mt-2 overflow-hidden rounded-control bg-inset shadow-hairline">
255        <div className="flex items-center justify-between border-b border-line px-2.5 py-1.5">
256          <span className="text-[11px] text-ink-3 tabular-nums">
257            {hoverIndex !== null
258              ? metric === "spend"
259                ? formatMoney(data[hoverIndex].value)
260                : `${Math.round(data[hoverIndex].value)} kWh`
261              : `${threshold} threshold`}
262          </span>
263          <span className="flex rounded-full bg-field p-0.5">
264            {(["spend", "usage"] as const).map((item) => (
265              <button
266                key={item}
267                type="button"
268                aria-pressed={metric === item}
269                onClick={() => setMetric(item)}
270                className={`rounded-full px-2 py-0.5 text-[10.5px] font-medium transition-[background-color,color,box-shadow,transform] duration-150 active:scale-[0.96] ${
271                  metric === item ? "bg-surface text-ink shadow-btn" : "text-ink-3 hover:text-ink-2"
272                }`}
273              >
274                {item === "spend" ? "Spend" : "Usage"}
275              </button>
276            ))}
277          </span>
278        </div>
279        <div
280          className="insight-chart-stage relative h-[166px]"
281          onPointerDown={(event) => setHoverIndex(chartIndexFromPointer(event, data.length))}
282          onPointerMove={(event) => setHoverIndex(chartIndexFromPointer(event, data.length))}
283          onPointerLeave={() => setHoverIndex(null)}
284          onPointerCancel={() => setHoverIndex(null)}
285          onPointerUp={() => setHoverIndex(null)}
286        >
287          <Liveline
288            data={data}
289            value={value}
290            theme={dark ? "dark" : "light"}
291            color="#ee5c61"
292            grid
293            scrub={false}
294            fill={false}
295            pulse={false}
296            momentum={false}
297            paused
298            window={49}
299            lineWidth={2.25}
300            cursor="crosshair"
301            padding={{ top: 34, right: 0, bottom: 22, left: 0 }}
302            formatValue={(v) => (metric === "spend" ? formatMoney(v) : `${Math.round(v)} kWh`)}
303          />
304          {hoverIndex !== null && <>
305            <span className="insight-chart-cursor" style={{ left: `${(hoverIndex / (data.length - 1)) * 100}%` }} />
306            <span className="insight-chart-tooltip-anchor" style={{ left: `${Math.min(Math.max((hoverIndex / (data.length - 1)) * 100, 28), 72)}%` }}>
307              <ChartTooltip rows={[{ label: metric === "spend" ? "Spend" : "Usage", value: metric === "spend" ? formatMoney(data[hoverIndex].value) : `${Math.round(data[hoverIndex].value)} kWh`, color: "var(--red)" }]} />
308            </span>
309          </>}
310        </div>
311      </div>
312      <div className="mt-1.5 flex items-baseline gap-2">
313        <span className="text-[17px] font-semibold tracking-[-0.01em] text-ink tabular-nums">
314          {moneyLabel} spent
315        </span>
316        <Mono tone="red">+$1,834.66</Mono>
317        <span className="text-[11px] text-ink-3">vs 3 months</span>
318      </div>
319    </div>
320  );
321}
322
323/* 3 — allocation: hero number + segmented bar + legend */
324function AllocationCard() {
325  const segments = [
326    { name: "VAN", label: "Vanilla", pct: 72.5, amount: "$51,785", cls: "bg-orange", tone: "text-orange" },
327    { name: "CHOC", label: "Chocolate", pct: 22.8, amount: "$16,278", cls: "bg-line-strong", tone: "text-ink-2" },
328    { name: "MINT", label: "Mint", pct: 4.7, amount: "$3,357", cls: "bg-line", tone: "text-ink-3" },
329  ];
330  const [selected, setSelected] = useState(segments[0].name);
331  const active = segments.find((segment) => segment.name === selected) ?? segments[0];
332
333  return (
334    <div className="min-h-[278px] rounded-card bg-surface p-3 shadow-hairline">
335      <span className="flex items-center gap-1.5 text-[12px] font-medium text-ink">
336        <span className="flex size-3.5 items-center justify-center rounded-full bg-orange text-[8px] font-bold text-white">
337          V
338        </span>
339        Vanilla allocation
340      </span>
341      <span className="mt-1 block text-[20px] font-semibold tracking-[-0.01em] text-ink tabular-nums">
342        {active.amount}
343      </span>
344      <div
345        className="mt-3 flex h-9 gap-0.5 overflow-hidden rounded-full bg-field p-0.5"
346        role="group"
347        aria-label="Allocation segments"
348      >
349        {segments.map((s) => (
350          <button
351            key={s.name}
352            type="button"
353            aria-pressed={selected === s.name}
354            aria-label={`${s.label}: ${s.pct}%`}
355            onClick={() => setSelected(s.name)}
356            className={`relative h-full overflow-hidden rounded-full ${s.cls} transition-[opacity,transform,box-shadow] duration-300 active:scale-[0.98]`}
357            style={{
358              width: `${s.pct}%`,
359              opacity: selected === s.name ? 1 : 0.58,
360              boxShadow: selected === s.name ? "inset 0 0 0 1px rgba(255,255,255,0.22)" : undefined,
361              transitionTimingFunction: EASE,
362            }}
363          >
364            <span
365              className="absolute inset-y-1 left-1 rounded-full bg-white/20 transition-[width,opacity] duration-500"
366              style={{
367                width: selected === s.name ? "calc(100% - 8px)" : "0%",
368                opacity: selected === s.name ? 1 : 0,
369                transitionTimingFunction: EASE,
370              }}
371            />
372          </button>
373        ))}
374      </div>
375      <div className="mt-2 flex items-center gap-1.5">
376        {segments.map((s) => (
377          <button
378            key={s.name}
379            type="button"
380            aria-pressed={selected === s.name}
381            onClick={() => setSelected(s.name)}
382            className={`flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] transition-[background-color,color,transform] duration-150 active:scale-[0.96] ${
383              selected === s.name ? "bg-field text-ink" : "text-ink-2 hover:bg-hover hover:text-ink"
384            }`}
385          >
386            <span className={`size-1.5 rounded-full ${s.cls}`} />
387            {s.name} <span className="tabular-nums">{s.pct}%</span>
388          </button>
389        ))}
390      </div>
391      <div className="mt-3 min-h-16 rounded-control bg-inset px-2.5 py-2 shadow-hairline">
392        <span className={`block text-[11.5px] font-medium ${active.tone}`}>{active.label}</span>
393        <span className="mt-1 block text-[11px] leading-relaxed text-ink-3">
394          Contribution snapshot across current inventory value. Segment selection changes the inspected group without moving the card.
395        </span>
396      </div>
397    </div>
398  );
399}
400
401const PAGES = [
402  {
403    key: "compare",
404    prose: (
405      <>
406        The worst performer in your <Entity name="Creamery" tone="bg-orange" /> is
407        Rocky Road — down <Mono tone="red">-6%</Mono> or <Mono tone="red">-$2,453.44</Mono>.
408      </>
409    ),
410    Card: CompareCard,
411    pill: "Should I rebalance flavors?",
412  },
413  {
414    key: "anomaly",
415    prose: (
416      <>
417        Unusually high freezer bill on <span className="font-medium text-ink">Dec 13</span> —{" "}
418        <Mono tone="red">+$1,834.66</Mono> above your average.
419      </>
420    ),
421    Card: AnomalyCard,
422    pill: "Get tips on cutting freezer costs",
423  },
424  {
425    key: "allocation",
426    prose: (
427      <>
428        You’re heavily invested in <Entity name="Vanilla" tone="bg-orange" /> — it’s{" "}
429        <span className="font-medium text-ink">72.5%</span> of your case.
430      </>
431    ),
432    Card: AllocationCard,
433    pill: "If we look at seasonals, what changes?",
434  },
435];
436
437export default function InsightCards() {
438  const [page, setPage] = useState(0);
439
440  const move = (direction: -1 | 1) => {
441    setPage((current) => (current + direction + PAGES.length) % PAGES.length);
442  };
443
444  const { prose, Card, pill } = PAGES[page];
445
446  return (
447    <div className="min-h-[408px] w-full max-w-86">
448      {/* pager header */}
449      <div className="flex items-center justify-between">
450        <span className="flex items-baseline gap-1.5">
451          <span className="text-[13px] font-semibold text-ink">Insights</span>
452          <span className="text-[13px] text-ink-3 tabular-nums">{PAGES.length}</span>
453        </span>
454        <span className="flex items-center gap-0.5">
455          {(["M15 18l-6-6 6-6", "M9 6l6 6-6 6"] as const).map((d, i) => (
456            <button
457              key={i}
458              aria-label={i === 0 ? "Previous insight" : "Next insight"}
459              onClick={() => move(i === 0 ? -1 : 1)}
460              className="flex size-6 items-center justify-center rounded-[6px] text-ink-3
461                transition-[background-color,color,transform] duration-100 hover:bg-hover
462                hover:text-ink active:scale-[0.96]"
463            >
464              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
465                <path d={d} />
466              </svg>
467            </button>
468          ))}
469        </span>
470      </div>
471
472      {/* page content — blurred crossfade */}
473      <div
474        className="transition-[opacity,filter] duration-250"
475        style={{ opacity: 1, filter: "blur(0)" }}
476      >
477        <p className="mt-1.5 text-[12.5px] leading-relaxed text-ink-2">{prose}</p>
478        <div className="mt-2">
479          <Card />
480        </div>
481        <button
482          className="mt-2 rounded-full bg-surface px-3 py-1.5 text-left text-[12px] text-ink
483            shadow-btn transition-colors duration-100 hover:bg-hover"
484        >
485          {pill}
486        </button>
487      </div>
488    </div>
489  );
490}
491