Monitor card

"use client"

import * as React from "react"
import { Activity, BadgeCheck, Database, KeyRound, ShieldAlert, UserMinus } from "lucide-react"
import { MonitorCard, type MonitorFinding, type MonitorState } from "@/components/candor/monitor-card"

type Monitor = {
  id: string
  name: string
  category: string
  icon: typeof Activity
  watches: string
  runs: string
  alertWhen: string
  state: MonitorState
  on: boolean
  finding?: MonitorFinding
  lastRunAt?: string | null
  unavailable?: string
}

const hoursAgo = (h: number) => new Date(Date.now() - h * 3_600_000).toISOString()

const start: Monitor[] = [
  { id: "certs", name: "Certificate expiry", category: "Security", icon: BadgeCheck, watches: "The signing certificates every connection uses.", runs: "Daily", alertWhen: "30 days before one expires", state: "attention", on: true, finding: { text: "Payments signing certificate expires in 21 days", at: hoursAgo(5) }, lastRunAt: hoursAgo(5) },
  { id: "keys", name: "Key rotation", category: "Security", icon: KeyRound, watches: "How old each API key is.", runs: "Weekly", alertWhen: "A key is older than 90 days", state: "watching", on: true, lastRunAt: hoursAgo(30) },
  { id: "leavers", name: "Leavers with access", category: "People", icon: UserMinus, watches: "Accounts of people who have left and can still sign in.", runs: "On every directory sync", alertWhen: "A leaver can still sign in", state: "paused", on: false, lastRunAt: hoursAgo(200) },
  { id: "storage", name: "Storage growth", category: "Usage", icon: Database, watches: "How fast stored data grows.", runs: "Daily", alertWhen: "Growth passes 5% in a week", state: "watching", on: true, lastRunAt: null },
  { id: "events", name: "Unusual sign-ins", category: "Security", icon: ShieldAlert, watches: "Sign-ins from new places and devices.", runs: "Hourly", alertWhen: "Three new places in an hour", state: "unknown", on: false, unavailable: "Needs the event log add-on. This workspace isn’t licensed for it, so the monitor can’t run." },
  { id: "api", name: "API limits", category: "Usage", icon: Activity, watches: "How close each integration is to its daily API limit.", runs: "Hourly", alertWhen: "An integration passes 80% of its limit", state: "unknown", on: false, unavailable: "Needs read access to usage, which the connection doesn’t have." },
]

export default function Example() {
  const [monitors, setMonitors] = React.useState(start)
  // Stands in for your service: it answers after a moment, and the card shows what it reports.
  const toggle = (id: string) => async (on: boolean) => {
    await new Promise((resolve) => setTimeout(resolve, 900))
    if (id === "leavers" && on) throw new Error("the directory connection has expired")
    setMonitors((all) => all.map((m) => (m.id === id ? { ...m, on, state: on ? "watching" : "paused" } : m)))
  }
  return (
    <div className="flex flex-col gap-6">
      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {monitors.map((m) => (
          <MonitorCard key={m.id} {...m} onToggle={toggle(m.id)} />
        ))}
      </div>
      <div className="flex flex-col gap-2">
        {monitors.slice(0, 3).map((m) => (
          <MonitorCard key={m.id} layout="row" {...m} onToggle={toggle(m.id)} />
        ))}
      </div>
    </div>
  )
}