Incident console

import { REFERENCE_DATE } from "@/lib/sample-data"
import { AppShell } from "@/components/ui/app-shell"
import { PageHeader } from "@/components/ui/page-header"

import { signOut } from "./actions"
import { IncidentsView } from "./components/incidents-view"
import { currentUser, incidents, incidentSummary, onCall, shellNotifications } from "./data"
import { NAV, ROUTES } from "@/lib/dashboards/engineering/nav"

/**
 * The incident console. The page is a server component: it reads the incidents
 * and the rota through `db` and hands them to one client island, which owns the
 * filters, the selection and the declare dialog — the only things on the page
 * that hold state.
 */
export default function IncidentsPage() {
  return (
    <AppShell
      nav={NAV}
      activeHref={ROUTES.incidents}
      user={currentUser()}
      notifications={shellNotifications()}
      now={REFERENCE_DATE}
      onSignOut={signOut}
    >
      <PageHeader
        title="Incidents"
        description="Everything the team has opened, and where each one has got to."
        meta={incidentSummary()}
      />

      <IncidentsView rows={incidents()} shifts={onCall()} now={REFERENCE_DATE} />
    </AppShell>
  )
}

/**
 * What this page reads. Incidents, the services they took with them, and the
 * people who ran them all come from `db` — `db.incidents`, `db.services` and
 * `db.members` — and nothing here is written out by hand. The on-call rota is
 * a rule over those rows rather than a rota table the sample data does not
 * have: whoever is commanding the newest open incident is holding the pager.
 * "Now" is `REFERENCE_DATE`.
 */
import { getInitials } from "@/lib/format"
import { db, REFERENCE_DATE, type Incident, type Member } from "@/lib/sample-data"

const SERVICES = db.services.all()
const SERVICE_NAME_BY_ID = new Map(SERVICES.map((service) => [service.id, service.name]))
// Read per call, never held at module scope: a member renamed since the
// server started is the name on the next render.
const membersById = () => new Map(db.members.all().map((member) => [member.id, member]))

const DAY_MS = 86_400_000

/** The internal severity scale, kept in the data's own words: responders say SEV1. */
export type Severity = Incident["severity"]

export type IncidentUpdate = { at: Date; status: Incident["status"]; message: string }

export type IncidentRow = {
  id: string
  title: string
  severity: Severity
  status: Incident["status"]
  startedAt: Date
  resolvedAt?: Date
  /** Service names, not ids — the ids never reach the page. */
  affected: string[]
  /** The commander's display name, resolved through db.members. */
  commander: string
  commanderAvatar?: string
  /** Newest first: where it got to, then how it got there. */
  updates: IncidentUpdate[]
}

/** One incident as this page reads it. Exported because the declare action returns one. */
export function toRow(incident: Incident, members = membersById()): IncidentRow {
  const commander = members.get(incident.commander)
  return {
    id: incident.id,
    title: incident.title,
    severity: incident.severity,
    status: incident.status,
    startedAt: incident.startedAt,
    resolvedAt: incident.resolvedAt,
    affected: incident.serviceIds.map((id) => SERVICE_NAME_BY_ID.get(id) ?? id),
    commander: commander?.name ?? "Unassigned",
    commanderAvatar: commander?.avatarUrl,
    updates: [...incident.updates].sort((a, b) => b.at.getTime() - a.at.getTime()),
  }
}

const isOpen = (incident: Incident) => incident.status !== "resolved"

/** Everything on the books: still running first, then whatever started most recently. */
export function incidents(): IncidentRow[] {
  const members = membersById()
  return [...db.incidents.all()]
    .sort((a, b) => {
      if (isOpen(a) !== isOpen(b)) return isOpen(a) ? -1 : 1
      return b.startedAt.getTime() - a.startedAt.getTime()
    })
    .map((incident) => toRow(incident, members))
}

