Traffic overview

import {
  Badge,
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Metric,
  MetricDelta,
  MetricLabel,
  MetricValue,
  Progress,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Sparkline,
} from "@cronus-ui/ui";
import { KPIS } from "../lib/demo-saas.js";

interface BreakdownRow {
  id: string;
  label: string;
  value: string;
  share: number;
}

const KPI_TONES = ["primary", "info", "success", "warning"] as const;
const KPI_SERIES = [
  [86, 92, 88, 97, 104, 99, 112, 118, 115, 124],
  [58, 61, 60, 64, 66, 63, 68, 70, 69, 72],
  [238, 241, 246, 244, 252, 250, 258, 262, 266, 272],
  [44, 43, 43, 42, 41, 42, 40, 39, 39, 38],
];

const overviewKpis = KPIS.map((kpi, i) => ({
  ...kpi,
  tone: KPI_TONES[i] ?? "primary",
  series: KPI_SERIES[i] ?? [],
}));

const trafficSeries = [
  24100, 25800, 24900, 26400, 27200, 26100, 28900, 30400, 29800, 31500, 30900, 32800,
  34100, 33200, 35600, 34800, 36900, 38200, 37400, 39800, 38900, 41200, 40500, 42800,
  41900, 44100, 43600, 45900, 46800, 47900,
];

const topPages: BreakdownRow[] = [
  { id: "home", label: "/", value: "284,912", share: 100 },
  { id: "pricing", label: "/pricing", value: "191,204", share: 67 },
  { id: "docs", label: "/docs/getting-started", value: "121,880", share: 43 },
  { id: "blog", label: "/blog/series-b", value: "98,414", share: 35 },
  { id: "changelog", label: "/changelog", value: "64,206", share: 23 },
];

const topReferrers: BreakdownRow[] = [
  { id: "google", label: "google.com", value: "142,310", share: 100 },
  { id: "github", label: "github.com", value: "87,650", share: 62 },
  { id: "twitter", label: "x.com", value: "56,982", share: 40 },
  { id: "newsletter", label: "Newsletter", value: "41,225", share: 29 },
  { id: "producthunt", label: "producthunt.com", value: "18,940", share: 13 },
];

const breakdownLists = [
  { id: "pages", title: "Top pages", caption: "By views", rows: topPages },
  { id: "referrers", title: "Top referrers", caption: "By sessions", rows: topReferrers },
];

export function AnalyticsOverviewBlock() {
  return (
    <section
      aria-label="Analytics overview"
      className="mx-auto flex w-full max-w-6xl flex-col gap-4"
    >
      <header className="flex flex-wrap items-end justify-between gap-3">
        <div className="flex flex-col gap-1">
          <h2 className="font-display text-2xl font-semibold text-fg">Analytics</h2>
          <p className="text-sm text-fg-secondary">
            Product and marketing traffic across meridianhq.com.
          </p>
        </div>
        <Badge variant="success">Live</Badge>
      </header>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {overviewKpis.map((kpi) => (
          <Card key={kpi.label} className="gap-0 py-5">
            <CardContent className="flex items-end justify-between gap-3">
              <Metric className="gap-1.5">
                <MetricLabel>{kpi.label}</MetricLabel>
                <MetricValue className="text-2xl">{kpi.value}</MetricValue>
                <MetricDelta trend={kpi.trend}>{kpi.delta}</MetricDelta>
              </Metric>
              <Sparkline
                data={kpi.series}
                type="line"
                area
                tone={kpi.tone}
                width={96}
                height={40}
                className="h-10 w-24 shrink-0"
                aria-label={kpi.label + " trend over the last 10 weeks"}
              />
            </CardContent>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="font-display text-base">Traffic overview</CardTitle>
          <CardDescription>Daily sessions · Jun 14 – Jul 13</CardDescription>
          <CardAction>
            <Select defaultValue="30d">
              <SelectTrigger className="w-36" aria-label="Date range">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="7d">Last 7 days</SelectItem>
                <SelectItem value="30d">Last 30 days</SelectItem>
                <SelectItem value="90d">Last 90 days</SelectItem>
              </SelectContent>
            </Select>
          </CardAction>
        </CardHeader>
        <CardContent className="flex flex-col gap-2">
          <Sparkline
            data={trafficSeries}
            type="line"
            area
            tone="primary"
            width={720}
            height={176}
            strokeWidth={2}
            preserveAspectRatio="none"
            className="h-44 w-full"
            aria-label="Daily sessions, last 30 days, rising from 24,100 to 47,900"
          />
          <div className="flex items-center justify-between text-xs text-fg-tertiary">
            <span>Jun 14</span>
            <span>Jun 21</span>
            <span>Jun 28</span>
            <span>Jul 5</span>
            <span>Jul 13</span>
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-4 lg:grid-cols-2">
        {breakdownLists.map((list) => (
          <Card key={list.id} className="gap-0">
            <CardHeader>
              <CardTitle className="font-display text-base">{list.title}</CardTitle>
              <CardDescription>{list.caption}</CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col gap-4 pt-5">
              {list.rows.map((row) => (
                <div key={row.id} className="flex flex-col gap-1.5">
                  <div className="flex items-center justify-between gap-3 text-sm">
                    <span className="truncate font-medium text-fg">{row.label}</span>
                    <span className="shrink-0 tabular-nums text-fg-secondary">{row.value}</span>
                  </div>
                  <Progress
                    value={row.share}
                    aria-label={row.label + " share of traffic"}
                    className="h-1.5"
                  />
                </div>
              ))}
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}