Day-grouped timeline

import {
  Avatar,
  AvatarFallback,
  Badge,
  Button,
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Separator,
} from "@cronus-ui/ui";
import { Download } from "lucide-react";

interface AuditEvent {
  id: string;
  actor: string;
  initials: string;
  action: string;
  object: string;
  detail: string;
  time: string;
  severity: "Critical" | "Warning" | "Info";
  severityVariant: "destructive" | "warning" | "secondary";
}

interface AuditDay {
  id: string;
  label: string;
  events: AuditEvent[];
}

const auditDays: AuditDay[] = [
  {
    id: "jul-13",
    label: "Today · July 13, 2026",
    events: [
      { id: "evt-901", actor: "Ingrid Solberg", initials: "IS", action: "changed the role of", object: "Felix Weber", detail: "Viewer → Admin · Settings → Members", time: "14:32", severity: "Warning", severityVariant: "warning" },
      { id: "evt-897", actor: "Marcus Chen", initials: "MC", action: "rotated the API key", object: "prod-billing-service", detail: "Previous key revoked immediately", time: "11:05", severity: "Info", severityVariant: "secondary" },
      { id: "evt-894", actor: "Meridian Security", initials: "MS", action: "blocked 5 failed sign-in attempts for", object: "jonah.kaplan@meridianhq.com", detail: "IP 203.0.113.42 · London, United Kingdom", time: "09:47", severity: "Critical", severityVariant: "destructive" },
    ],
  },
  {
    id: "jul-12",
    label: "Yesterday · July 12, 2026",
    events: [
      { id: "evt-882", actor: "Amara Diallo", initials: "AD", action: "exported customer data from", object: "Contacts", detail: "12,408 rows · CSV", time: "17:21", severity: "Warning", severityVariant: "warning" },
      { id: "evt-871", actor: "Rosa Delgado", initials: "RD", action: "signed in from a new device in", object: "São Paulo, Brazil", detail: "Chrome on macOS · IP 198.51.100.9", time: "10:12", severity: "Info", severityVariant: "secondary" },
      { id: "evt-868", actor: "Ingrid Solberg", initials: "IS", action: "enforced two-factor authentication for", object: "all members", detail: "Grace period ends July 19", time: "08:30", severity: "Info", severityVariant: "secondary" },
    ],
  },
  {
    id: "jul-11",
    label: "July 11, 2026",
    events: [
      { id: "evt-859", actor: "Marcus Chen", initials: "MC", action: "deleted the webhook endpoint", object: "hooks.legacy.meridianhq.com", detail: "Endpoint had been failing for 14 days", time: "16:44", severity: "Warning", severityVariant: "warning" },
      { id: "evt-855", actor: "Felix Weber", initials: "FW", action: "accepted the invitation to", object: "Meridian HQ", detail: "Invited by Ingrid Solberg", time: "09:02", severity: "Info", severityVariant: "secondary" },
    ],
  },
];

export function AuditLogTimelineBlock() {
  return (
    <Card aria-label="Audit log" className="mx-auto w-full max-w-3xl gap-0 pb-0 shadow-md">
      <CardHeader>
        <CardTitle className="font-display text-lg">Audit log</CardTitle>
        <CardDescription>
          Security-relevant activity across the Meridian workspace.
        </CardDescription>
        <CardAction>
          <Button variant="outline" size="sm">
            <Download className="size-4" aria-hidden="true" />
            Export
          </Button>
        </CardAction>
      </CardHeader>

      <CardContent className="flex flex-col gap-6 py-6">
        {auditDays.map((day) => (
          <section key={day.id} aria-label={day.label} className="flex flex-col gap-4">
            <div className="flex items-center gap-3">
              <h3 className="shrink-0 text-xs font-medium uppercase tracking-wider text-fg-tertiary">
                {day.label}
              </h3>
              <Separator className="flex-1" />
            </div>
            <div className="relative">
              <span className="absolute inset-y-2 start-4 w-px bg-border" aria-hidden="true" />
              <ol className="flex flex-col gap-5">
                {day.events.map((event) => (
                  <li key={event.id} className="flex items-start gap-3">
                    <Avatar className="size-8 shrink-0">
                      <AvatarFallback className="text-xs">{event.initials}</AvatarFallback>
                    </Avatar>
                    <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                      <p className="text-sm leading-snug text-fg-secondary">
                        <span className="font-medium text-fg">{event.actor}</span> {event.action}{" "}
                        <span className="font-medium text-fg">{event.object}</span>
                      </p>
                      <p className="text-xs text-fg-tertiary">{event.detail}</p>
                    </div>
                    <div className="flex shrink-0 flex-col items-end gap-1">
                      <Badge variant={event.severityVariant}>{event.severity}</Badge>
                      <span className="text-xs tabular-nums text-fg-tertiary">{event.time}</span>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          </section>
        ))}
      </CardContent>

      <Separator />

      <CardFooter className="flex-wrap justify-between gap-3 py-4">
        <span className="text-xs text-fg-tertiary">Showing the last 3 days · 8 events</span>
        <Button variant="ghost" size="sm">
          View full log
        </Button>
      </CardFooter>
    </Card>
  );
}