import { Link } from "react-router-dom";
import type { FleetHost } from "@/api/dashboard";
import { cn, formatBytes } from "@/lib/utils";

const DISK_PRESSURE = 85;
const MEM_PRESSURE = 90;

function Meter({ used, total, pressure }: { used: number; total: number; pressure: number }) {
  const pct = total > 0 ? Math.round((used / total) * 100) : 0;
  const hot = pct >= pressure;
  return (
    <div className="min-w-[7rem]">
      <div className="mb-1 flex items-center justify-between text-xs">
        <span className={cn("font-semibold", hot ? "text-red-600 dark:text-red-400" : "text-sp-text-1")}>
          {pct}%
        </span>
        <span className="text-sp-text-3">
          {formatBytes(used)} / {formatBytes(total)}
        </span>
      </div>
      <div className="h-1.5 rounded-pill bg-sp-surface-2">
        <div
          className={cn("h-1.5 rounded-pill", hot ? "bg-red-500" : "bg-sp-blue")}
          style={{ width: `${Math.min(pct, 100)}%` }}
        />
      </div>
    </div>
  );
}

export function HostResourceTable({ hosts }: { hosts: FleetHost[] }) {
  return (
    <div className="sp-card overflow-hidden p-0">
      <div className="border-b border-sp-border px-4 py-2.5">
        <h2 className="sp-label">Hosts</h2>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="text-left text-xs text-sp-text-3">
              <th className="px-4 py-2 font-medium">Host</th>
              <th className="px-4 py-2 font-medium">CPU</th>
              <th className="px-4 py-2 font-medium">Memory</th>
              <th className="px-4 py-2 font-medium">Disk</th>
              <th className="px-4 py-2 font-medium">Containers</th>
              <th className="px-4 py-2 font-medium">Stacks</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-sp-border">
            {hosts.map((h) => (
              <tr key={String(h.id)} className="align-middle">
                <td className="px-4 py-3">
                  <div className="flex items-center gap-2">
                    <span
                      className={cn(
                        "h-2.5 w-2.5 shrink-0 rounded-full",
                        h.online ? "bg-sp-green" : "bg-slate-400"
                      )}
                      title={h.status}
                    />
                    <span className="font-medium text-sp-text-1">{h.name}</span>
                  </div>
                </td>
                {h.online ? (
                  <>
                    <td className="px-4 py-3 text-sp-text-2">{h.cpu_cores || "—"}</td>
                    <td className="px-4 py-3">
                      <Meter used={h.mem_used} total={h.mem_total} pressure={MEM_PRESSURE} />
                    </td>
                    <td className="px-4 py-3">
                      <Meter used={h.disk_used} total={h.disk_total} pressure={DISK_PRESSURE} />
                    </td>
                    <td className="px-4 py-3 text-sp-text-2">
                      {h.containers_running}/{h.containers_total}
                    </td>
                    <td className="px-4 py-3 text-sp-text-2">
                      {h.stacks.running}/{h.stacks.total}
                      {h.unhealthy > 0 && (
                        <span className="ml-1.5 text-xs font-semibold text-red-600 dark:text-red-400">
                          · {h.unhealthy} unhealthy
                        </span>
                      )}
                    </td>
                  </>
                ) : (
                  <td className="px-4 py-3 text-sp-text-3" colSpan={5}>
                    {h.status} —{" "}
                    <Link to="/settings" className="text-sp-blue hover:underline">
                      check under Settings
                    </Link>
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}