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

const hostColors: Record<string, string> = {
  atlantis: "text-blue-400",
  calypso: "text-violet-400",
  olares: "text-emerald-400",
  nuc: "text-amber-400",
  rpi5: "text-cyan-400",
};

const hostDescriptions: Record<string, string> = {
  atlantis: "NAS · media stack",
  calypso: "DNS · SSO · Headscale",
  olares: "K3s · 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 statusColor = error ? "red" : running > 0 ? "green" : "amber";
  const hoverBorder = error
    ? "hover:border-red-500/20"
    : running > 0
      ? "hover:border-green-500/20"
      : "hover:border-amber-500/20";

  const hoverGlow = error
    ? "hover:shadow-[0_0_16px_rgba(239,68,68,0.05)]"
    : running > 0
      ? "hover:shadow-[0_0_16px_rgba(34,197,94,0.05)]"
      : "hover:shadow-[0_0_16px_rgba(245,158,11,0.05)]";

  return (
    <Card
      className={`card-hover-lift transition-all duration-300 ${hoverBorder} ${hoverGlow} 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 capitalize ${hostColors[name] ?? "text-foreground"}`}>
            {name}
          </span>
          <StatusBadge
            color={statusColor}
            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/60 mt-0.5">
            {hostDescriptions[name]}
          </p>
        )}
      </CardContent>
    </Card>
  );
}

export function HostRow({ name, running, total, error }: HostCardProps) {
  const isOlares = name === "olares";
  return (
    <div className="flex items-center justify-between py-2 px-1 text-sm">
      <div className="flex items-center gap-2">
        <span
          className={`w-2 h-2 rounded-full ${error ? "bg-red-500" : "bg-green-500"}`}
          style={{
            boxShadow: error
              ? "0 0 6px rgba(239,68,68,0.5)"
              : "0 0 6px rgba(34,197,94,0.5)",
          }}
        />
        <span className={`font-medium capitalize ${hostColors[name] ?? "text-foreground"}`}>{name}</span>
      </div>
      <span className="text-muted-foreground text-xs">
        {isOlares && !total ? "K3s + GPU" : `${running}/${total}`}
      </span>
    </div>
  );
}