Incident Card

import { Clock, MessageSquare } from "lucide-react";
import { cn } from "@/lib/utils";

export interface IncidentCardProps {
  id?: string;
  title?: string;
  severity?: "SEV1" | "SEV2" | "SEV3";
  status?: "Investigating" | "Identified" | "Monitoring" | "Resolved";
  services?: string[];
  commander?: { name: string; initials: string };
  responders?: string[];
  duration?: string;
  updates?: number;
  href?: string;
  className?: string;
}

const SEV = {
  SEV1: "bg-da-danger text-da-danger-fg",
  SEV2: "bg-da-warning text-da-warning-fg",
  SEV3: "bg-da-muted text-da-fg",
} as const;

const STEPS = ["Investigating", "Identified", "Monitoring", "Resolved"] as const;

/** Compact incident summary card: severity, id, title, services, status progress, commander and responders. Whole card is a link. */
export function IncidentCard({
  id = "INC-2481",
  title = "Elevated 5xx on checkout-api",
  severity = "SEV1",
  status = "Identified",
  services = ["checkout-api", "payments-db"],
  commander = { name: "Maya Chen", initials: "MC" },
  responders = ["JO", "AK", "BF"],
  duration = "18m",
  updates = 7,
  href = "#inc-2481",
  className,
}: IncidentCardProps) {
  const step = STEPS.indexOf(status);
  return (
    <article
      className={cn(
        "da-stroke da-transition group relative rounded-da-lg bg-da-surface p-4 text-da-surface-fg hover:border-da-border-strong hover:shadow-da-md",
        className,
      )}
    >
      <header className="flex items-center gap-2">
        <span className={cn("rounded-da-sm px-1.5 py-0.5 font-da-mono text-[11px] font-medium", SEV[severity])}>{severity}</span>
        <span className="font-da-mono text-[12px] text-da-muted-fg">{id}</span>
        <span className="ml-auto inline-flex items-center gap-1 text-[12px] text-da-muted-fg">
          <Clock aria-hidden className="size-3.5" />
          <span className="sr-only">Duration</span>
          {duration}
        </span>
      </header>
      <h3 className="mt-3 text-[15px] leading-snug font-medium">
        <a href={href} className="da-focus rounded-da-sm after:absolute after:inset-0 after:rounded-da-lg">
          {title}
        </a>
      </h3>
      <ul className="mt-2 flex flex-wrap gap-1.5" aria-label="Affected services">
        {services.map((s) => (
          <li key={s} className="rounded-da-sm bg-da-muted px-1.5 py-0.5 font-da-mono text-[11px] text-da-muted-fg">
            {s}
          </li>
        ))}
      </ul>
      <div className="mt-4">
        <p className="text-[12px]">
          <span className="text-da-muted-fg">Status · </span>
          <span className="font-medium">{status}</span>
        </p>
        <div aria-hidden className="mt-1.5 grid grid-cols-4 gap-1">
          {STEPS.map((s, i) => (
            <span key={s} className={cn("h-1 rounded-full", i <= step ? (status === "Resolved" ? "bg-da-success" : "bg-da-primary") : "bg-da-muted")} />
          ))}
        </div>
      </div>
      <footer className="mt-4 flex items-center justify-between border-t border-da-border pt-3">
        <p className="flex items-center gap-2 text-[12px]">
          <span aria-hidden className="grid size-6 place-items-center rounded-full bg-da-accent text-[10px] font-medium text-da-accent-fg">
            {commander.initials}
          </span>
          <span>
            <span className="sr-only">Commander: </span>
            {commander.name}
          </span>
        </p>
        <div className="flex items-center gap-3">
          <span className="flex -space-x-1.5">
            <span className="sr-only">{responders.length} responders</span>
            {responders.map((r) => (
              <span key={r} aria-hidden className="grid size-6 place-items-center rounded-full bg-da-muted text-[10px] font-medium ring-2 ring-da-surface">
                {r}
              </span>
            ))}
          </span>
          <span className="inline-flex items-center gap-1 text-[12px] text-da-muted-fg">
            <MessageSquare aria-hidden className="size-3.5" />
            {updates}
            <span className="sr-only"> updates</span>
          </span>
        </div>
      </footer>
    </article>
  );
}

export default IncidentCard;