Performance Report

// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.

export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;

/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.6,
} as const;

/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
  type: "spring",
  stiffness: 460,
  damping: 30,
  mass: 0.55,
} as const;

/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
  type: "spring",
  stiffness: 420,
  damping: 40,
  mass: 0.5,
} as const;

/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
  type: "spring",
  stiffness: 360,
  damping: 32,
  mass: 0.6,
} as const;

/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
  stiffness: 200,
  damping: 15,
  mass: 0.3,
} as const;

/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
 * so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
} as const;

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Shared touch primitives. iOS and iPadOS run their own gestures on top of the
// page — the long-press selection callout and the selection it drags in with
// it — and they win: once the platform claims a touch it cancels ours
// mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own
// their gesture have to opt out.
//
// What the two classes below cover, precisely:
// - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only:
//   it is not a property other engines have, so it is inert everywhere else.
// - `user-select: none` stops the long-press selection on every engine,
//   Android included, and stops a drag from painting a selection under the
//   cursor. It is inherited, so it reaches every descendant — which is why the
//   two classes differ only in whether they apply it unconditionally.
// What neither covers:
// - Chrome for Android's long-press menu on a link or an image. No CSS
//   suppresses it; a gesture surface that wraps one needs its own
//   `onContextMenu` with `preventDefault()`.
// - The native drag of an `<img>` or `<a>` descendant. `-webkit-user-drag` is
//   not inherited and plain divs and buttons are not drag sources, so setting
//   it on the surface does nothing — the child itself needs `draggable={false}`.

/**
 * Classes for a surface that *is* the control: a thumb, a drum, a stage, a
 * handle, a hold button. Selection is suppressed on every input, because a
 * drag that highlights the control's own label is wrong on a mouse too.
 * Compose with `touch-none` when the surface also owns the scroll axis — leave
 * it off when the page must still scroll from there.
 */
export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]";

/**
 * The same opt-out for a gesture surface that wraps content the consumer owns:
 * a scroller, a context-menu trigger, a sheet header, a list row. Selection is
 * suppressed only where the platform runs its own press gestures — a coarse
 * pointer — so a mouse user can still select and copy that content. If the
 * gesture itself would paint a selection under the cursor, add `select-none`
 * for the duration of the gesture rather than reaching for
 * `TOUCH_GESTURE_CLASS`.
 *
 * `pointer: coarse` describes the *primary* pointer and nothing else, so a
 * hybrid machine reads it wrong in both directions: a tablet with a mouse
 * plugged in keeps touch as primary and loses mouse selection, and a laptop
 * with a touchscreen keeps the mouse as primary and leaves selection live
 * under a finger. No media query can answer per interaction — the query is
 * about the device, and the question is about the gesture in progress. The
 * default stays here because it is right on the machines that are one thing or
 * the other, and losing a selection is a nuisance; where the miss costs a
 * *gesture* instead, the surface pairs it with `holdSelection` on the press.
 */
export const TOUCH_GESTURE_CONTENT_CLASS =
  "[-webkit-touch-callout:none] pointer-coarse:select-none";

/**
 * Grow a small control's *hit area* to at least 44×44px (WCAG 2.5.5, Apple
 * HIG) on a coarse pointer, without changing what it looks like or the space
 * it takes in layout. An invisible `::after` box, centered on the control and
 * `max(100%, 2.75rem)` on each axis, catches the taps: a 32px icon button
 * reaches 6px past each edge, a wide 40px button only grows vertically, and a
 * control already 44px or larger is left as it is. Hit-testing a pseudo
 * element lands on its owner, so handlers, focus and `:active` all behave.
 *
 * Mouse and trackpad rendering is untouched — nothing here applies outside
 * `pointer: coarse`. Requirements on the element it goes on:
 * - It must be the containing block: add `relative` (and keep it mergeable, so
 *   a consumer's `absolute` still wins through `cn`).
 * - It must not clip itself (`overflow-hidden`), or the overhang is clipped
 *   away along with its hit area.
 * - It must render children: `<input>` and other void elements have no
 *   `::after`. Put it on the wrapper or label instead.
 * - It must not already use `::after` for something visible.
 *
 * Centered 44px means two 32px buttons with a 4px gap overlap by 8px; the
 * later one wins that strip, which still ends well short of the earlier
 * button's visual center. Below a ~32px pitch the later neighbour starts
 * eating into that center — use `TOUCH_TARGET_Y_CLASS` for such dense rows.
 *
 * The overhang is real geometry: inside a scroll container it counts as
 * scrollable overflow, so a control flush against a scroller's edge can add a
 * few pixels of scroll on touch screens. Give such a scroller a little padding
 * on that side.
 */
export const TOUCH_TARGET_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-[max(100%,2.75rem)] pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * `TOUCH_TARGET_CLASS` on the vertical axis only, for controls packed tighter
 * than ~32px apart in a row (pagination dots, dense swatches), where growing
 * sideways would hand most of each control to its neighbour. Same rules.
 */
export const TOUCH_TARGET_Y_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:top-1/2 pointer-coarse:after:h-[max(100%,2.75rem)] pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * Suppress selection on `element` for as long as a gesture is running on it,
 * whatever the primary pointer of the machine happens to be. Returns the
 * release. Inline, so it wins over the class above and is gone again the
 * moment the gesture ends.
 *
 * For the press gestures a native selection would otherwise steal — a
 * long-press that opens a menu. Elsewhere prefer the classes: a surface that
 * takes selection away for the whole session is a surface whose text nobody
 * can copy.
 */
export function holdSelection(element: HTMLElement) {
  element.style.setProperty("user-select", "none");
  element.style.setProperty("-webkit-user-select", "none");
  return () => {
    element.style.removeProperty("user-select");
    element.style.removeProperty("-webkit-user-select");
  };
}

/**
 * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer
 * is already gone by the time the handler runs — routine on iOS, where the
 * system can claim the touch first — and an uncaught throw takes the rest of
 * the handler, the gesture included, down with it. Touch pointers carry
 * implicit capture anyway, so losing it is never fatal.
 */
export function capturePointer(element: Element, pointerId: number) {
  try {
    element.setPointerCapture(pointerId);
  } catch {
    // Pointer is no longer active — implicit capture still applies on touch.
  }
}

/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */
export function releasePointer(element: Element, pointerId: number) {
  try {
    if (element.hasPointerCapture(pointerId)) {
      element.releasePointerCapture(pointerId);
    }
  } catch {
    // Capture was already dropped by the browser.
  }
}

/**
 * Whether this event came from a pointer that is *hovering*: not a touch, and
 * not currently pressed. Which input the user is holding right now is not
 * something a device capability can answer — a touchscreen laptop hovers and
 * taps, and iPadOS reports a fine hovering pointer for a finger — so both
 * paths stay live and each handler branches on the event it was given.
 *
 * A pen resting on the glass is making contact, not hovering: `buttons` is the
 * tell, and it sends a pen tap down the same route a finger takes.
 *
 * This answers what an *enter* asks. A leave is the other half of a pair and
 * has to be read against the enter that started it — `useHoverGesture` in
 * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it
 * rather than asking this question twice.
 */
export const isHoveringPointer = (event: {
  pointerType: string;
  buttons: number;
}) => event.pointerType !== "touch" && event.buttons === 0;

"use client";
// karaui.kamisama-v0.my.id/components/blocks/performance-report

