server-26/drb-frontend/app/incidents/page.tsx

"use client";

import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/components/AuthProvider";
import { useIncidents } from "@/lib/useIncidents";
import { c2api } from "@/lib/c2api";
import type { IncidentRecord } from "@/lib/types";
import { PageHeader } from "@/components/ui/PageHeader";
import { Card } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import { Badge } from "@/components/ui/Badge";
import { EmptyState } from "@/components/ui/EmptyState";
import { SkeletonCard } from "@/components/ui/Skeleton";
import { severityBadge, severityRank } from "@/lib/severity";
import { TypeBadge } from "@/components/IncidentBadges";

// Severity badge/ordering now lives in lib/severity.ts (shared with CallRow).
// `severityBadge()` already returns null for the legacy "unknown" value.

type SeverityFilter = "all" | "minor" | "moderate" | "major";
const SEVERITY_FILTERS: { key: SeverityFilter; label: string }[] = [
  { key: "all",      label: "All" },
  { key: "minor",    label: "Minor+" },
  { key: "moderate", label: "Moderate+" },
  { key: "major",    label: "Major only" },
];
const FILTER_THRESHOLD: Record<SeverityFilter, number> = { all: -1, minor: 1, moderate: 2, major: 3 };

type SortMode = "recent" | "severity";

function fmtTime(iso: string) {
  try { return new Date(iso).toLocaleString(); } catch { return iso; }
}

// ---------------------------------------------------------------------------
// Rows / cards
// ---------------------------------------------------------------------------

function IncidentRow({ incident, isAdmin, onResolve }: {
  incident: IncidentRecord;
  isAdmin: boolean;
  onResolve: (id: string) => void;
}) {
  const router = useRouter();

  return (
    <tr
      className="border-b border-gray-800 last:border-0 hover:bg-gray-900/60 cursor-pointer transition-colors"
      onClick={() => router.push(`/incidents/${incident.incident_id}`)}
    >
      <td className="px-4 py-3"><TypeBadge type={incident.type} /></td>
      <td className="px-4 py-3 text-white text-sm">{incident.title ?? "—"}</td>
      <td className="px-4 py-3">
        <Badge tone={incident.status === "active" ? "success" : "neutral"}>{incident.status}</Badge>
      </td>
      <td className="px-4 py-3">{severityBadge(incident.severity)}</td>
      <td className="px-4 py-3 text-gray-400 text-xs font-mono">{incident.call_ids.length}</td>
      <td className="px-4 py-3 text-gray-400 text-xs font-mono">{fmtTime(incident.started_at)}</td>
      <td className="px-4 py-3 text-gray-400 text-xs font-mono">{fmtTime(incident.updated_at)}</td>
      <td className="px-4 py-3">
        {isAdmin && incident.status === "active" && (
          <Button
            size="sm" variant="secondary"
            onClick={(e) => { e.stopPropagation(); onResolve(incident.incident_id); }}
          >
            Resolve
          </Button>
        )}
      </td>
    </tr>
  );
}

function IncidentCards({ incidents, isAdmin, onResolve }: {
  incidents: IncidentRecord[];
  isAdmin: boolean;
  onResolve: (id: string) => void;
}) {
  const router = useRouter();
  return (
    <div className="space-y-2">
      {incidents.map((inc) => (
        <Card
          key={inc.incident_id}
          padding="sm"
          hover
          className="cursor-pointer active:bg-gray-800"
          onClick={() => router.push(`/incidents/${inc.incident_id}`)}
        >
          <div className="flex items-center justify-between gap-2 mb-1.5">
            <div className="flex items-center gap-2">
              <TypeBadge type={inc.type} />
              <Badge tone={inc.status === "active" ? "success" : "neutral"}>{inc.status}</Badge>
            </div>
            {isAdmin && inc.status === "active" && (
              <Button size="sm" variant="secondary" onClick={(e) => { e.stopPropagation(); onResolve(inc.incident_id); }}>
                Resolve
              </Button>
            )}
          </div>
          <p className="text-white text-sm font-semibold leading-snug">{inc.title ?? "—"}</p>
          <div className="flex items-center gap-2 mt-1">
            {severityBadge(inc.severity)}
            <p className="text-gray-500 text-xs font-mono">
              {fmtTime(inc.started_at)} · {inc.call_ids.length} call{inc.call_ids.length !== 1 ? "s" : ""}
            </p>
          </div>
        </Card>
      ))}
    </div>
  );
}

