import { Card } from "@/app/components/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/app/components/ui/table";
import { generateEmbed } from "@/common/embed";
import { capitalizeFirstLetter } from "@/common/string-utils";
import { cn } from "@/common/utils";
import { getMojangEndpointStatus } from "mcutils-library";
import { CachedEndpointStatus } from "mcutils-library/dist/types/cache/cachedEndpointStatus";
import { Metadata } from "next";
import Link from "next/link";

/**
 * 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());
}

async function getData(): Promise<CachedEndpointStatus> {
  const status = await getMojangEndpointStatus();
  return status;
}

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

  let description = "The current status of Mojang Services";
  description += Object.entries(endpoints)
    .map(([url, status]) => {
      return `**${url}**: ${formatStatus(status)}`;
    })
    .join("\n");

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

export default async function Page(): Promise<JSX.Element> {
  const { endpoints } = await getData();
  const endpointsSize = Object.entries(endpoints).length;

  return (
    <div className="flex justify-center text-center">
      <Card className="w-max xs:w-fit">
        <h1 className="text-xl">Mojang Status</h1>
        <p>The current status of Mojang Services</p>

        <div>
          {endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
          {endpointsSize > 0 && (
            <Table className="mt-4 md:w-[500px] text-start">
              <TableHeader>
                <TableRow>
                  <TableHead className="pl-1">Service</TableHead>
                  <TableHead className="pl-1 text-center">Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {Object.entries(endpoints).map(([url, status]) => {
                  return (
                    <TableRow key={url}>
                      <TableCell className="p-[0.3rem]">
                        <Link className="hover:text-primary transition-all" href={url} target="_blank">
                          {url}
                        </Link>
                      </TableCell>
                      <TableCell className={cn(getColor(status), "p-[0.3rem] text-center")}>
                        {formatStatus(status)}
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          )}
        </div>
      </Card>
    </div>
  );
}