/** The line under the title: what is running now, against what the window holds. */
export function incidentSummary(): string {
  const rows = db.incidents.all()
  const open = rows.filter(isOpen).length
  const oldest = Math.min(...rows.map((incident) => incident.startedAt.getTime()))
  const months = Math.round((REFERENCE_DATE.getTime() - oldest) / (30 * DAY_MS))
  return `${open} running · ${rows.length} over the last ${months} months`
}

// Whoever is commanding the newest open incident is the one actually holding
// the pager; the rota itself is not something the sample data records. Every
// fallback below is a real possibility for a workspace that has no incidents
// yet, or none of its members left active.
function primaryMember(): Member | undefined {
  const newestOpen = [...db.incidents.all()]
    .filter(isOpen)
    .sort((a, b) => b.startedAt.getTime() - a.startedAt.getTime())[0]
  const commander = newestOpen ? membersById().get(newestOpen.commander) : undefined
  const active = db.members.all().filter((member) => member.status === "active")
  return commander ?? active[0] ?? db.members.all()[0]
}

/**
 * The id a newly declared incident is assigned to. Empty when the workspace
 * has nobody to assign it to, which `toRow` reads back as "Unassigned" rather
 * than inventing a commander.
 */
export function onCallPrimaryId(): string {
  return primaryMember()?.id ?? ""
}

export type OnCallShift = {
  shift: "Primary" | "Secondary" | "Escalation"
  name: string
  email: string
  initials: string
  avatarUrl?: string
  /** What this person has actually been carrying, counted off db.incidents. */
  note: string
}

const QUARTER_DAYS = 90

function commandedThisQuarter(memberId: string): number {
  return db.incidents
    .all()
    .filter(
      (incident) =>
        incident.commander === memberId &&
        REFERENCE_DATE.getTime() - incident.startedAt.getTime() < QUARTER_DAYS * DAY_MS
    ).length
}

function toShift(member: Member, shift: OnCallShift["shift"]): OnCallShift {
  const commanded = commandedThisQuarter(member.id)
  return {
    shift,
    name: member.name,
    email: member.email,
    initials: getInitials(member.name),
    avatarUrl: member.avatarUrl,
    note:
      commanded === 0
        ? "No incidents this quarter"
        : `${commanded} ${commanded === 1 ? "incident" : "incidents"} this quarter`,
  }
}

/**
 * Who is holding the pager, who backs them up, and who they wake at 3am.
 * Nobody appears twice: a rota that lists the same person as their own backup
 * is worse than a rota with two names on it, so a shift with nobody left to
 * fill it is left off rather than filled with a repeat.
 */
export function onCall(): OnCallShift[] {
  const primary = primaryMember()
  if (!primary) return []

  const taken = new Set([primary.id])
  const active = db.members.all().filter((member) => member.status === "active")
  // Prefer the role the shift wants, then anyone still unclaimed.
  const claim = (role: Member["role"]): Member | undefined => {
    const next =
      active.find((member) => !taken.has(member.id) && member.role === role) ??
      active.find((member) => !taken.has(member.id))
    if (next) taken.add(next.id)
    return next
  }

  const secondary = claim("admin")
  const escalation = claim("owner")

  return [
    toShift(primary, "Primary"),
    ...(secondary ? [toShift(secondary, "Secondary")] : []),
    ...(escalation ? [toShift(escalation, "Escalation")] : []),
  ]
}

/** The bell's contents: the newest notifications, unread first in the panel. */
export function shellNotifications() {
  return db.notifications
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .slice(0, 6)
    .map(({ id, title, description, at, read, href }) => ({ id, title, description, at, read, href }))
}

function ownerRow(): Member {
  return db.members.all().find((member) => member.role === "owner") ?? db.members.all()[0]
}

/** The person looking at the page: whoever owns this workspace. */
export function currentUser() {
  const owner = ownerRow()
  return { name: owner.name, email: owner.email, initials: getInitials(owner.name), avatarUrl: owner.avatarUrl }
}

"use server"

