server-26/drb-frontend/components/NodeCard.tsx

import Link from "next/link";
import { StatusBadge } from "@/components/StatusBadge";
import type { NodeRecord, SystemRecord } from "@/lib/types";
import { diskState } from "@/lib/nodeDisk";

interface Props {
  node: NodeRecord;
  system?: SystemRecord;
  /**
   * When false, the card renders without its `/nodes/[id]` Link wrapper so a
   * parent click handler can take the interaction (pending nodes open the
   * config modal instead of navigating). Defaults to true.
   */
  linkToDetail?: boolean;
}

export function NodeCard({ node, system, linkToDetail = true }: Props) {
  const lastSeen = node.last_seen
    ? new Date(node.last_seen).toLocaleTimeString()
    : "never";

  const body = (
      <div className="bg-surface border border-line rounded-lg p-4 hover:border-line-strong transition-colors cursor-pointer">
        <div className="flex items-start justify-between mb-3">
          <div>
            <p className="font-mono font-semibold text-white">{node.name}</p>
            <p className="text-xs text-ink-muted font-mono">{node.node_id}</p>
          </div>
          <StatusBadge status={node.status} />
        </div>
        <div className="space-y-1 text-xs font-mono text-ink-2">
          <div className="flex justify-between">
            <span>System</span>
            <span className="text-ink-2">{system?.name ?? "Unassigned"}</span>
          </div>
          <div className="flex justify-between">
            <span>Location</span>
            <span className="text-ink-2">
              {node.lat != null && node.lon != null
                ? `${node.lat.toFixed(4)}, ${node.lon.toFixed(4)}`
                : "Unknown"}
            </span>
          </div>
          <div className="flex justify-between">
            <span>Last seen</span>
            <span className="text-ink-2">{lastSeen}</span>
          </div>
        </div>
        {(() => {
          const disk = diskState(node);
          if (!disk || disk.level === "ok") return null;
          return (
            <div className={`mt-3 text-xs font-mono border-t border-line pt-2 ${disk.level === "critical" ? "text-sev-major" : "text-sev-moderate"}`}>
              ⚠ Disk {disk.level === "critical" ? "nearly full" : "low"}: {disk.label}
            </div>
          );
        })()}
        {!node.configured && (
          <div className="mt-3 text-xs text-indigo-400 font-mono border-t border-line pt-2">
            ⚠ Needs configuration
          </div>
        )}
        {node.is_overridden && (
          <div className="mt-3 text-xs text-yellow-500 font-mono border-t border-line pt-2 flex justify-between">
            <span>⚠ Local Override</span>
            {node.override_timeout_at ? (
              <span className="text-ink-muted">
                Resets: {new Date(node.override_timeout_at).toLocaleTimeString()}
              </span>
            ) : (
              <span className="text-ink-muted">Permanent</span>
            )}
          </div>
        )}
      </div>
  );

  return linkToDetail ? <Link href={`/nodes/${node.node_id}`}>{body}</Link> : body;
}