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

interface Props {
  node: NodeRecord;
  system?: SystemRecord;
}

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

  return (
    <Link href={`/nodes/${node.node_id}`}>
      <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>
        )}
      </div>
    </Link>
  );
}