import { mockAuthAdapter } from "@/lib/auth-adapter"
import { asString, db, fields, invalidInput, oneOf, REFERENCE_DATE, type Result } from "@/lib/sample-data"

import { onCallPrimaryId, toRow, type IncidentRow, type Severity } from "./data"

/**
 * The two things this page changes. Server actions, so the page can stay a
 * server component and still hand the shell and its client islands something
 * to call, and `Result` so every caller reads one success-or-error shape.
 */

export async function signOut(): Promise<Result<{ signedOut: true }>> {
  await mockAuthAdapter.signOut()
  return { ok: true, data: { signedOut: true } }
}

export type DeclareIncidentInput = { title: string; severity: Severity }

/** The severities an incident is declared at: the status page draws these three and no other. */
const SEVERITIES: readonly Severity[] = ["sev1", "sev2", "sev3"]

// It goes out on the status page the moment it is declared, so it has to read
// as a sentence a customer can understand rather than a scratch note.
const MAX_TITLE = 120

const OPENING_UPDATE = "We are investigating reports of an issue."

/**
 * Opens an incident: writes it to `db.incidents` and hands the row back so the
 * page can put it at the top of the list without a navigation. The commander
 * is whoever is holding the pager, not whoever happened to click.
 */
export async function declareIncident(
  input: DeclareIncidentInput
): Promise<Result<IncidentRow>> {
  const { title: rawTitle, severity } = fields(input)
  const title = asString(rawTitle).trim()

  if (title.length === 0) {
    return {
      ok: false,
      error: { code: "invalid_input", message: "An incident needs a title.", field: "title" },
    }
  }

  if (title.length > MAX_TITLE) {
    return {
      ok: false,
      error: {
        code: "invalid_input",
        message: `Keep it under ${MAX_TITLE} characters — this goes out on the status page.`,
        field: "title",
      },
    }
  }

  // The severity is stored as sent and drawn as a badge on every row, so it is
  // one of the three or nothing is written: an object here blanked the page.
  if (!oneOf(severity, SEVERITIES)) {
    return invalidInput("Choose a severity: SEV1, SEV2 or SEV3.", "severity")
  }

  const created = await db.incidents.create({
    title,
    severity,
    status: "investigating",
    // Nothing is confirmed at minute zero; the responders attach services as
    // they find them.
    serviceIds: [],
    startedAt: REFERENCE_DATE,
    updates: [{ at: REFERENCE_DATE, status: "investigating", message: OPENING_UPDATE }],
    commander: onCallPrimaryId(),
  })

  if (!created.ok) return created
  return { ok: true, data: toRow(created.data) }
}

"use client"

import * as React from "react"
import { PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ConfirmDialog } from "@/components/ui/confirm-dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { SegmentedControl } from "@/components/ui/segmented-control"

import { declareIncident } from "../actions"
import { type IncidentRow, type Severity } from "../data"

import { SEVERITIES, SEVERITY_LABELS, SEVERITY_MEANINGS } from "./severity"

export type DeclareIncidentProps = {
  /** Called with the row the action wrote, so the list can show it at once. */
  onDeclared: (incident: IncidentRow) => void
  /** Called when the dialog opens — the moment the next declaration starts. */
  onOpen?: () => void
}

/**
 * Opens an incident. The dialog is controlled so that a rejected declaration
 * can keep it open with what was typed still in it: without that the reader
 * loses the sentence they just wrote and never sees which field was wrong.
 */
