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

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-gray-900 border border-gray-800 rounded-lg p-4 hover:border-gray-600 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-gray-500 font-mono">{node.node_id}</p>
          </div>
          <StatusBadge status={node.status} />
        </div>
        <div className="space-y-1 text-xs font-mono text-gray-400">
          <div className="flex justify-between">
            <span>System</span>
            <span className="text-gray-300">{system?.name ?? "Unassigned"}</span>
          </div>
          <div className="flex justify-between">
            <span>Location</span>
            <span className="text-gray-300">
              {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-gray-300">{lastSeen}</span>
          </div>
        </div>
        {!node.configured && (
          <div className="mt-3 text-xs text-indigo-400 font-mono border-t border-gray-800 pt-2">
            ⚠ Needs configuration
          </div>
        )}
        {node.is_overridden && (
          <div className="mt-3 text-xs text-yellow-500 font-mono border-t border-gray-800 pt-2 flex justify-between">
            <span>⚠ Local Override</span>
            {node.override_timeout_at ? (
              <span className="text-gray-500">
                Resets: {new Date(node.override_timeout_at).toLocaleTimeString()}
              </span>
            ) : (
              <span className="text-gray-500">Permanent</span>
            )}
          </div>
        )}
      </div>
  );

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