Overview

import {
  Badge,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Sparkline,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  UsageMeterCircular,
  UsageMeterLinear,
} from "@cronus-ui/ui";
import { CURRENT_PLAN_ID, planById, USAGE_METERS } from "../lib/demo-saas.js";

// Sparkline chrome is presentational (not data): bind by index so labels stay in the lib.
const METER_DELTAS = ["+12%", "+6%", "+3%"] as const;
const METER_TONES = ["success", "primary", "info"] as const;
const METER_TRENDS = [
  [42, 48, 45, 53, 60, 58, 67, 74, 82],
  [60, 58, 62, 59, 64, 70, 68, 73, 78],
  [70, 72, 69, 74, 73, 76, 75, 79, 81],
] as const;

const usageCards = USAGE_METERS.map((meter, i) => ({
  ...meter,
  delta: METER_DELTAS[i] ?? "",
  trend: [...(METER_TRENDS[i] ?? [])],
  tone: METER_TONES[i] ?? "primary",
}));

const currentPlan = planById(CURRENT_PLAN_ID);
const apiMeter = USAGE_METERS.find((m) => m.id === "usage-api");

const topResources = [
  { id: "res-edge", name: "Edge functions", share: "38%" },
  { id: "res-db", name: "Database reads", share: "27%" },
  { id: "res-media", name: "Media delivery", share: "21%" },
];

export function UsageDashboardBlock() {
  return (
    <section aria-label="Usage dashboard" className="mx-auto flex w-full max-w-3xl flex-col gap-6">
      <div className="grid gap-4 sm:grid-cols-3">
        {usageCards.map(({ id, label, display, delta, trend, tone }) => (
          <Card key={id} className="gap-4 shadow-sm">
            <CardContent className="flex flex-col gap-3">
              <div className="flex items-center justify-between">
                <span className="text-sm text-fg-secondary">{label}</span>
                <Badge variant="success">{delta}</Badge>
              </div>
              <span className="font-display text-2xl font-semibold text-fg">{display}</span>
              <Sparkline
                data={trend}
                tone={tone}
                area
                width={120}
                height={36}
                className="w-full"
                aria-label={`${label} trend`}
              />
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid gap-6 sm:grid-cols-[1fr_auto] sm:items-center">
        <Card className="shadow-md">
          <CardHeader>
            <CardTitle className="font-display text-lg">Plan usage</CardTitle>
            <p className="col-span-full text-sm text-fg-secondary">
              Resets Jul 1, 2026 · {currentPlan?.name} plan quotas.
            </p>
          </CardHeader>
          <CardContent className="flex flex-col gap-5">
            {USAGE_METERS.map(({ id, label, used, limit }) => (
              <UsageMeterLinear key={id} label={label} value={used} max={limit} />
            ))}
          </CardContent>
        </Card>
        <Card className="shadow-md">
          <CardContent className="flex items-center justify-center py-6">
            {apiMeter ? (
              <UsageMeterCircular
                value={apiMeter.used / 1000}
                max={apiMeter.limit / 1000}
                label={apiMeter.label}
                unit="K"
                size={120}
              />
            ) : null}
          </CardContent>
        </Card>
      </div>

      <Card className="gap-0 pb-0 shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Top resources</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">By share of total usage.</p>
        </CardHeader>
        <CardContent className="px-0 pt-2">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="pl-4 sm:pl-6">Resource</TableHead>
                <TableHead className="pr-4 text-right sm:pr-6">Share</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {topResources.map((resource) => (
                <TableRow key={resource.id}>
                  <TableCell className="pl-4 font-medium text-fg sm:pl-6">
                    {resource.name}
                  </TableCell>
                  <TableCell className="pr-4 text-right text-fg-secondary tabular-nums sm:pr-6">
                    {resource.share}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </section>
  );
}