export function DeclareIncident({ onDeclared, onOpen }: DeclareIncidentProps) {
  const [open, setOpen] = React.useState(false)
  const [title, setTitle] = React.useState("")
  const [severity, setSeverity] = React.useState<Severity>("sev2")
  const [error, setError] = React.useState<{ message: string; field?: string } | null>(null)
  const titleId = React.useId()
  const errorId = `${titleId}-error`

  // ConfirmDialog closes itself once onConfirm settles. Exactly one close is
  // swallowed after a rejection — the next Escape or Cancel closes normally.
  const keepOpen = React.useRef(false)

  async function confirm() {
    const result = await declareIncident({ title, severity })
    if (!result.ok) {
      keepOpen.current = true
      setError(result.error)
      return
    }
    setError(null)
    setTitle("")
    setSeverity("sev2")
    onDeclared(result.data)
  }

  return (
    <ConfirmDialog
      open={open}
      onOpenChange={(next) => {
        if (!next && keepOpen.current) {
          keepOpen.current = false
          return
        }
        if (!next) setError(null)
        if (next) onOpen?.()
        setOpen(next)
      }}
      trigger={
        <Button
          size="sm"
          onClick={() => {
            onOpen?.()
            setOpen(true)
          }}
        >
          <PlusIcon aria-hidden="true" />
          Declare incident
        </Button>
      }
      title="Declare an incident"
      description="This opens a timeline, pages the primary on call, and publishes to the status page."
      confirmText="Declare"
      onConfirm={confirm}
    >
      <div className="flex flex-col gap-4 text-left">
        <div className="flex flex-col gap-2">
          <Label htmlFor={titleId}>What is happening?</Label>
          <Input
            id={titleId}
            value={title}
            onChange={(event) => {
              setTitle(event.target.value)
              if (error?.field === "title") setError(null)
            }}
            placeholder="Checkout is returning 502s"
            autoComplete="off"
            aria-invalid={error?.field === "title" || undefined}
            aria-describedby={error?.field === "title" ? errorId : undefined}
          />
          {error?.field === "title" ? (
            <p id={errorId} role="alert" className="text-xs text-danger">
              {error.message}
            </p>
          ) : null}
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-sm font-medium text-foreground">Severity</span>
          <SegmentedControl
            aria-label="Severity"
            fullWidth
            value={severity}
            onValueChange={(next) => setSeverity(next as Severity)}
            options={SEVERITIES.map((level) => ({
              value: level,
              label: SEVERITY_LABELS[level],
            }))}
          />
          <p className="text-xs text-muted-foreground">{SEVERITY_MEANINGS[severity]}</p>
        </div>

        {error && !error.field ? (
          <p role="alert" className="text-sm text-danger">
            {error.message}
          </p>
        ) : null}
      </div>
    </ConfirmDialog>
  )
}

"use client"

import {
  ActivityIcon,
  CircleCheckIcon,
  SearchIcon,
  WrenchIcon,
  type LucideIcon,
} from "lucide-react"

import { formatDuration } from "@/lib/format"
import { DescriptionList } from "@/components/ui/description-list"
import { InspectorPanel } from "@/components/ui/inspector-panel"
import { Timeline, TimelineItem, type TimelineTone } from "@/components/ui/timeline"
import { UserCell } from "@/components/ui/user-cell"

import { type IncidentRow } from "../data"

import { SeverityBadge, StageBadge, STATUS_LABELS } from "./severity"

const STAGE_ICONS: Record<IncidentRow["status"], LucideIcon> = {
  investigating: SearchIcon,
  identified: WrenchIcon,
  monitoring: ActivityIcon,
  resolved: CircleCheckIcon,
}

const STAGE_TONES: Record<IncidentRow["status"], TimelineTone> = {
  investigating: "danger",
  identified: "warning",
  monitoring: "info",
  resolved: "success",
}

// Fixed to UTC: an incident timeline is a shared record, and two responders in
// two time zones have to be able to quote the same line at each other.
const STAMP = new Intl.DateTimeFormat("en-US", {
  month: "short",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  hourCycle: "h23",
  timeZone: "UTC",
})

export type IncidentInspectorProps = {
  incident: IncidentRow | null
  /** REFERENCE_DATE, handed down from the server page: a render never reads a clock. */
  now: Date
  onClose: () => void
}

