"use client";

import type { StatusServiceInfo } from "@/lib/types";

function formatUptime(seconds: number): string {
  const d = Math.floor(seconds / 86400);
  const h = Math.floor((seconds % 86400) / 3600);
  if (d > 0) return `${d}d ${h}h`;
  const m = Math.floor((seconds % 3600) / 60);
  return `${h}h ${m}m`;
}

function formatBytes(bytes: number): string {
  if (bytes === 0) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
}

export default function ServiceDetail({ service }: { service: StatusServiceInfo }) {
  const statusColor = service.status === "running" ? "text-emerald-400" : service.status === "errored" ? "text-red-400" : "text-amber-400";

  return (
    <div className="flex flex-col gap-2 text-sm">
      <div className="flex justify-between">
        <span className="text-zinc-500">Status</span>
        <span className={`font-mono ${statusColor}`}>{service.status}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">Host</span>
        <span>{service.host}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">Type</span>
        <span className="font-mono text-xs">{service.type}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">Uptime</span>
        <span>{formatUptime(service.uptime_seconds)}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">Restarts</span>
        <span>{service.restart_count}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">Memory</span>
        <span>{formatBytes(service.memory_bytes)}</span>
      </div>
    </div>
  );
}
