import { Card, CardContent } from "@/components/ui/card";
import { StatusBadge } from "./status-badge";

const hostDescriptions: Record<string, string> = {
  atlantis: "NAS \u00b7 media stack",
  calypso: "DNS \u00b7 SSO \u00b7 Headscale",
  olares: "K3s \u00b7 RTX 5090",
  nuc: "lightweight svcs",
  rpi5: "Uptime Kuma",
};

interface HostCardProps {
  name: string;
  running: number;
  total: number;
  error?: boolean;
}

export function HostCard({ name, running, total, error }: HostCardProps) {
  const borderColor = error
    ? "border-red-500/30 hover:border-red-500/50"
    : running > 0
      ? "border-green-500/20 hover:border-green-500/40"
      : "border-amber-500/20 hover:border-amber-500/40";

  const glowColor = error
    ? "hover:shadow-red-500/5"
    : running > 0
      ? "hover:shadow-green-500/5"
      : "hover:shadow-amber-500/5";

  const pct = total > 0 ? (running / total) * 100 : 0;

  return (
    <Card
      className={`card-hover-lift border transition-colors duration-300 ${borderColor} ${glowColor} overflow-hidden relative group`}
    >
      <CardContent className="pt-3 pb-3 px-4">
        <div className="flex items-center justify-between mb-1">
          <span className="text-sm font-medium text-foreground capitalize">
            {name}
          </span>
          <StatusBadge
            color={error ? "red" : running > 0 ? "green" : "amber"}
            label={error ? "error" : "online"}
          />
        </div>
        <p className="text-xs text-muted-foreground">
          {running}/{total} containers
        </p>
        {hostDescriptions[name] && (
          <p className="text-[10px] text-muted-foreground mt-0.5">
            {hostDescriptions[name]}
          </p>
        )}
        {/* Utilization micro-bar */}
        <div className="mt-2 h-1 rounded-full bg-secondary/50 overflow-hidden">
          <div
            className="h-full rounded-full bg-gradient-to-r from-green-500 to-emerald-400 transition-all duration-500"
            style={{ width: `${pct}%` }}
          />
        </div>
      </CardContent>
    </Card>
  );
}