/**
 * The selected incident, opened over the page as a sheet: its facts, then its
 * timeline. An overlay rather than an inline column because the list is the
 * full width of the page at every size the console is read at.
 */
export function IncidentInspector({ incident, now, onClose }: IncidentInspectorProps) {
  return (
    <InspectorPanel
      open={incident !== null}
      onOpenChange={(next) => {
        if (!next) onClose()
      }}
      width="lg"
      title={incident?.title ?? "Incident"}
      description={incident ? <span className="font-mono">{incident.id}</span> : undefined}
    >
      {incident ? (
        <div className="flex flex-col gap-5">
          <div className="flex flex-wrap items-center gap-2">
            <SeverityBadge severity={incident.severity} />
            <StageBadge status={incident.status} />
          </div>

          <DescriptionList
            size="sm"
            columns={1}
            items={[
              {
                term: "Commander",
                description: <UserCell size="sm" name={incident.commander} src={incident.commanderAvatar} />,
              },
              {
                term: "Started",
                description: (
                  <span className="tabular-nums">{`${STAMP.format(incident.startedAt)} UTC`}</span>
                ),
              },
              {
                term: incident.resolvedAt ? "Ran for" : "Running for",
                description: (
                  <span className="tabular-nums">
                    {formatDuration(
                      (incident.resolvedAt ?? now).getTime() - incident.startedAt.getTime()
                    )}
                  </span>
                ),
              },
              {
                term: "Affected",
                description:
                  incident.affected.length > 0
                    ? incident.affected.join(", ")
                    : "Nothing confirmed yet",
              },
            ]}
          />

          <div className="flex flex-col gap-3">
            <h3 className="text-sm font-medium">Timeline</h3>
            <Timeline>
              {incident.updates.map((update, index) => {
                const Icon = STAGE_ICONS[update.status]
                return (
                  <TimelineItem
                    key={`${incident.id}-${index}`}
                    tone={STAGE_TONES[update.status]}
                    icon={<Icon aria-hidden="true" />}
                    title={STATUS_LABELS[update.status]}
                    time={
                      <span className="tabular-nums">{`${STAMP.format(update.at)} UTC`}</span>
                    }
                    description={update.message}
                  />
                )
              })}
            </Timeline>
          </div>
        </div>
      ) : null}
    </InspectorPanel>
  )
}

"use client"

