"use client";

import type { dockerRouterType } from "@/server/api/routers/docker";
import { api } from "@/trpc/react";
import type { JSX } from "react";

function DockerCard({
	containerInfo,
}: {
	containerInfo: dockerRouterType["list"][number];
}) {
	const { data: latest, isError, isLoading, error } = api.docker.latest.useQuery({ id: containerInfo.container.id }, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false });

	let latestFragment: JSX.Element | null = null;
	if (isError) {
		latestFragment = (
			<div className="flex flex-row flex-wrap *:basis-1/2">
				<dt>Tag</dt>
				<dd>Error: {error.message}</dd>

				<dt>Short Hash</dt>
				<dd>Error: {error.message}</dd>
			</div>
		);
	} else if (isLoading) {
		latestFragment = (
			<div className="flex flex-row flex-wrap *:basis-1/2">
				<dt>Tag</dt>
				<dd className="loading loading-dots loading-sm" />

				<dt>Short Hash</dt>
				<dd className="loading loading-dots loading-sm" />
			</div>
		);
	} else if (latest) {
		latestFragment = (
			<div className="flex flex-row flex-wrap *:basis-1/2">
				<dt>Tag</dt>
				<dd>{latest?.latest.tag ?? "Unknown"}</dd>

				<dt>Short Hash</dt>
				<dd>{latest?.latest.hash ?? "Unknown"}</dd>
			</div>
		);
	}

	const outdated = containerInfo.image.current.hash !== latest?.latest.hash;
	const showWarning = isLoading || (!isError && !isLoading && (!latest?.latest.tag || !latest?.latest.hash));

	return (
		<div
			key={containerInfo.container.name}
			className={`card card-outline card-compact w-80 border-t-8 bg-base-300 shadow-md ${showWarning ? "border-t-warning/80" : outdated ? "border-t-error/80" : "border-t-info/80"}`}
		>
			<dl className="card-body flex flex-col flex-wrap items-center justify-around text-base">
				<h2 className="text-center text-3xl">{containerInfo.container.name}</h2>
				<p>{containerInfo.image.name}</p>
				<div className="divider divider-primary m-1" />
				<h3 className="text-xl underline decoration-1 underline-offset-4">Current</h3>
				<div className="flex flex-row flex-wrap *:basis-1/2">
					<dt>Tag</dt>
					<dd>{containerInfo.image.current.tag}</dd>
					<dt>Short Hash</dt>
					<dd>{containerInfo.image.current.hash}</dd>
				</div>
				<div className="divider divider-primary m-0" />
				<h3 className="text-xl underline decoration-1 underline-offset-4">Latest</h3>
				{latestFragment}
			</dl>
		</div>
	);
}

export function DockerTable() {
	const { data: list, isLoading: listLoading, error } = api.docker.list.useQuery(undefined, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false });

	return (
		<>
			{listLoading ? (
				<>Loading docker container list...</>
			) : (
				<>
					<div className={"flex flex-row flex-wrap justify-around gap-8"}>
						{list ? (
							list
								.sort((ca, cb) => {
									if (ca.container.name && cb.container.name) {
										if (ca.container.name < cb.container.name) {
											return -1;
										}
										if (ca.container.name > cb.container.name) {
											return 1;
										}
									}
									return 0;
								})
								.map((containerInfo) => <DockerCard key={containerInfo.container.name} containerInfo={containerInfo} />)
						) : (
							<>Error loading docker container list: {error?.message}</>
						)}
					</div>
				</>
			)}
		</>
	);
}