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

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

/**
 * 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} (${hostname}): ${status}\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">
        <h1 className="text-xl">Mojang Status</h1>
        <p>The current status of Mojang Services</p>
      </div>
      <Card classNameCard="py-0 pb-2" classNameContent="w-[23rem] md:w-[35rem] text-left">
        <div className="flex flex-col divide-y gap-2">
          {endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
          {endpoints.length > 0 &&
            endpoints.map((endpoint: CachedEndpointStatus) => {
              const { name, hostname, status } = endpoint;

              const url = `https://${hostname}`;
              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={url}
                      className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
                      target="_blank"
                    >
                      <p>{url}</p>
                    </Link>
                  </div>
                  <div className={cn("flex items-center font-semibold", getColor(status))}>
                    <p>{formatStatus(status)}</p>
                  </div>
                </div>
              );
            })}
        </div>
      </Card>
    </div>
  );
}