import { Colors } from "@/app/common/colors";
import { generateEmbed } from "@/app/common/embed";
import { capitalizeFirstLetter } from "@/app/common/string-utils";
import { cn } from "@/app/common/utils";
import { Card } from "@/app/components/card";
import { Title } from "@/app/components/title";
import { CachedEndpointStatus, getMojangEndpointStatus, Status } from "mcutils-library";
import { Metadata, Viewport } from "next";
import Link from "next/link";
import { ReactElement } from "react";

/**
 * Force the page to be dynamic, so it will be regenerated on every request
 */
export const revalidate = 0;

/**
 * Gets the color of the status
 *
 * @param status the status of the endpoint
 * @returns the color of the status
 */
function getColor(status: any): string {
  switch (status) {
    case "ONLINE":
      return "text-green-500";
    case "DEGRADED":
      return "text-yellow-500";
    case "OFFLINE":
      return "text-red-500";
    default:
      return "text-gray-500";
  }
}

/**
 * Formats the status
 *
 * @param status the status of the endpoint
 * @returns the formatted status
 */
function formatStatus(status: any): string {
  return capitalizeFirstLetter(status.toLowerCase());
}

export async function generateViewport(): Promise<Viewport> {
  const { endpoints } = await getMojangEndpointStatus();

  let warning = false;
  for (const endpoint of endpoints) {
    if (endpoint.status != Status.ONLINE) {
      warning = true;
      break;
    }
  }

  return {
    themeColor: warning ? Colors.yellow : Colors.green,
  };
}

export async function generateMetadata(): Promise<Metadata> {
  const { endpoints } = await getMojangEndpointStatus();

  let description = "Current Mojang API Status:\n";
  for (const endpoint of endpoints) {
    const { name, hostname, status } = endpoint;

    description += `${name}: ${capitalizeFirstLetter(status.toLowerCase())}\n`;
  }

  return generateEmbed({
    title: "Mojang Status",
    description: description,
  });
}

export default async function Page(): Promise<ReactElement> {
  const { endpoints } = await getMojangEndpointStatus();

  return (
    <div>
      <div className="text-center mb-4">
        <Title title="Mojang Status" subtitle="The current status of Mojang Services" />
      </div>
      <Card
        classNameCard="py-0 pb-2 w-screen xs:w-[28rem] md:w-[35rem]"
        classNameContent="text-left flex flex-col divide-y gap-2"
      >
        {endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
        {endpoints.length > 0 &&
          endpoints.map((server: CachedEndpointStatus) => {
            const { name, endpoint, status } = server;

            return (
              <div key={name} className="flex flex-row justify-between pt-2">
                <div className="flex flex-col leading-[1.5rem]">
                  <p className="font-semibold">{name}</p>
                  <Link
                    href={endpoint}
                    className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
                    target="_blank"
                  >
                    <p>{endpoint}</p>
                  </Link>
                </div>
                <div className={cn("flex items-center font-semibold", getColor(status))}>
                  <p>{formatStatus(status)}</p>
                </div>
              </div>
            );
          })}
      </Card>
    </div>
  );
}