/**
 * Node Metric Card Component
 * 显示单个节点的监控信息
 */
import React from "react";
import { Server, Cpu, Database, CheckCircle, XCircle, Activity } from "lucide-react";
import { Badge } from "@/shared/components";
import type { NodeMetrics } from "@/core/types";

interface NodeMetricCardProps {
  node: NodeMetrics;
}

export const NodeMetricCard: React.FC<NodeMetricCardProps> = ({ node }) => {
  const getStatusBadge = () => {
    if (node.status === "Ready") {
      return <Badge variant="success">Ready</Badge>;
    }
    return <Badge variant="danger">NotReady</Badge>;
  };

  const getStatusIcon = () => {
    if (node.status === "Ready") {
      return <CheckCircle className="w-4 h-4 text-green-400" />;
    }
    return <XCircle className="w-4 h-4 text-red-400" />;
  };

  const getRoleBadge = () => {
    if (node.role === "control-plane") {
      return <Badge variant="blue">Control Plane</Badge>;
    }
    return <Badge variant="gray">Worker</Badge>;
  };

  const cpuPercent = node.cpuPercent ?? 0;
  const memoryPercent = node.memoryPercent ?? 0;
  const gpuPercent = node.gpuPercent ?? 0;
  const gpuCapacity = node.gpuCapacity ?? 0;

  return (
    <div className="p-4 bg-white rounded-lg border border-slate-200 hover:border-slate-300/50 transition">
      {/* Node Header */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-slate-100/50 rounded">
            <Server className="w-4 h-4 text-blue-400" />
          </div>
          <div>
            <div className="flex items-center gap-2 mb-1">
              <h4 className="text-sm font-semibold text-slate-900">{node.nodeName}</h4>
              {getStatusIcon()}
            </div>
            <div className="flex items-center gap-2">
              {getStatusBadge()}
              {getRoleBadge()}
            </div>
          </div>
        </div>
        <div className="text-right">
          <p className="text-xs text-slate-500">Age</p>
          <p className="text-xs text-slate-700 font-mono">{node.age}</p>
        </div>
      </div>

      {/* Node Metrics Grid */}
      <div className="grid grid-cols-3 gap-3">
        {/* CPU */}
        <div>
          <div className="flex items-center gap-1.5 mb-1">
            <Cpu className="w-3 h-3 text-blue-400" />
            <p className="text-xs text-slate-500">CPU</p>
          </div>
          <p className="text-xs text-slate-700 font-mono mb-1">
            {node.cpuUsage ?? "N/A"} / {node.cpuAllocatable ?? "N/A"}
          </p>
          <div className="h-1 bg-slate-100 rounded-full overflow-hidden">
            <div
              className="h-full bg-blue-500 rounded-full transition-all"
              style={{ width: `${Math.min(cpuPercent, 100)}%` }}
            />
          </div>
          <p className="text-xs text-slate-500 mt-0.5">{cpuPercent.toFixed(1)}%</p>
        </div>

        {/* Memory */}
        <div>
          <div className="flex items-center gap-1.5 mb-1">
            <Database className="w-3 h-3 text-green-400" />
            <p className="text-xs text-slate-500">Memory</p>
          </div>
          <p className="text-xs text-slate-700 font-mono mb-1">
            {node.memoryUsage ?? "N/A"} / {node.memoryAllocatable ?? "N/A"}
          </p>
          <div className="h-1 bg-slate-100 rounded-full overflow-hidden">
            <div
              className="h-full bg-green-500 rounded-full transition-all"
              style={{ width: `${Math.min(memoryPercent, 100)}%` }}
            />
          </div>
          <p className="text-xs text-slate-500 mt-0.5">{memoryPercent.toFixed(1)}%</p>
        </div>

        {/* GPU */}
        <div>
          <div className="flex items-center gap-1.5 mb-1">
            <Activity className="w-3 h-3 text-purple-400" />
            <p className="text-xs text-slate-500">GPU</p>
          </div>
          {gpuCapacity > 0 ? (
            <>
              <p className="text-xs text-slate-700 font-mono mb-1">
                {node.gpuUsage ?? "N/A"} / {gpuCapacity}
              </p>
              <div className="h-1 bg-slate-100 rounded-full overflow-hidden">
                <div
                  className="h-full bg-purple-500 rounded-full transition-all"
                  style={{ width: `${Math.min(gpuPercent, 100)}%` }}
                />
              </div>
              <p className="text-xs text-slate-500 mt-0.5">
                {gpuPercent.toFixed(1)}%
                {node.gpuType && <span className="ml-1 text-slate-500">({node.gpuType})</span>}
              </p>
            </>
          ) : (
            <p className="text-xs text-slate-500 mt-1">No GPU</p>
          )}
        </div>
      </div>

      {/* Additional Info */}
      <div className="mt-3 pt-3 border-t border-slate-200 grid grid-cols-2 gap-2">
        <div>
          <p className="text-xs text-slate-500">Pods</p>
          <p className="text-xs text-slate-700 font-mono">{node.podCount ?? 0}</p>
        </div>
        {node.kubeletVersion && (
          <div>
            <p className="text-xs text-slate-500">Kubelet</p>
            <p className="text-xs text-slate-700 font-mono">{node.kubeletVersion}</p>
          </div>
        )}
      </div>
    </div>
  );
};