function IncidentTable({ incidents, isAdmin, onResolve }: {
  incidents: IncidentRecord[];
  isAdmin: boolean;
  onResolve: (id: string) => void;
}) {
  return (
    <>
      <div className="sm:hidden">
        <IncidentCards incidents={incidents} isAdmin={isAdmin} onResolve={onResolve} />
      </div>
      <div className="hidden sm:block bg-gray-900 border border-gray-800 rounded-xl overflow-hidden overflow-x-auto">
        <table className="w-full text-left">
          <thead>
            <tr className="border-b border-gray-800 text-xs text-gray-500 uppercase">
              <th className="px-4 py-3">Type</th>
              <th className="px-4 py-3">Title</th>
              <th className="px-4 py-3">Status</th>
              <th className="px-4 py-3">Severity</th>
              <th className="px-4 py-3">Calls</th>
              <th className="px-4 py-3">Started</th>
              <th className="px-4 py-3">Updated</th>
              <th className="px-4 py-3"></th>
            </tr>
          </thead>
          <tbody>
            {incidents.map((inc) => (
              <IncidentRow key={inc.incident_id} incident={inc} isAdmin={isAdmin} onResolve={onResolve} />
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function CreateModal({ onClose, onCreate }: { onClose: () => void; onCreate: (body: object) => Promise<void> }) {
  const [title, setTitle] = useState("");
  const [type, setType] = useState("other");
  const [summary, setSummary] = useState("");
  const [saving, setSaving] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    try {
      await onCreate({ title, type, summary: summary || null, status: "active" });
      onClose();
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
      <form onSubmit={handleSubmit} className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md space-y-4">
        <h2 className="text-white font-bold">Create Incident</h2>
        <div>
          <label className="text-xs text-gray-400 block mb-1">Title</label>
          <input
            required value={title} onChange={(e) => setTitle(e.target.value)}
            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
          />
        </div>
        <div>
          <label className="text-xs text-gray-400 block mb-1">Type</label>
          <select
            value={type} onChange={(e) => setType(e.target.value)}
            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none"
          >
            {["fire", "police", "ems", "accident", "other"].map((t) => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
        </div>
        <div>
          <label className="text-xs text-gray-400 block mb-1">Summary (optional)</label>
          <textarea
            value={summary} onChange={(e) => setSummary(e.target.value)} rows={2}
            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none resize-none"
          />
        </div>
        <div className="flex gap-3 justify-end">
          <Button type="button" variant="ghost" onClick={onClose}>Cancel</Button>
          <Button type="submit" disabled={saving}>{saving ? "Creating…" : "Create"}</Button>
        </div>
      </form>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Page
// ---------------------------------------------------------------------------

export default function IncidentsPage() {
  const { isAdmin }            = useAuth();
  const { incidents, loading } = useIncidents();
  const [showCreate, setShowCreate] = useState(false);
  const [severityFilter, setSeverityFilter] = useState<SeverityFilter>("all");
  const [sortMode, setSortMode] = useState<SortMode>("recent");

  const filtered = useMemo(() => {
    const threshold = FILTER_THRESHOLD[severityFilter];
    const list = incidents.filter((i) => severityRank(i.severity) >= threshold);
    if (sortMode === "severity") {
      return [...list].sort((a, b) => severityRank(b.severity) - severityRank(a.severity) || b.started_at.localeCompare(a.started_at));
    }
    return list; // useIncidents() already orders by started_at desc
  }, [incidents, severityFilter, sortMode]);

  const active   = filtered.filter((i) => i.status === "active");
  const resolved = filtered.filter((i) => i.status === "resolved");
  const hiddenCount = incidents.length - filtered.length;

  async function handleResolve(id: string) {
    try { await c2api.updateIncident(id, { status: "resolved" }); }
    catch (e) { console.error(e); }
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title="Incidents"
        badge={active.length > 0 && <Badge tone="danger">{active.length} active</Badge>}
        action={isAdmin && <Button onClick={() => setShowCreate(true)}>+ Create Incident</Button>}
      />

      {/* Severity filter + sort — severity is a filter dimension, not decoration */}
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap gap-1 bg-gray-900 border border-gray-800 rounded-lg p-1 w-fit">
          {SEVERITY_FILTERS.map(({ key, label }) => (
            <button
              key={key}
              onClick={() => setSeverityFilter(key)}
              className={`text-sm font-mono px-3.5 py-1.5 rounded-md transition-colors ${
                severityFilter === key ? "bg-gray-800 text-white" : "text-gray-500 hover:text-gray-300"
              }`}
            >
              {label}
            </button>
          ))}
        </div>
        <label className="flex items-center gap-2 text-xs font-mono text-gray-500">
          Sort
          <select
            value={sortMode}
            onChange={(e) => setSortMode(e.target.value as SortMode)}
            className="bg-gray-900 border border-gray-800 rounded-lg px-2 py-1.5 text-gray-200 focus:outline-none focus:border-indigo-500"
          >
            <option value="recent">Most recent</option>
            <option value="severity">Highest severity</option>
          </select>
        </label>
      </div>

      {loading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <SkeletonCard /><SkeletonCard />
        </div>
      ) : (
        <>
          {hiddenCount > 0 && (
            <p className="text-xs text-gray-600 font-mono">
              {hiddenCount} incident{hiddenCount !== 1 ? "s" : ""} hidden by the severity filter.
            </p>
          )}

          {active.length > 0 && (
            <section>
              <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Active</h2>
              <IncidentTable incidents={active} isAdmin={isAdmin} onResolve={handleResolve} />
            </section>
          )}

          {resolved.length > 0 && (
            <section>
              <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Resolved</h2>
              <IncidentTable incidents={resolved} isAdmin={isAdmin} onResolve={handleResolve} />
            </section>
          )}

          {filtered.length === 0 && (
            <EmptyState
              title={incidents.length === 0 ? "No incidents recorded yet" : "No incidents match this filter"}
              description={
                incidents.length === 0
                  ? "Incidents appear automatically once calls start correlating."
                  : "Try a lower severity threshold."
              }
              action={
                incidents.length > 0 && severityFilter !== "all" ? (
                  <Button variant="secondary" size="sm" onClick={() => setSeverityFilter("all")}>Clear filter</Button>
                ) : undefined
              }
            />
          )}
        </>
      )}

      {showCreate && (
        <CreateModal onClose={() => setShowCreate(false)} onCreate={async (b) => { await c2api.createIncident(b); }} />
      )}
    </div>
  );
}