import { Lightbulb, TrendingDown, TrendingUp } from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { type ReactNode, useId, useMemo, useState } from "react";
import type { DateRange } from "@/components/motion/calendar";
import { AreaChart } from "@/components/motion/chart/area-chart";
import { seriesColor } from "@/components/motion/chart/shared";
import { DateRangePicker, type DateRangePreset } from "@/components/motion/date-range-picker";
import { Skeleton, SkeletonSwap } from "@/components/motion/skeleton";
import { StatCard, type StatFormat } from "@/components/motion/stat-card";
import { Switch } from "@/components/motion/switch";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface ReportKpi {
  id: string;
  label: string;
  value: number;
  /** Same metric for the comparison period; drives the delta badge. */
  previous?: number;
  format?: StatFormat;
  /** Which way is good news. Default "up". */
  goodDirection?: "up" | "down";
  icon?: ReactNode;
}

export interface ReportTrendPoint {
  /** ISO date (YYYY-MM-DD), read as UTC. */
  date: string;
  current: number;
  previous?: number;
}

export interface ReportBreakdownRow {
  id: string;
  label: string;
  value: number;
  previous?: number;
}

export interface PerformanceReportData {
  kpis: ReportKpi[];
  trend: ReportTrendPoint[];
  /** Name of the trended metric, e.g. "Sessions". */
  trendLabel?: string;
  breakdown: ReportBreakdownRow[];
  /** Name of the breakdown dimension, e.g. "Channel". */
  breakdownLabel?: string;
}

export type InsightTone = "positive" | "negative" | "neutral";

export interface ReportInsight {
  id: string;
  tone: InsightTone;
  text: ReactNode;
}

export interface PerformanceReportProps {
  /** Report contents for the current range. `null` renders the loading state. */
  data: PerformanceReportData | null;
  /** Show skeletons (e.g. while a new range loads). */
  loading?: boolean;
  range?: DateRange | null;
  defaultRange?: DateRange | null;
  onRangeChange?: (range: { from: Date; to: Date }) => void;
  presets?: DateRangePreset[];
  /** Controlled previous-period comparison. */
  compare?: boolean;
  defaultCompare?: boolean;
  onCompareChange?: (compare: boolean) => void;
  /** Override the auto-generated highlights. */
  insights?: ReportInsight[];
  title?: ReactNode;
  /** Default "en-US". */
  locale?: string;
  /** Trend chart plot height in px. Default 110. */
  chartHeight?: number;
  className?: string;
}

const UTC_DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
const formatDay = (iso: string) => {
  const ms = Date.parse(`${iso}T00:00:00Z`);
  return Number.isNaN(ms) ? iso : UTC_DAY.format(ms);
};

const TONE_TEXT: Record<InsightTone, string> = {
  positive: "text-[color-mix(in_oklab,var(--success)_60%,var(--foreground))]",
  negative: "text-[color-mix(in_oklab,var(--destructive)_75%,var(--foreground))]",
  neutral: "text-muted-foreground",
};
const TONE_BG: Record<InsightTone, string> = {
  positive: "bg-[color-mix(in_oklab,var(--success)_14%,transparent)]",
  negative: "bg-[color-mix(in_oklab,var(--destructive)_12%,transparent)]",
  neutral: "bg-foreground/5",
};

const change = (value: number, previous?: number) =>
  previous === undefined || previous === 0 ? undefined : (value - previous) / Math.abs(previous);

/**
 * Plain-language highlights derived from the report: the biggest KPI move vs
 * the previous period, the top and fastest-growing breakdown rows, and the
 * peak day of the trend. Exported so it can feed other surfaces.
 */
export function generateInsights(
  data: PerformanceReportData,
  { compare = true, locale = "en-US", max = 4 }: { compare?: boolean; locale?: string; max?: number } = {},
): ReportInsight[] {
  const pct = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 });
  const num = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 });
  const out: ReportInsight[] = [];

  if (compare) {
    const moves = data.kpis
      .map((k) => ({ k, d: change(k.value, k.previous) }))
      .filter((m): m is { k: ReportKpi; d: number } => m.d !== undefined && m.d !== 0)
      .sort((a, b) => Math.abs(b.d) - Math.abs(a.d));
    const best = moves.find((m) => (m.d > 0) === ((m.k.goodDirection ?? "up") === "up"));
    const worst = moves.find((m) => (m.d > 0) !== ((m.k.goodDirection ?? "up") === "up"));
    if (best)
      out.push({
        id: `kpi-${best.k.id}`,
        tone: "positive",
        text: `${best.k.label} ${best.d > 0 ? "up" : "down"} ${pct.format(Math.abs(best.d))} vs the previous period.`,
      });
    if (worst)
      out.push({
        id: `kpi-${worst.k.id}`,
        tone: "negative",
        text: `${worst.k.label} ${worst.d > 0 ? "rose" : "slipped"} ${pct.format(Math.abs(worst.d))} — worth a look.`,
      });
  }

  const total = data.breakdown.reduce((s, r) => s + r.value, 0);
  const top = [...data.breakdown].sort((a, b) => b.value - a.value)[0];
  if (top && total > 0)
    out.push({
      id: `top-${top.id}`,
      tone: "neutral",
      text: `${top.label} drove ${pct.format(top.value / total)} of ${(data.trendLabel ?? "volume").toLowerCase()}.`,
    });

  if (compare) {
    const fastest = data.breakdown
      .map((r) => ({ r, d: change(r.value, r.previous) }))
      .filter((m): m is { r: ReportBreakdownRow; d: number } => m.d !== undefined)
      .sort((a, b) => b.d - a.d)[0];
    if (fastest && fastest.d > 0 && fastest.r.id !== top?.id)
      out.push({
        id: `fast-${fastest.r.id}`,
        tone: "positive",
        text: `${fastest.r.label} grew fastest, +${pct.format(fastest.d)}.`,
      });
  }

  const peak = data.trend.reduce<ReportTrendPoint | null>((p, c) => (!p || c.current > p.current ? c : p), null);
  if (peak)
    out.push({
      id: `peak-${peak.date}`,
      tone: "neutral",
      text: `Peak day was ${formatDay(peak.date)} with ${num.format(peak.current)} ${(data.trendLabel ?? "").toLowerCase()}.`,
    });

  return out.slice(0, max);
}

/**
 * Dashboard report: a range picker and previous-period toggle head a row of
 * rolling KPI cards, a trend chart (current vs previous as a second, muted
 * series), a breakdown table with inline bars, and auto-generated highlights
 * that stagger in. While a range loads every section holds its footprint as
 * a skeleton, then cross-fades back.
 */
