import {API_CDN_URL} from "@/constants";
import {formatSystemForUI} from "@/lib/utils";
import React from "react";
import SectionTitle from "./SectionTitle";
import Link from "next/link";
import { Logs } from "lucide-react";

async function getCDNStatus() {
  try {
    const res = await fetch(`${API_CDN_URL}/status`, {
      method: "GET",
      credentials: "include",
    });

    if (!res.ok) {
      const errorData = await res.json().catch(() => null);

      return {
        status: "SERVICE_ERROR",
        message: errorData?.message || "سرویس با خطا پاسخ داد",
        system: null,
      };
    }

    const data = await res.json();
    return {
      status: "OK",
      message: data.message,
      system: data.system,
    };
  } catch {
    return {
      status: "DOWN",
      message: "سرویس پاسخگو نیست",
      system: null,
    };
  }
}

export default async function DashboardCDNServerStatus() {
  const data = await getCDNStatus();

  const {status, message, system} = data || {};

  const uiSystem = system ? formatSystemForUI(system) : null;
  return (
    <section className="rounded-lg border-[1px] border-neutral-200 p-10 bg-white">
      <>
        <div className="flex items-center gap-x-4 mb-10">
          <SectionTitle label="وضعیت سرویس آپلود" />
        </div>
        <div className="flex items-center justify-between">
          <span className="text-sm text-[#313131]">وضعیت</span>
          <div className="flex items-center gap-x-2">
            <span className="relative flex size-3">
              <span
                className={`absolute inline-flex h-full w-full animate-ping rounded-full ${
                  status === "OK" ? "bg-green-400" : "bg-red-400"
                } opacity-75`}
              ></span>
              <span
                className={`relative inline-flex size-3 rounded-full ${
                  status === "OK" ? "bg-green-500" : "bg-red-500"
                }`}
              ></span>
            </span>
            <span className="text-xs font-semibold">
              {message} ({status})
            </span>
          </div>
        </div>
      </>
      {uiSystem && (
        <>
          <div className="flex items-center justify-between gap-x-4 my-10">
            <SectionTitle label="مشخصات سرویس" />
          </div>
          <div className="space-y-4" dir="ltr">
            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">uptime</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">{uiSystem.uptime}</span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">pid</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">{uiSystem.pid}</span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">node version</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">
                  {uiSystem.nodeVersion}
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">heap used</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">
                  {uiSystem.heapUsed}
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">heap total</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">
                  {uiSystem.heapTotal}
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">rss</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">{uiSystem.rss}</span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">cpu user</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">
                  {uiSystem.cpuUser}
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">cpu system</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">
                  {uiSystem.cpuSystem}
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">
                event loop utilization
              </span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">
                  {uiSystem.eventLoopUtil}
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">free memory</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">
                  {uiSystem.freeMemory}
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm text-[#313131]">total memory</span>
              <div className="flex items-center gap-x-2">
                <span className="text-xs font-semibold">
                  {uiSystem.totalMemory}
                </span>
              </div>
            </div>
          </div>
          <div className="flex w-full items-center justify-center mt-10">
            <Link href={"/logs/upload-server"} className="rounded-lg flex items-center justify-center gap-x-4 text-sm font-semibold bg-primary text-white w-full py-4 text-center">
            <span><Logs /></span>
            <span>مشاهده لاگ ها</span>
            </Link>
          </div>
        </>
      )}
    </section>
  );
}
