import { Laptop, Monitor, Terminal, type LucideIcon } from "lucide-react";

import { cn } from "@/lib/cn";
import type { SystemStatus } from "@/lib/types";

const osIcons: Record<string, LucideIcon> = {
  linux: Terminal,
  apple: Laptop,
  windows: Monitor,
};

function formatMs(value: number): string {
  return value >= 100 ? `${Math.round(value)}ms` : `${value.toFixed(1)}ms`;
}

export function StatusPill({ status }: { status?: SystemStatus }) {
  if (!status) return null;
  const OsIcon = osIcons[status.os.icon] ?? Monitor;

  return (
    <span
      className="hidden select-none items-center gap-1.5 rounded-full border border-ctp-surface0 bg-ctp-mantle px-2.5 py-1 font-mono text-[11px] text-ctp-overlay1 lg:flex"
      title={`${status.os.name} ${status.os.release} · built from ${status.git_hash}`}
    >
      <span
        className={cn(
          "font-medium",
          status.env === "prod" ? "text-ctp-teal" : "text-ctp-yellow",
        )}
      >
        ENV: {status.env.toUpperCase()}
      </span>
      <span className="text-ctp-surface2">·</span>
      <span>{status.git_hash}</span>
      <span className="text-ctp-surface2">·</span>
      <OsIcon className="h-3 w-3" />
      <span>{status.os.name}</span>
      <span className="text-ctp-surface2">·</span>
      <span>{formatMs(status.server_time_ms)}</span>
      {status.e621_time_ms !== null ? (
        <>
          <span className="text-ctp-surface2">·</span>
          <span>e621: {formatMs(status.e621_time_ms)}</span>
        </>
      ) : null}
    </span>
  );
}