import * as React from "react"
import { CircleCheckIcon, XIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { DashboardGrid, DashboardGridItem } from "@/components/ui/dashboard-grid"
import { DataList, DataListItem } from "@/components/ui/data-list"
import { FilterBar, FilterMenu } from "@/components/ui/filter-bar"
import { RelativeTime } from "@/components/ui/relative-time"
import { Widget } from "@/components/ui/widget"

import { type IncidentRow, type OnCallShift } from "../data"

import { DeclareIncident } from "./declare-incident"
import { IncidentInspector } from "./incident-inspector"
import { OnCallCard } from "./on-call-card"
import {
  SeverityBadge,
  SEVERITIES,
  SEVERITY_LABELS,
  StageBadge,
  STATUS_LABELS,
  STATUSES,
} from "./severity"

export type IncidentsViewProps = {
  rows: IncidentRow[]
  shifts: OnCallShift[]
  /** REFERENCE_DATE from the server page: nothing below reads a clock. */
  now: Date
}

/**
 * The console: filters, the list, whatever is selected, and the one control
 * that changes anything. It holds the incidents in state because declaring one
 * writes a real row and the reader should see it land without a navigation.
 */
export function IncidentsView({ rows, shifts, now }: IncidentsViewProps) {
  const [incidents, setIncidents] = React.useState(rows)
  const [severity, setSeverity] = React.useState<string[]>([])
  const [status, setStatus] = React.useState<string[]>([])
  const [selectedId, setSelectedId] = React.useState<string | null>(null)
  const [declared, setDeclared] = React.useState<IncidentRow | null>(null)

  const visible = incidents.filter(
    (incident) =>
      (severity.length === 0 || severity.includes(incident.severity)) &&
      (status.length === 0 || status.includes(incident.status))
  )

  const selected = incidents.find((incident) => incident.id === selectedId) ?? null
  const activeFilters = severity.length + status.length

  const countBy = <T extends string>(key: "severity" | "status", value: T) =>
    incidents.filter((incident) => incident[key] === value).length

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <FilterBar
          role="group"
          aria-label="Incident filters"
          activeCount={activeFilters}
          onClearAll={() => {
            setSeverity([])
            setStatus([])
          }}
        >
          <FilterMenu
            label="Severity"
            size="sm"
            searchable={false}
            options={SEVERITIES.map((level) => ({
              value: level,
              label: SEVERITY_LABELS[level],
              count: countBy("severity", level),
            }))}
            value={severity}
            onValueChange={setSeverity}
          />
          <FilterMenu
            label="Status"
            size="sm"
            searchable={false}
            options={STATUSES.map((stage) => ({
              value: stage,
              label: STATUS_LABELS[stage],
              count: countBy("status", stage),
            }))}
            value={status}
            onValueChange={setStatus}
          />
        </FilterBar>

        <DeclareIncident
          // Opening the dialog again starts the next declaration, so the last
          // one's notice goes: a success banner still standing while a second
          // incident is being written reads as though it were about that one.
          onOpen={() => setDeclared(null)}
          onDeclared={(incident) => {
            setIncidents((current) => [incident, ...current])
            setDeclared(incident)
          }}
        />
      </div>

      {declared ? (
        // The row is already in the store; this says so rather than sending
        // the reader anywhere.
        <Callout
          role="status"
          variant="success"
          icon={<CircleCheckIcon aria-hidden="true" />}
          title="Incident declared"
        >
          <span className="flex items-start justify-between gap-3">
            <span>
              {`${declared.title} is open as ${declared.id}`}
              {shifts[0] ? `, with ${shifts[0].name} on point.` : "."}
            </span>
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              aria-label="Dismiss"
              className="-my-1 -mr-1.5 shrink-0"
              onClick={() => setDeclared(null)}
            >
              <XIcon aria-hidden="true" />
            </Button>
          </span>
        </Callout>
      ) : null}

      <DashboardGrid>
        <DashboardGridItem colSpan={{ base: 12, lg: 8 }}>
          {/* Widget is already role="region", named by its own title. */}
          <Widget
            title="Incidents"
            description={`${visible.length} of ${incidents.length} shown, still running first.`}
            contentClassName="px-0"
          >
            <DataList divided>
              {visible.map((incident) => (
                <DataListItem
                  key={incident.id}
                  // The title is the whole point of the row, and clipped to one
                  // line in this column an incident reads "File Storage ret…".
                  wrapTitle
                  className="px-6"
                  selected={incident.id === selectedId}
                  onClick={() => setSelectedId(incident.id)}
                  leading={<SeverityBadge severity={incident.severity} />}
                  title={incident.title}
                  description={
                    incident.affected.length > 0
                      ? incident.affected.join(", ")
                      : "No services confirmed yet"
                  }
                  meta={
                    <span className="flex items-center gap-2">
                      <StageBadge status={incident.status} />
                      {/* Frozen, and counted from the page's REFERENCE_DATE:
                          a row is a record of when something happened, not a
                          clock. */}
                      <RelativeTime
                        date={incident.startedAt}
                        now={now}
                        updateInterval={null}
                        // Below sm the width is worth more to the title.
                        className="hidden sm:inline"
                      />
                    </span>
                  }
                />
              ))}
            </DataList>
            {visible.length === 0 ? (
              <p className="px-6 py-8 text-center text-sm text-muted-foreground">
                No incidents match these filters.
              </p>
            ) : null}
          </Widget>
        </DashboardGridItem>

        <DashboardGridItem colSpan={{ base: 12, lg: 4 }}>
          <OnCallCard shifts={shifts} />
        </DashboardGridItem>
      </DashboardGrid>

      <IncidentInspector incident={selected} now={now} onClose={() => setSelectedId(null)} />
    </div>
  )
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { DataList, DataListItem } from "@/components/ui/data-list"
import { Widget } from "@/components/ui/widget"

import { type OnCallShift } from "../data"

/** Who is holding the pager, and what each of them has been carrying. */
export function OnCallCard({ shifts }: { shifts: OnCallShift[] }) {
  return (
    <Widget
      data-widget="widget-engineering-incidents-on-call-card"
      title="On call"
      description="A new incident pages the primary first."
      contentClassName="px-0"
    >
      <DataList divided>
        {shifts.map((shift) => (
          <DataListItem
            key={shift.shift}
            className="px-6"
            leading={
              <Avatar size="sm">
                {shift.avatarUrl ? <AvatarImage src={shift.avatarUrl} alt="" /> : null}
                <AvatarFallback className="text-2xs">{shift.initials}</AvatarFallback>
              </Avatar>
            }
            title={shift.name}
            description={shift.note}
            meta={<Badge variant="outline">{shift.shift}</Badge>}
          />
        ))}
      </DataList>
    </Widget>
  )
}

import {
  CircleAlertIcon,
  OctagonAlertIcon,
  TriangleAlertIcon,
  type LucideIcon,
} from "lucide-react"

import { StatusBadge, type StatusVariant } from "@/components/ui/status-badge"

import { type IncidentRow, type Severity } from "../data"

/**
 * How this console writes severity and response stage. Responders say SEV1,
 * so the internal pages keep the data's own words — the public status page is
 * the one that translates them into Critical, Major and Minor.
 */

export const SEVERITIES: Severity[] = ["sev1", "sev2", "sev3"]

export const SEVERITY_LABELS: Record<Severity, string> = {
  sev1: "SEV1",
  sev2: "SEV2",
  sev3: "SEV3",
}

/** What each level actually means, for the picker in the declare dialog. */
export const SEVERITY_MEANINGS: Record<Severity, string> = {
  sev1: "Customers cannot use the product",
  sev2: "A major feature is degraded",
  sev3: "Contained, or affecting a few accounts",
}

const SEVERITY_TONES: Record<Severity, StatusVariant> = {
  sev1: "danger",
  sev2: "warning",
  sev3: "info",
}

// Three outlines, so severity still reads in greyscale.
const SEVERITY_ICONS: Record<Severity, LucideIcon> = {
  sev1: OctagonAlertIcon,
  sev2: TriangleAlertIcon,
  sev3: CircleAlertIcon,
}

export const STATUS_LABELS: Record<IncidentRow["status"], string> = {
  investigating: "Investigating",
  identified: "Identified",
  monitoring: "Monitoring",
  resolved: "Resolved",
}

export const STATUSES = Object.keys(STATUS_LABELS) as IncidentRow["status"][]

const STATUS_TONES: Record<IncidentRow["status"], StatusVariant> = {
  investigating: "danger",
  identified: "warning",
  monitoring: "info",
  resolved: "success",
}

/** The severity pill, in the console's own vocabulary. */
export function SeverityBadge({ severity }: { severity: Severity }) {
  const Icon = SEVERITY_ICONS[severity]
  return (
    <StatusBadge status={severity} variant={SEVERITY_TONES[severity]} dot={false} size="sm">
      <Icon aria-hidden="true" className="size-3" />
      {SEVERITY_LABELS[severity]}
    </StatusBadge>
  )
}

/** Where an incident has got to in the response. */
export function StageBadge({ status }: { status: IncidentRow["status"] }) {
  return (
    <StatusBadge
      status={status}
      variant={STATUS_TONES[status]}
      label={STATUS_LABELS[status]}
      size="sm"
      // A response still in flight is a state that is actively changing.
      pulse={status === "investigating"}
    />
  )
}