System status

"use client";

import * as React from "react";
import { CheckCircle2 } from "lucide-react";
import { Timeline } from "@/components/ui/timeline";
import { UptimeBar, type UptimeDay } from "@/components/ui/uptime-bar";

const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
function days(incidents: Record<number, ["degraded" | "down", string]>): UptimeDay[] {
  return Array.from({ length: 60 }, (_, i) => {
    const d = new Date(2026, 9, 7 - (59 - i));
    const inc = incidents[i];
    return { date: `${MONTHS[d.getMonth()]} ${d.getDate()}, 2026`, status: inc ? inc[0] : "up", note: inc?.[1] };
  });
}

const SERVICES = [
  { name: "API", days: days({ 41: ["degraded", "Elevated latency for 18 min"] }) },
  { name: "Dashboard", days: days({}) },
  { name: "Webhooks", days: days({ 52: ["down", "Deliveries delayed 42 min"], 53: ["degraded", "Backlog drained"] }) },
  { name: "Payments", days: days({ 12: ["degraded", "Card network errors 9 min"] }) },
  { name: "CDN", days: days({}) },
];

/** A public status page: overall state, 60-day uptime per service, and incident history. */
export function SystemStatus() {
  return (
    <div className="w-full overflow-hidden rounded-xl border border-border bg-background">
      <div className="flex items-center gap-3 border-b border-border bg-emerald-500/8 px-5 py-4">
        <CheckCircle2 className="size-5 text-emerald-500" />
        <div>
          <p className="font-semibold">All systems operational</p>
          <p className="text-xs text-muted-foreground">Updated 1 minute ago</p>
        </div>
      </div>
      <div className="space-y-6 p-5">
        {SERVICES.map((s) => <UptimeBar key={s.name} name={s.name} days={s.days} />)}
      </div>
      <section className="border-t border-border p-5">
        <h3 className="mb-4 text-sm font-medium">Past incidents</h3>
        <Timeline
          items={[
            { id: "1", tone: "success", title: <span className="font-medium">Webhook delivery delays: resolved</span>, time: "Sep 30", description: "A queue worker ran out of memory after a deploy. We rolled back and drained the backlog; no events were lost." },
            { id: "2", tone: "warning", title: <span className="font-medium">Elevated API latency</span>, time: "Sep 18", description: "p95 latency rose to 1.2s for 18 minutes during a database failover." },
            { id: "3", tone: "warning", title: <span className="font-medium">Card payment errors</span>, time: "Aug 20", description: "An upstream card network returned errors for 9 minutes. Retries succeeded." },
          ]}
        />
      </section>
    </div>
  );
}

export default SystemStatus;