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

"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useNodes, useUnconfiguredNodes } from "@/lib/useNodes";
import { useCalls, useActiveCalls } from "@/lib/useCalls";
import { useSystems } from "@/lib/useSystems";
import { useActiveIncidents } from "@/lib/useIncidents";
import { NodeCard } from "@/components/NodeCard";
import { CallRow } from "@/components/CallRow";
import { NodeConfigModal } from "@/components/NodeConfigModal";
import { TypeBadge } from "@/components/IncidentBadges";
import { severityBadge, severityRank } from "@/lib/severity";
import { useState } from "react";
import type { NodeRecord, IncidentRecord } from "@/lib/types";
import { useAuth } from "@/components/AuthProvider";
import { PageHeader } from "@/components/ui/PageHeader";
import { Card } from "@/components/ui/Card";
import { Badge } from "@/components/ui/Badge";
import { Button } from "@/components/ui/Button";
import { EmptyState, ErrorBanner } from "@/components/ui/EmptyState";

function StatCard({ label, value, accent }: { label: string; value: string | number; accent?: string }) {
  return (
    <Card>
      <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
      <p className={`text-3xl font-bold font-mono ${accent ?? "text-white"}`}>{value}</p>
    </Card>
  );
}

function fmtTime(iso: string) {
  try { return new Date(iso).toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); }
  catch { return iso; }
}

function IncidentSummaryCard({ incident }: { incident: IncidentRecord }) {
  const router = useRouter();
  return (
    <Card hover className="cursor-pointer" onClick={() => router.push(`/incidents/${incident.incident_id}`)}>
      <div className="flex items-center gap-2 mb-2 flex-wrap">
        <TypeBadge type={incident.type} />
        {severityBadge(incident.severity)}
      </div>
      <p className="text-white text-sm font-semibold leading-snug line-clamp-2">{incident.title ?? "Untitled incident"}</p>
      <p className="text-gray-500 text-xs font-mono mt-2">
        {fmtTime(incident.started_at)} · {incident.call_ids.length} call{incident.call_ids.length !== 1 ? "s" : ""}
      </p>
    </Card>
  );
}

export default function DashboardPage() {
  const { nodes, error: nodesError } = useNodes();
  const { nodes: pending } = useUnconfiguredNodes();
  const { calls, error: callsError } = useCalls(20);
  const activeCalls = useActiveCalls();
  const { systems, error: systemsError } = useSystems();
  const activeIncidents = useActiveIncidents();
  const [configNode, setConfigNode] = useState<NodeRecord | null>(null);

  const { isAdmin } = useAuth();
  const systemMap = Object.fromEntries(systems.map((s) => [s.system_id, s]));
  const onlineCount = nodes.filter((n) => n.status !== "offline").length;

  const fsError = nodesError ?? callsError ?? systemsError;

  // Worst-first: the incident that most needs a human's attention leads the panel.
  const sortedIncidents = [...activeIncidents].sort(
    (a, b) => severityRank(b.severity) - severityRank(a.severity) || b.started_at.localeCompare(a.started_at)
  );
  const notableIncidentCount = activeIncidents.filter((i) => severityRank(i.severity) >= 2).length;

  return (
    <div className="space-y-8">
      <PageHeader
        title="Dashboard"
        badge={notableIncidentCount > 0 && <Badge tone="danger">{notableIncidentCount} moderate+ active</Badge>}
      />

      {fsError && <ErrorBanner message={`Firestore error: ${fsError}`} />}

      {/* Pending config banner */}
      {pending.length > 0 && (
        <div className="bg-indigo-600/10 border border-indigo-600/40 rounded-lg p-4 flex items-center justify-between gap-3 flex-wrap">
          <p className="text-indigo-300 text-sm font-mono">
            {pending.length} new node{pending.length > 1 ? "s" : ""} connected and need{pending.length === 1 ? "s" : ""} configuration.
          </p>
          <Button size="sm" onClick={() => setConfigNode(pending[0])}>Configure now</Button>
        </div>
      )}

      {/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <StatCard label="Active Incidents" value={activeIncidents.length} accent={activeIncidents.length > 0 ? "text-orange-400" : undefined} />
        <StatCard label="Nodes Online" value={onlineCount} accent="text-green-400" />
        <StatCard label="Active Calls" value={activeCalls.length} accent={activeCalls.length > 0 ? "text-orange-400" : undefined} />
        <StatCard label="Systems" value={systems.length} />
      </div>

      {/* Active incidents — the primary "what's happening" view */}
      <section>
        <div className="flex items-center justify-between mb-3">
          <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Active Incidents</h2>
          <Link href="/incidents" className="text-xs text-indigo-400 hover:text-indigo-300 font-mono transition-colors">
            View all →
          </Link>
        </div>
        {sortedIncidents.length === 0 ? (
          <EmptyState
            title="No active incidents"
            description="Incidents appear here automatically as calls correlate into events."
          />
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {sortedIncidents.slice(0, 6).map((inc) => (
              <IncidentSummaryCard key={inc.incident_id} incident={inc} />
            ))}
          </div>
        )}
      </section>

      {/* Nodes */}
      <section>
        <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Nodes</h2>
        {nodes.length === 0 ? (
          <EmptyState title="No nodes registered yet" description="Deploy a field SDR node and it will show up here automatically." />
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {nodes.map((n) => (
              <NodeCard key={n.node_id} node={n} system={systemMap[n.assigned_system_id ?? ""]} />
            ))}
          </div>
        )}
      </section>

      {/* Recent calls */}
      <section>
        <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Recent Calls</h2>
        {calls.length === 0 ? (
          <EmptyState title="No calls recorded yet" />
        ) : (
          <Card padding="none" className="overflow-hidden overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800">
                  <th className="px-4 py-2 text-left">Time</th>
                  <th className="px-4 py-2 text-left">Talkgroup</th>
                  <th className="px-4 py-2 text-left">System</th>
                  <th className="px-4 py-2 text-left">Node</th>
                  <th className="px-4 py-2 text-left">Duration</th>
                  <th className="px-4 py-2 text-left">Audio</th>
                </tr>
              </thead>
              <tbody>
                {calls.map((c) => (
                  <CallRow key={c.call_id} call={c} systemName={systemMap[c.system_id ?? ""]?.name} isAdmin={isAdmin} />
                ))}
              </tbody>
            </table>
          </Card>
        )}
      </section>

      {configNode && (
        <NodeConfigModal node={configNode} systems={systems} onClose={() => setConfigNode(null)} />
      )}
    </div>
  );
}