export function PerformanceReport({
  data,
  loading = false,
  range,
  defaultRange,
  onRangeChange,
  presets,
  compare: compareProp,
  defaultCompare = true,
  onCompareChange,
  insights: insightsProp,
  title = "Performance",
  locale = "en-US",
  chartHeight = 110,
  className,
}: PerformanceReportProps) {
  const reduce = useReducedMotion() ?? false;
  const baseId = useId();
  const [compareState, setCompareState] = useState(defaultCompare);
  const compare = compareProp ?? compareState;
  const setCompare = (next: boolean) => {
    if (compareProp === undefined) setCompareState(next);
    onCompareChange?.(next);
  };
  const busy = loading || data === null;

  const compact = useMemo(
    () => new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }),
    [locale],
  );
  const full = useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }), [locale]);
  const pct = useMemo(
    () => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1, signDisplay: "exceptZero" }),
    [locale],
  );

  const insights = useMemo(
    () => insightsProp ?? (data ? generateInsights(data, { compare, locale }) : []),
    [insightsProp, data, compare, locale],
  );

  const trendLabel = data?.trendLabel ?? "Value";
  const series = [
    { key: "current", label: "This period" },
    ...(compare ? [{ key: "previous", label: "Previous", color: "var(--muted-foreground)" }] : []),
  ];
  const chartData = (data?.trend ?? []).map((p) => ({
    date: p.date,
    current: p.current,
    previous: p.previous ?? 0,
  }));

  const maxRow = Math.max(1, ...(data?.breakdown ?? []).map((r) => r.value));
  const dataKey = data ? `${data.trend[0]?.date ?? ""}-${data.trend.length}` : "none";

  const listVariants: Variants = {
    hidden: {},
    shown: { transition: { staggerChildren: reduce ? 0 : 0.07, delayChildren: 0.15 } },
  };
  const itemVariants: Variants = {
    hidden: { opacity: 0, y: reduce ? 0 : 6 },
    shown: { opacity: 1, y: 0, transition: { duration: 0.28, ease: EASE_OUT } },
  };

  return (
    <section
      aria-labelledby={`${baseId}-title`}
      className={cn("@container flex w-full flex-col gap-3 text-card-foreground", className)}
    >
      <header className="flex flex-wrap items-center justify-between gap-2">
        <h3 id={`${baseId}-title`} className="text-base font-semibold tracking-tight">
          {title}
        </h3>
        <div className="flex flex-wrap items-center gap-3">
          <Switch checked={compare} onCheckedChange={setCompare} label="Compare" className="gap-2 text-sm" />
          <DateRangePicker
            value={range}
            defaultValue={defaultRange}
            onValueChange={onRangeChange}
            presets={presets}
            align="end"
            className="h-9 min-w-0"
          />
        </div>
      </header>

      <div className="grid grid-cols-2 gap-2 @lg:grid-cols-4">
        {(data?.kpis ?? PLACEHOLDER_KPIS).map((k) => (
          <StatCard
            key={k.id}
            label={k.label}
            icon={k.icon}
            value={k.value}
            format={k.format}
            goodDirection={k.goodDirection}
            delta={compare ? change(k.value, k.previous) : undefined}
            caption={compare ? "vs previous" : undefined}
            loading={busy}
            locale={locale}
            className="rounded-xl p-3"
          />
        ))}
      </div>

      <div className="rounded-xl border border-border bg-card p-3">
        <div className="mb-2 flex items-center justify-between gap-2">
          <h4 className="text-xs font-medium text-muted-foreground">{trendLabel} over time</h4>
          <ul className="flex items-center gap-3 text-[11px] text-muted-foreground">
            {series.map((s, i) => (
              <li key={s.key} className="flex items-center gap-1.5">
                <span aria-hidden className="h-0.5 w-3 rounded-full" style={{ background: seriesColor(s, i) }} />
                {s.label}
              </li>
            ))}
          </ul>
        </div>
        <SkeletonSwap
          loading={busy}
          loadingLabel="Loading report"
          skeleton={<Skeleton className="w-full rounded-lg" height={chartHeight + 28} />}
        >
          <AreaChart
            key={`${dataKey}-${compare}`}
            data={chartData}
            index="date"
            series={series}
            height={chartHeight}
            legend={false}
            indicator="line"
            formatIndex={formatDay}
            formatValue={(v) => full.format(v)}
            title={`${trendLabel} per day${compare ? ", with previous period" : ""}`}
          />
        </SkeletonSwap>
      </div>

      <div className="grid gap-3 @lg:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]">
        <div className="rounded-xl border border-border bg-card p-3">
          <SkeletonSwap
            loading={busy}
            skeleton={
              <div className="flex flex-col gap-2.5">
                {[0, 1, 2, 3, 4].map((i) => (
                  <Skeleton key={i} shape="text" />
                ))}
              </div>
            }
          >
            <table className="w-full text-xs">
              <caption className="sr-only">
                {trendLabel} by {(data?.breakdownLabel ?? "segment").toLowerCase()}
              </caption>
              <thead>
                <tr className="text-left text-[11px] text-muted-foreground">
                  <th scope="col" className="pb-1.5 font-medium">
                    {data?.breakdownLabel ?? "Segment"}
                  </th>
                  <th scope="col" className="pb-1.5 text-right font-medium">
                    {trendLabel}
                  </th>
                  <th scope="col" className="w-[30%] pb-1.5 pl-3 font-medium">
                    <span className="sr-only">Share</span>
                  </th>
                  {compare ? (
                    <th scope="col" className="pb-1.5 text-right font-medium">
                      Δ
                    </th>
                  ) : null}
                </tr>
              </thead>
              <tbody key={dataKey}>
                {(data?.breakdown ?? []).map((r, i) => {
                  const d = change(r.value, r.previous);
                  return (
                    <tr key={r.id} className="border-t border-border">
                      <th scope="row" className="py-1.5 pr-2 text-left font-medium">
                        {r.label}
                      </th>
                      <td className="py-1.5 text-right tabular-nums">{compact.format(r.value)}</td>
                      <td className="py-1.5 pl-3">
                        <span className="block h-1.5 w-full overflow-hidden rounded-full bg-foreground/5">
                          {/* Fill grows from the left edge: scaleX on an HTML element. */}
                          <motion.span
                            className="block h-full w-full origin-left rounded-full"
                            style={{ background: seriesColor({}, 0) }}
                            initial={{ scaleX: reduce ? r.value / maxRow : 0 }}
                            animate={{ scaleX: r.value / maxRow }}
                            transition={{ duration: 0.6, ease: EASE_OUT, delay: reduce ? 0 : 0.05 * i }}
                          />
                        </span>
                      </td>
                      {compare ? (
                        <td
                          className={cn(
                            "py-1.5 pl-2 text-right tabular-nums",
                            d === undefined ? "text-muted-foreground" : TONE_TEXT[d >= 0 ? "positive" : "negative"],
                          )}
                        >
                          {d === undefined ? "—" : pct.format(d)}
                        </td>
                      ) : null}
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </SkeletonSwap>
        </div>

        <div className="rounded-xl border border-border bg-card p-3">
          <h4 className="mb-2 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
            <Lightbulb className="size-3.5" aria-hidden />
            Highlights
          </h4>
          <SkeletonSwap
            loading={busy}
            skeleton={
              <div className="flex flex-col gap-3">
                {[0, 1, 2].map((i) => (
                  <div key={i} className="flex items-center gap-2">
                    <Skeleton shape="circle" width={20} />
                    <Skeleton shape="text" className="flex-1" />
                  </div>
                ))}
              </div>
            }
          >
            <motion.ul
              key={`${dataKey}-${compare}`}
              variants={listVariants}
              initial="hidden"
              animate="shown"
              className="flex flex-col gap-2"
            >
              {insights.map((ins) => {
                const Icon = ins.tone === "negative" ? TrendingDown : ins.tone === "positive" ? TrendingUp : Lightbulb;
                return (
                  <motion.li key={ins.id} variants={itemVariants} className="flex items-start gap-2 text-xs leading-snug">
                    <span
                      aria-hidden
                      className={cn("grid size-5 shrink-0 place-items-center rounded-full", TONE_BG[ins.tone], TONE_TEXT[ins.tone])}
                    >
                      <Icon className="size-3" />
                    </span>
                    <span className="pt-0.5">{ins.text}</span>
                  </motion.li>
                );
              })}
            </motion.ul>
          </SkeletonSwap>
        </div>
      </div>
    </section>
  );
}

// Footprint for the first load, before any data arrives.
const PLACEHOLDER_KPIS: ReportKpi[] = [0, 1, 2, 3].map((i) => ({
  id: `placeholder-${i}`,
  label: "Loading",
  value: 0,
}));

"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  type KeyboardEvent,
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
} from "react";
import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type DateRange = { from: Date; to?: Date };
/** A whole week row: `from` is its first day, `to` its seventh. */
export type WeekRange = { from: Date; to: Date };

/** Per-day extras from `getDayMeta`. */
export type CalendarDayMeta = {
  /** Short text under the day number (a price, a count). Cells grow taller
   * when any day has meta; the label is also read after the date. */
  label?: string;
  /** "accent" tints the label (deals, highlights); "muted" fades it. */
  tone?: "muted" | "accent";
  /** Blocks the day and strikes it through, like `isDateDisabled`. */
  disabled?: boolean;
};

type CalendarBaseProps = {
  /** Earliest selectable day (inclusive). */
  minDate?: Date;
  /** Latest selectable day (inclusive). */
  maxDate?: Date;
  /** Extra per-day rule, e.g. weekends or booked dates. */
  isDateDisabled?: (date: Date) => boolean;
  /** 0 = Sunday … 6 = Saturday. Default 0. */
  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
  /** BCP 47 locale for month, weekday and day labels. Default "en-US" — a
   * fixed default keeps server and client output identical for hydration. */
  locale?: string;
  /** Controlled visible month (any day inside it). */
  month?: Date;
  /** Uncontrolled initial visible month. Default: the selection or today. */
  defaultMonth?: Date;
  onMonthChange?: (month: Date) => void;
  /** Months shown side by side (stacked below `sm`). Default 1. With more
   * than one, days outside each month are left blank so none repeats. */
  numberOfMonths?: number;
  /** Adds an ISO 8601 week-number column ("Wk") before each row. */
  showWeekNumber?: boolean;
  /** Per-day label, tone and blocking, e.g. nightly prices or booked days.
   * Passing it switches the grid to taller cells that fit the label. */
  getDayMeta?: (date: Date) => CalendarDayMeta | null | undefined;
  className?: string;
  "aria-label"?: string;
};

export type CalendarSingleProps = CalendarBaseProps & {
  mode?: "single";
  value?: Date | null;
  defaultValue?: Date | null;
  onValueChange?: (date: Date) => void;
};

export type CalendarRangeProps = CalendarBaseProps & {
  mode: "range";
  value?: DateRange | null;
  defaultValue?: DateRange | null;
  onValueChange?: (range: DateRange) => void;
  /** Fewest nights (days between start and end) a finished range may span.
   * While the end is being chosen, days too close are blocked. */
  minNights?: number;
  /** Most nights a finished range may span; farther days are blocked. */
  maxNights?: number;
};

export type CalendarWeekProps = CalendarBaseProps & {
  mode: "week";
  value?: WeekRange | null;
  defaultValue?: WeekRange | null;
  /** Called with the picked day's whole row, honouring `weekStartsOn`. */
  onValueChange?: (week: WeekRange) => void;
};

export type CalendarMultipleProps = CalendarBaseProps & {
  mode: "multiple";
  value?: Date[] | null;
  defaultValue?: Date[] | null;
  /** Called with the selection sorted by date. */
  onValueChange?: (dates: Date[]) => void;
  /** Most days that can be picked; further picks are ignored. */
  max?: number;
};

export type CalendarProps =
  | CalendarSingleProps
  | CalendarRangeProps
  | CalendarWeekProps
  | CalendarMultipleProps;

// ── date helpers (local time, day precision) ──────────────────────────────

const startOfDay = (d: Date) =>
  new Date(d.getFullYear(), d.getMonth(), d.getDate());
const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
const addDays = (d: Date, n: number) =>
  new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
/** Adds months, clamping the day so Jan 31 + 1 month lands on Feb 28/29. */
function addMonths(d: Date, n: number) {
  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
  const lastDay = new Date(
    target.getFullYear(),
    target.getMonth() + 1,
    0,
  ).getDate();
  target.setDate(Math.min(d.getDate(), lastDay));
  return target;
}
const sameDay = (a?: Date | null, b?: Date | null) =>
  !!a &&
  !!b &&
  a.getFullYear() === b.getFullYear() &&
  a.getMonth() === b.getMonth() &&
  a.getDate() === b.getDate();
const sameMonth = (a: Date, b: Date) =>
  a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
const dayKey = (d: Date) =>
  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
const monthKey = (d: Date) =>
  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
/** Whole days from `a` to `b`; rounding absorbs DST hour shifts. */
const daysBetween = (a: Date, b: Date) =>
  Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / 86_400_000);
/** ISO 8601 week number: weeks start Monday, week 1 holds Jan 4. */
function isoWeek(d: Date) {
  const thursday = addDays(d, 3 - ((d.getDay() + 6) % 7));
  const jan4 = new Date(thursday.getFullYear(), 0, 4);
  const firstThursday = addDays(jan4, 3 - ((jan4.getDay() + 6) % 7));
  return 1 + Math.round(daysBetween(firstThursday, thursday) / 7);
}

/** Always 6 weeks, so the panel never changes height between months. */
function buildWeeks(month: Date, weekStartsOn: number) {
  const first = startOfMonth(month);
  const offset = (first.getDay() - weekStartsOn + 7) % 7;
  const start = addDays(first, -offset);
  return Array.from({ length: 6 }, (_, w) =>
    Array.from({ length: 7 }, (_, d) => addDays(start, w * 7 + d)),
  );
}

// Month swap is a short directional slide; the exit is quicker than the entry.
const MONTH_ENTER = { duration: 0.26, ease: EASE_OUT } as const;
const MONTH_EXIT = { duration: 0.16, ease: EASE_OUT } as const;

/**
 * Month-grid calendar for single dates, ranges, whole weeks or several
 * separate days, one or more months wide. The selected day is a pill that
 * glides between days on a shared-layout spring; a picked week is one pill
 * across its row; months slide in from the direction you travel. Optional ISO
 * week numbers, per-day labels (`getDayMeta`) and night limits for ranges.
 * Full keyboard grid navigation (arrows, Home/End, PageUp/PageDown,
 * Shift+Page for years). Controlled or uncontrolled for both the selection
 * and the visible month; reduced-motion safe.
 */
export function Calendar(props: CalendarProps) {
  const {
    minDate,
    maxDate,
    isDateDisabled,
    weekStartsOn = 0,
    locale = "en-US",
    month: controlledMonth,
    defaultMonth,
    onMonthChange,
    numberOfMonths = 1,
    showWeekNumber = false,
    getDayMeta,
    className,
    "aria-label": ariaLabel,
  } = props;
  const isRange = props.mode === "range";
  const isWeek = props.mode === "week";
  const isMultiple = props.mode === "multiple";
  const count = Math.max(1, Math.floor(numberOfMonths));
  const minNights = isRange ? ((props as CalendarRangeProps).minNights ?? 0) : 0;
  const maxNights = isRange ? (props as CalendarRangeProps).maxNights : undefined;
  // Taller cells only when there is something to put under the number.
  const tall = !!getDayMeta;

  const uid = useId();
  const reduce = useReducedMotion();

  // ── selection ──
  const [internalValue, setInternalValue] = useState<
    Date | DateRange | WeekRange | Date[] | null
  >(props.defaultValue ?? null);
  const valueControlled = props.value !== undefined;
  const value = valueControlled ? (props.value ?? null) : internalValue;
  const single =
    isRange || isWeek || isMultiple ? null : (value as Date | null);
  const range = isRange ? (value as DateRange | null) : null;
  const week = isWeek ? (value as WeekRange | null) : null;
  const picked = isMultiple ? ((value as Date[] | null) ?? []) : [];
  const isPicked = (d: Date) => picked.some((p) => sameDay(p, d));

  // ── visible months ──
  const anchor = single ?? range?.from ?? week?.from ?? picked[0] ?? null;
  const [internalMonth, setInternalMonth] = useState(() =>
    startOfMonth(defaultMonth ?? anchor ?? new Date()),
  );
  const month = controlledMonth
    ? startOfMonth(controlledMonth)
    : internalMonth;
  const [direction, setDirection] = useState(1);
  const lastMonth = addMonths(month, count - 1);
  const inWindow = (d: Date) => {
    const m = startOfMonth(d);
    return m >= month && m <= lastMonth;
  };

  const setMonth = useCallback(
    (next: Date) => {
      const m = startOfMonth(next);
      if (sameMonth(m, month)) return;
      setDirection(m > month ? 1 : -1);
      if (!controlledMonth) setInternalMonth(m);
      onMonthChange?.(m);
    },
    [month, controlledMonth, onMonthChange],
  );

  // "Today" is read after mount: the server's clock and timezone can disagree
  // with the viewer's, and a mismatched marker would break hydration.
  const [today, setToday] = useState<Date | null>(null);
  useEffect(() => setToday(startOfDay(new Date())), []);

  // ── roving focus ──
  const [focused, setFocused] = useState<Date>(() =>
    startOfDay(anchor ?? defaultMonth ?? new Date()),
  );
  const gridRef = useRef<HTMLDivElement>(null);
  const shouldFocus = useRef(false);
  // Range hover preview: the band follows the pointer until the end is picked.
  // In week mode it is the row under the pointer or keyboard focus.
  const [hovered, setHovered] = useState<Date | null>(null);

  // Keep the tab stop inside the visible months when they change by buttons.
  const focusInMonth = inWindow(focused)
    ? focused
    : anchor && inWindow(anchor)
      ? anchor
      : month;

  useEffect(() => {
    if (!shouldFocus.current) return;
    shouldFocus.current = false;
    gridRef.current
      ?.querySelector<HTMLButtonElement>(
        `[data-month="${monthKey(focusInMonth)}"] [data-date="${dayKey(focusInMonth)}"]`,
      )
      ?.focus();
  }, [focusInMonth]);

  const isDisabled = useCallback(
    (d: Date) =>
      (minDate && d < startOfDay(minDate)) ||
      (maxDate && d > startOfDay(maxDate)) ||
      !!isDateDisabled?.(d) ||
      !!getDayMeta?.(d)?.disabled,
    [minDate, maxDate, isDateDisabled, getDayMeta],
  );

  // While a range end is being chosen, days that would make it too short or
  // too long are blocked (earlier days stay open: they restart the range).
  const choosingEnd = !!range && !range.to;
  const nightsAllowed = (n: number) =>
    n >= minNights && (maxNights === undefined || n <= maxNights);
  const blockedByNights = (d: Date) =>
    choosingEnd &&
    !!range &&
    d > range.from &&
    !nightsAllowed(daysBetween(range.from, d));

  const weekStart = (d: Date) =>
    addDays(d, -((d.getDay() - weekStartsOn + 7) % 7));

  const select = (d: Date) => {
    if (isDisabled(d) || blockedByNights(d)) return;
    if (!inWindow(d)) setMonth(d);
    setFocused(d);

    if (isWeek) {
      const from = weekStart(d);
      const next: WeekRange = { from, to: addDays(from, 6) };
      if (!valueControlled) setInternalValue(next);
      (props as CalendarWeekProps).onValueChange?.(next);
      return;
    }

    if (isMultiple) {
      const max = (props as CalendarMultipleProps).max;
      const next = isPicked(d)
        ? picked.filter((p) => !sameDay(p, d))
        : max !== undefined && picked.length >= max
          ? null
          : [...picked, d].sort((a, b) => a.getTime() - b.getTime());
      if (!next) return;
      if (!valueControlled) setInternalValue(next);
      (props as CalendarMultipleProps).onValueChange?.(next);
      return;
    }
    if (!isRange) {
      if (!valueControlled) setInternalValue(d);
      (props as CalendarSingleProps).onValueChange?.(d);
      return;
    }
    // First click starts a range; a later day closes it; an earlier day, the
    // start again when it would be too short, or a click on a finished range
    // starts over.
    const next: DateRange =
      range &&
      !range.to &&
      d >= range.from &&
      nightsAllowed(daysBetween(range.from, d))
        ? { from: range.from, to: d }
        : { from: d };
    if (!valueControlled) setInternalValue(next);
    (props as CalendarRangeProps).onValueChange?.(next);
  };

  const onGridKeyDown = (e: KeyboardEvent) => {
    const base = focusInMonth;
    let next: Date | null = null;
    switch (e.key) {
      case "ArrowLeft":
        next = addDays(base, -1);
        break;
      case "ArrowRight":
        next = addDays(base, 1);
        break;
      case "ArrowUp":
        next = addDays(base, -7);
        break;
      case "ArrowDown":
        next = addDays(base, 7);
        break;
      case "Home":
        next = addDays(base, -((base.getDay() - weekStartsOn + 7) % 7));
        break;
      case "End":
        next = addDays(base, 6 - ((base.getDay() - weekStartsOn + 7) % 7));
        break;
      case "PageUp":
        next = addMonths(base, e.shiftKey ? -12 : -1);
        break;
      case "PageDown":
        next = addMonths(base, e.shiftKey ? 12 : 1);
        break;
      default:
        return;
    }
    e.preventDefault();
    shouldFocus.current = true;
    setFocused(next);
    // Scroll the window only when focus leaves it, by as little as needed.
    if (!inWindow(next))
      setMonth(next < month ? next : addMonths(startOfMonth(next), 1 - count));
  };

  // ── labels ──
  const monthFormat = useMemo(
    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
    [locale],
  );
  const weekdays = useMemo(() => {
    const short = new Intl.DateTimeFormat(locale, { weekday: "short" });
    const long = new Intl.DateTimeFormat(locale, { weekday: "long" });
    // 2023-01-01 was a Sunday.
    return Array.from({ length: 7 }, (_, i) => {
      const d = new Date(2023, 0, 1 + ((i + weekStartsOn) % 7));
      return { short: short.format(d).slice(0, 2), long: long.format(d) };
    });
  }, [locale, weekStartsOn]);
  const dayLabel = useMemo(
    () =>
      new Intl.DateTimeFormat(locale, {
        weekday: "long",
        day: "numeric",
        month: "long",
        year: "numeric",
      }),
    [locale],
  );

  const prevDisabled =
    !!minDate && startOfMonth(minDate) >= month;
  const nextDisabled =
    !!maxDate && startOfMonth(maxDate) <= lastMonth;

  // Range band end: the picked end, or the hovered day while choosing one.
  // A day that can't close the range doesn't stretch the band to it.
  const bandEnd =
    range &&
    !range.to &&
    hovered &&
    hovered > range.from &&
    !isDisabled(hovered) &&
    !blockedByNights(hovered)
      ? hovered
      : range?.to;
  // Week mode: the row being previewed (pointer or keyboard focus).
  const previewWeek = isWeek && hovered ? weekStart(hovered) : null;

  const navButton =
    "inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40";

  const months = Array.from({ length: count }, (_, i) => addMonths(month, i));
  // Weekday index of the column, so connecting bands stop at the row ends.
  const column = (d: Date) => (d.getDay() - weekStartsOn + 7) % 7;
  const cellSize = tall ? "h-12 w-10" : "size-9";

  return (
    <div
      className={cn(
        "w-fit rounded-2xl border border-border bg-card p-3 text-foreground",
        className,
      )}
    >
      <div
        ref={gridRef}
        onPointerLeave={() => setHovered(null)}
        className="flex flex-col gap-x-6 gap-y-4 sm:flex-row"
      >
        {months.map((m, i) => {
          const mk = monthKey(m);
          const weeks = buildWeeks(m, weekStartsOn);
          const labelId = `${uid}-label-${i}`;
          return (
            <div
              // biome-ignore lint/suspicious/noArrayIndexKey: columns are positional; each keeps its own month transition.
              key={i}
              className="min-w-0"
            >
              <div className="mb-2 flex items-center justify-between gap-2 px-1">
                {i === 0 ? (
                  <button
                    type="button"
                    aria-label="Previous month"
                    disabled={prevDisabled}
                    onClick={() => setMonth(addMonths(month, -1))}
                    className={navButton}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </button>
                ) : (
                  <span aria-hidden className="size-8" />
                )}
                <h2
                  id={labelId}
                  aria-live={i === 0 ? "polite" : undefined}
                  className="text-sm font-medium tabular-nums"
                >
                  {monthFormat.format(m)}
                </h2>
                {i === count - 1 ? (
                  <button
                    type="button"
                    aria-label="Next month"
                    disabled={nextDisabled}
                    onClick={() => setMonth(addMonths(month, 1))}
                    className={navButton}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </button>
                ) : (
                  <span aria-hidden className="size-8" />
                )}
              </div>

              <div className="relative overflow-hidden">
                <AnimatePresence
                  initial={false}
                  mode="popLayout"
                  custom={direction}
                >
                  <motion.table
                    key={mk}
                    data-month={mk}
                    custom={direction}
                    aria-labelledby={ariaLabel ? undefined : labelId}
                    aria-label={ariaLabel ? `${ariaLabel}, ${monthFormat.format(m)}` : undefined}
                    onKeyDown={onGridKeyDown}
                    variants={{
                      enter: (dir: number) => ({
                        opacity: 0,
                        x: reduce ? 0 : dir * 28,
                        filter: reduce ? "blur(0px)" : "blur(4px)",
                      }),
                      center: {
                        opacity: 1,
                        x: 0,
                        filter: "blur(0px)",
                        transition: MONTH_ENTER,
                      },
                      exit: (dir: number) => ({
                        opacity: 0,
                        x: reduce ? 0 : dir * -28,
                        filter: reduce ? "blur(0px)" : "blur(4px)",
                        transition: MONTH_EXIT,
                      }),
                    }}
                    initial="enter"
                    animate="center"
                    exit="exit"
                    className="border-collapse"
                  >
                    <thead>
                      <tr>
                        {showWeekNumber && (
                          <th
                            scope="col"
                            abbr="Week"
                            className="h-8 w-8 text-[11px] font-medium text-muted-foreground/70"
                          >
                            Wk
                          </th>
                        )}
                        {weekdays.map((w) => (
                          <th
                            key={w.long}
                            scope="col"
                            abbr={w.long}
                            className={cn(
                              "h-8 text-[11px] font-medium text-muted-foreground",
                              tall ? "w-10" : "w-9",
                            )}
                          >
                            {w.short}
                          </th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {weeks.map((row) => {
                        // Days this row actually draws: side-by-side months
                        // leave the other month's days blank.
                        const shown =
                          count > 1 ? row.filter((d) => sameMonth(d, m)) : row;
                        const weekSelected =
                          !!week && sameDay(row[0], weekStart(week.from));
                        const weekPreview =
                          !weekSelected && sameDay(row[0], previewWeek);
                        // ISO weeks run Monday–Sunday; the row's Thursday
                        // decides which one a differently started row is.
                        const thursday =
                          row.find((d) => d.getDay() === 4) ?? row[0];
                        return (
                          <tr key={dayKey(row[0])}>
                            {showWeekNumber && (
                              <th
                                scope="row"
                                className={cn(
                                  "p-0 text-center text-[11px] font-normal tabular-nums transition-colors",
                                  weekSelected
                                    ? "font-medium text-foreground"
                                    : "text-muted-foreground/70",
                                )}
                              >
                                {shown.length > 0 ? isoWeek(thursday) : null}
                              </th>
                            )}
                            {row.map((d) => {
                              const outside = !sameMonth(d, m);
                              // Side-by-side months would show these days twice.
                              if (outside && count > 1)
                                return (
                                  <td key={dayKey(d)} className="p-0">
                                    <span className={cn("block", cellSize)} />
                                  </td>
                                );
                              const meta = getDayMeta?.(d) ?? null;
                              const disabled = isDisabled(d);
                              const nightsBlocked =
                                !disabled && blockedByNights(d);
                              const isToday = sameDay(d, today);
                              const isFrom = sameDay(d, range?.from);
                              const isTo = sameDay(d, bandEnd);
                              const inBand =
                                !!range?.from &&
                                !!bandEnd &&
                                d > range.from &&
                                d < bandEnd;
                              const chosen = isMultiple && isPicked(d);
                              const inWeek =
                                !!week &&
                                d >= startOfDay(week.from) &&
                                d <= startOfDay(week.to);
                              const selected = isRange
                                ? isFrom || (isTo && !!range?.to)
                                : isWeek
                                  ? inWeek
                                  : isMultiple
                                    ? chosen
                                    : sameDay(d, single);
                              const endpoint = isFrom || isTo;
                              // Picked neighbours in the same row merge into one
                              // pill, so a run of days reads as a block.
                              const joinPrev =
                                chosen &&
                                column(d) > 0 &&
                                sameMonth(addDays(d, -1), m) &&
                                isPicked(addDays(d, -1));
                              const joinNext =
                                chosen &&
                                column(d) < 6 &&
                                sameMonth(addDays(d, 1), m) &&
                                isPicked(addDays(d, 1));
                              // The week pill lives in the row's first drawn
                              // cell and spans every drawn day after it.
                              const weekPill =
                                isWeek &&
                                (weekSelected || weekPreview) &&
                                sameDay(d, shown[0]);

                              return (
                                <td key={dayKey(d)} className="relative p-0">
                                  {(inBand ||
                                    (endpoint &&
                                      bandEnd &&
                                      !sameDay(range?.from, bandEnd))) && (
                                    <span
                                      aria-hidden
                                      className={cn(
                                        "absolute inset-y-0.5 bg-primary/10",
                                        inBand && "inset-x-0",
                                        isFrom && "left-1/2 right-0",
                                        isTo && "left-0 right-1/2",
                                      )}
                                    />
                                  )}
                                  {weekPill && (
                                    <motion.span
                                      aria-hidden
                                      // Selected and previewed rows each glide
                                      // between weeks, scoped per month.
                                      layoutId={`${uid}-${mk}-${weekSelected ? "week" : "week-preview"}`}
                                      transition={
                                        reduce ? { duration: 0 } : SPRING_LAYOUT
                                      }
                                      style={{ width: `${shown.length * 100}%` }}
                                      className={cn(
                                        "pointer-events-none absolute inset-y-0 left-0 rounded-lg",
                                        weekSelected ? "bg-primary" : "bg-muted",
                                      )}
                                    />
                                  )}
                                  <button
                                    type="button"
                                    data-date={dayKey(d)}
                                    tabIndex={
                                      sameDay(d, focusInMonth) && !outside
                                        ? 0
                                        : -1
                                    }
                                    aria-label={
                                      meta?.label
                                        ? `${dayLabel.format(d)}, ${meta.label}`
                                        : dayLabel.format(d)
                                    }
                                    aria-pressed={selected}
                                    aria-disabled={
                                      disabled || nightsBlocked || undefined
                                    }
                                    aria-current={isToday ? "date" : undefined}
                                    title={
                                      nightsBlocked
                                        ? daysBetween(range?.from ?? d, d) <
                                          minNights
                                          ? `Minimum ${minNights} nights`
                                          : `Maximum ${maxNights} nights`
                                        : undefined
                                    }
                                    onClick={() => select(d)}
                                    onFocus={() => {
                                      setFocused(d);
                                      if (isWeek) setHovered(d);
                                    }}
                                    onBlur={() => isWeek && setHovered(null)}
                                    onPointerEnter={() =>
                                      (isRange || isWeek) && setHovered(d)
                                    }
                                    className={cn(
                                      "relative isolate flex items-center justify-center rounded-lg text-sm tabular-nums outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
                                      cellSize,
                                      tall && "flex-col gap-0.5",
                                      outside
                                        ? "text-muted-foreground/50"
                                        : "text-foreground",
                                      !selected &&
                                        !disabled &&
                                        !nightsBlocked &&
                                        !isWeek &&
                                        "hover:bg-muted",
                                      selected && "text-primary-foreground",
                                      selected &&
                                        outside &&
                                        "text-primary-foreground/60",
                                      isTo && !range?.to && "text-foreground",
                                      nightsBlocked &&
                                        "cursor-not-allowed text-muted-foreground/40",
                                      disabled &&
                                        "cursor-not-allowed text-muted-foreground/40 line-through",
                                    )}
                                  >
                                    {selected &&
                                      !isWeek &&
                                      (isRange || isMultiple ? (
                                        <motion.span
                                          aria-hidden
                                          initial={
                                            reduce ? false : { scale: 0.7 }
                                          }
                                          animate={{ scale: 1 }}
                                          transition={SPRING_PRESS}
                                          className={cn(
                                            "absolute inset-0 -z-10 rounded-lg bg-primary",
                                            joinPrev && "rounded-l-none",
                                            joinNext && "rounded-r-none",
                                          )}
                                        />
                                      ) : (
                                        <motion.span
                                          aria-hidden
                                          // Scoped per month so the pill glides
                                          // between days but never across the
                                          // sliding grids.
                                          layoutId={`${uid}-${mk}-selected`}
                                          transition={
                                            reduce
                                              ? { duration: 0 }
                                              : SPRING_LAYOUT
                                          }
                                          className="absolute inset-0 -z-10 rounded-lg bg-primary"
                                        />
                                      ))}
                                    {isTo && !range?.to && (
                                      <span
                                        aria-hidden
                                        className="absolute inset-0 -z-10 rounded-lg border border-primary/40"
                                      />
                                    )}
                                    {tall ? (
                                      <span className="leading-none">
                                        {d.getDate()}
                                      </span>
                                    ) : (
                                      d.getDate()
                                    )}
                                    {tall && (
                                      <span
                                        aria-hidden
                                        className={cn(
                                          "h-2.5 text-[10px] leading-none",
                                          meta?.tone === "accent"
                                            ? // Tinted toward the foreground so
                                              // the green keeps contrast on
                                              // light and dark cards.
                                              "font-medium text-[color:color-mix(in_oklab,var(--chart-3)_70%,var(--foreground))]"
                                            : meta?.tone === "muted"
                                              ? "text-muted-foreground/60"
                                              : "text-muted-foreground",
                                          selected &&
                                            "text-primary-foreground/75",
                                          (disabled || nightsBlocked) &&
                                            "text-muted-foreground/40",
                                        )}
                                      >
                                        {meta?.label}
                                      </span>
                                    )}
                                    {isToday && (
                                      <span
                                        aria-hidden
                                        className={cn(
                                          "absolute size-1 rounded-full",
                                          tall ? "top-1.5 right-1.5" : "bottom-1",
                                          selected
                                            ? "bg-primary-foreground"
                                            : "bg-primary",
                                        )}
                                      />
                                    )}
                                  </button>
                                </td>
                              );
                            })}
                          </tr>
                        );
                      })}
                    </tbody>
                  </motion.table>
                </AnimatePresence>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

"use client";

import {
  CartesianChart,
  type CartesianChartProps,
} from "@/components/motion/chart/cartesian";

export interface AreaChartProps extends CartesianChartProps {
  /** Gradient fades toward the baseline; solid keeps one translucent tone. */
  fill?: "gradient" | "solid";
}

/**
 * Volume over time: filled areas (overlapping or stacked) that rise from the
 * baseline as their lines draw in, on scroll and whenever the range changes,
 * with a snapping cursor and one tooltip for every series.
 */
export function AreaChart(props: AreaChartProps) {
  return <CartesianChart type="area" {...props} />;
}

"use client";

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type ReactNode, useEffect, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type ChartSeries = {
  /** Key of the value in each datum. */
  key: string;
  label: string;
  /** Any CSS color. Default: the next `--chart-N` slot, in fixed order. */
  color?: string;
};

export type ChartDatum = Record<string, string | number>;

/** "natural" is a monotone curve: smooth, but never overshoots a data point. */
export type ChartCurve = "natural" | "linear" | "step";

export type TooltipIndicator = "dot" | "line" | "dashed";

// Fixed categorical order, validated for colorblind and normal-vision
// separation (light and dark steps live in the theme's --chart-* tokens).
// Fallbacks are the light steps, for projects without the theme layer.
const SLOT_FALLBACKS = ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4"];

/** Color for slot `index`; color follows the series, never its rank. */
export function seriesColor(series: { color?: string }, index: number) {
  if (series.color) return series.color;
  const slot = index % SLOT_FALLBACKS.length;
  return `var(--chart-${slot + 1}, ${SLOT_FALLBACKS[slot]})`;
}

/**
 * Layout width of the element given the returned ref. ResizeObserver reports
 * the untransformed box, unlike getBoundingClientRect (react-use-measure), so a
 * chart inside a scaled container (thumbnails, zoomed stages) still fills it.
 */
export function useChartWidth<T extends Element = HTMLDivElement>() {
  const [el, setEl] = useState<T | null>(null);
  const [width, setWidth] = useState(0);
  useEffect(() => {
    if (!el) return;
    const observer = new ResizeObserver(([entry]) =>
      setWidth(entry.contentRect.width),
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [el]);
  return [setEl, width] as const;
}

// A fixed locale keeps server and client output identical for hydration.
const FULL = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
const COMPACT = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 1,
});
export const formatFull = (n: number) => FULL.format(n);
export const formatCompact = (n: number) => COMPACT.format(n);

/** Round tick values covering [min, max], about `count` of them. */
export function niceTicks(min: number, max: number, count = 4) {
  if (min === max) max = min + 1;
  const raw = (max - min) / count;
  const mag = 10 ** Math.floor(Math.log10(raw));
  const step =
    [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => s >= raw) ?? 10 * mag;
  const start = Math.floor(min / step) * step;
  const end = Math.ceil(max / step) * step;
  const ticks: number[] = [];
  for (let v = start; v <= end + step / 2; v += step) {
    ticks.push(Number(v.toFixed(10)));
  }
  return ticks;
}

/** Keep every k-th label so neighbours stay at least `minGap` px apart. */
export function labelStride(count: number, width: number, minGap = 56) {
  return Math.max(1, Math.ceil(count / Math.max(1, Math.floor(width / minGap))));
}

/** Approximate gutter for axis labels at 12px. */
export function gutterFor(labels: string[]) {
  return Math.max(...labels.map((l) => l.length), 1) * 7 + 12;
}

type Point = [number, number];

/** SVG path through `points` (sorted by x) with the given curve. */
export function curvePath(points: Point[], curve: ChartCurve) {
  if (points.length === 0) return "";
  const [x0, y0] = points[0];
  if (points.length === 1) return `M${x0},${y0}`;
  if (curve === "step") {
    // Changes value halfway between points, like a stepped series.
    let d = `M${x0},${y0}`;
    for (let i = 1; i < points.length; i++) {
      const [px] = points[i - 1];
      const [x, y] = points[i];
      const mid = (px + x) / 2;
      d += `H${mid}V${y}H${x}`;
    }
    return d;
  }
  if (curve === "linear" || points.length < 3) {
    return points.map(([x, y], i) => `${i ? "L" : "M"}${x},${y}`).join("");
  }
  // Monotone cubic (Fritsch–Carlson): tangents are clamped so the curve stays
  // between its neighbours and never invents a peak the data doesn't have.
  const n = points.length;
  const slopes: number[] = [];
  for (let i = 0; i < n - 1; i++) {
    const dx = points[i + 1][0] - points[i][0];
    slopes.push(dx ? (points[i + 1][1] - points[i][1]) / dx : 0);
  }
  const tangents = points.map((_, i) => {
    if (i === 0) return slopes[0];
    if (i === n - 1) return slopes[n - 2];
    const a = slopes[i - 1];
    const b = slopes[i];
    return a * b <= 0 ? 0 : (a + b) / 2;
  });
  for (let i = 0; i < n - 1; i++) {
    const m = slopes[i];
    if (m === 0) {
      tangents[i] = 0;
      tangents[i + 1] = 0;
      continue;
    }
    const a = tangents[i] / m;
    const b = tangents[i + 1] / m;
    const s = a * a + b * b;
    if (s > 9) {
      const t = 3 / Math.sqrt(s);
      tangents[i] = t * a * m;
      tangents[i + 1] = t * b * m;
    }
  }
  let d = `M${x0},${y0}`;
  for (let i = 0; i < n - 1; i++) {
    const [xa, ya] = points[i];
    const [xb, yb] = points[i + 1];
    const h = (xb - xa) / 3;
    d += `C${xa + h},${ya + tangents[i] * h} ${xb - h},${yb - tangents[i + 1] * h} ${xb},${yb}`;
  }
  return d;
}

// ── tooltip ────────────────────────────────────────────────────────────────

export type TooltipRow = { label: string; value: string; color: string };

function Indicator({ kind, color }: { kind: TooltipIndicator; color: string }) {
  return (
    <span
      aria-hidden
      className={cn(
        "shrink-0 rounded-[2px]",
        kind === "dot" && "size-2.5",
        kind === "line" && "w-1 self-stretch",
        kind === "dashed" && "w-0 self-stretch border-[1.5px] border-dashed",
      )}
      style={
        kind === "dashed" ? { borderColor: color } : { background: color }
      }
    />
  );
}

/**
 * Compact readout that springs between data positions: an optional label,
 * then one row per series with a colored indicator, the name and the value.
 */
export function ChartTooltip({
  open,
  x,
  y,
  width,
  label,
  rows,
  indicator = "dot",
}: {
  open: boolean;
  /** Anchor in px, relative to the chart's positioned wrapper. */
  x: number;
  y: number;
  /** Wrapper width, to flip the tooltip before it overflows the edge. */
  width: number;
  label?: string;
  rows: TooltipRow[];
  indicator?: TooltipIndicator;
}) {
  const reduce = useReducedMotion();
  const flip = x > width / 2;
  return (
    <AnimatePresence>
      {open && (
        <motion.div
          aria-hidden
          initial={{ opacity: 0, x, y, scale: reduce ? 1 : 0.96 }}
          animate={{ opacity: 1, x, y, scale: 1 }}
          exit={{ opacity: 0, scale: reduce ? 1 : 0.96, transition: { duration: 0.1 } }}
          transition={
            reduce
              ? { duration: 0 }
              : {
                  opacity: { duration: 0.12 },
                  scale: { duration: 0.15, ease: EASE_OUT },
                  // Tracks the pointer between data positions; firm enough to
                  // never trail behind a quick sweep.
                  default: { type: "spring", stiffness: 520, damping: 42 },
                }
          }
          className="pointer-events-none absolute top-0 left-0 z-10"
        >
          <div
            className={cn(
              "grid min-w-32 -translate-y-1/2 gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1.5 text-xs shadow-xl",
              flip ? "-translate-x-[calc(100%+12px)]" : "translate-x-3",
            )}
          >
            {label ? (
              <p className="font-medium text-foreground">{label}</p>
            ) : null}
            {rows.map((row) => (
              <div key={row.label} className="flex items-stretch gap-2">
                <Indicator kind={indicator} color={row.color} />
                <div className="flex flex-1 items-center justify-between gap-4 leading-none">
                  <span className="text-muted-foreground">{row.label}</span>
                  <span className="font-mono font-medium tabular-nums text-foreground">
                    {row.value}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

// ── legend & table ─────────────────────────────────────────────────────────

export function ChartLegend({
  items,
  className,
}: {
  items: { label: string; color: string }[];
  className?: string;
}) {
  return (
    <ul
      className={cn(
        "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3 text-xs text-muted-foreground",
        className,
      )}
    >
      {items.map((item) => (
        <li key={item.label} className="flex items-center gap-1.5">
          <span
            aria-hidden
            className="size-2 shrink-0 rounded-[2px]"
            style={{ background: item.color }}
          />
          {item.label}
        </li>
      ))}
    </ul>
  );
}

/** The table view: every value reachable without hovering or seeing color. */
export function ChartTable({
  caption,
  head,
  rows,
}: {
  caption: string;
  head: string[];
  rows: ReactNode[][];
}) {
  // The wrapper is what hides it: a <caption> escapes a visually hidden
  // table's clip and would otherwise paint over the chart.
  return (
    <div className="sr-only">
      <table>
        <caption>{caption}</caption>
        <thead>
          <tr>
            {head.map((h) => (
              <th key={h} scope="col">
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, r) => (
            // biome-ignore lint/suspicious/noArrayIndexKey: rows mirror data order and never reorder.
            <tr key={r}>
              {row.map((cell, c) =>
                c === 0 ? (
                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed column order.
                  <th key={c} scope="row">
                    {cell}
                  </th>
                ) : (
                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed column order.
                  <td key={c}>{cell}</td>
                ),
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/** Shared entrance timing: marks grow once the chart scrolls into view. */
export const GROW = { duration: 0.7, ease: EASE_OUT } as const;

/** Arrow-key stepping shared by every chart that reads positions. */
export function stepIndex(
  key: string,
  current: number | null,
  count: number,
  wrap = false,
) {
  const forward = key === "ArrowRight" || key === "ArrowDown";
  const back = key === "ArrowLeft" || key === "ArrowUp";
  if (!forward && !back) return undefined;
  if (current === null) return forward ? 0 : count - 1;
  const next = current + (forward ? 1 : -1);
  if (wrap) return (next + count) % count;
  return Math.min(count - 1, Math.max(0, next));
}