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

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

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

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

export function StatusPill({ status }: { status?: SystemStatus }) {
  const requestCount = useE621Metrics((state) => state.requestCount);
  const totalMs = useE621Metrics((state) => state.totalMs);
  const last = useE621Metrics((state) => state.last);

  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>
      {requestCount > 0 ? (
        <>
          <span className="text-ctp-surface2">·</span>
          <span
            className="text-ctp-teal"
            title={`${requestCount} e621 request${
              requestCount === 1 ? "" : "s"
            } this session · last ${last ? `${formatMs(last.ms)} (${last.path})` : "—"}`}
          >
            e621: {formatMs(totalMs)}
          </span>
        </>
      ) : null}
      {status.e621_time_ms !== null ? (
        <>
          <span className="text-ctp-surface2">·</span>
          <span title="Server-side e621 time">
            e621 (server): {formatMs(status.e621_time_ms)}
          </span>
        </>
      ) : null}
    </span>
  );
}