import { HydrateClient, api } from "@/trpc/server";

export default async function Home() {
	const list = await api.docker.list();

	void api.docker.list.prefetch();

	return (
		<HydrateClient>
			<main className="flex min-h-screen flex-col items-center justify-center">
				<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
					{list ? (
						<div className="overflow-x-auto rounded-md border border-base-content/15 bg-base-100">
							<table className="table-s table">
								<thead>
									<tr>
										<th>Name</th>
										<th>Image</th>
										<th>Version</th>
										<th>Short Hash</th>
										<th>Version</th>
										<th>Short Hash</th>
									</tr>
								</thead>
								<tbody>
									{list
										.sort((ca, cb) => {
											if (ca.Names[0] < cb.Names[0]) {
												return -1;
											}
											if (ca.Names[0] > cb.Names[0]) {
												return 1;
											}
											return 0;
										})
										.map((containerInfo) => {
											const outdated =
												containerInfo.current.version !==
													containerInfo.latest.version ||
												containerInfo.current.hash !==
													containerInfo.latest.hash;
											return (
												<tr
													key={containerInfo.Image.split(":")[0]}
													className={`${outdated ? "bg-base-200" : null}`}
												>
													<td
														className={`border-l-8 ${outdated ? "border-l-error/80" : "border-l-info/80"}`}
													>
														{containerInfo.Names[0]?.substring(1)}
													</td>
													<td>{containerInfo.Image.split(":")[0]}</td>
													<td>{containerInfo.current.version}</td>
													<td>{containerInfo.current.hash}</td>
													<td>{containerInfo.latest.version}</td>
													<td>{containerInfo.latest.hash}</td>
												</tr>
											);
										})}
								</tbody>
							</table>
						</div>
					) : (
						"Loading tRPC query..."
					)}
				</div>
			</main>
		</HydrateClient>
	);
}
