import { format } from "date-fns";
import type { GetServerSideProps } from "next";
import Head from "next/head";
import Link from "next/link";
import { AreaRiservataLayout } from "~/components/Layout";
import { LoadingPage } from "~/components/loading";
import { Status500 } from "~/components/status-page";
import { Button } from "~/components/ui/button";
import { Separator } from "~/components/ui/separator";
import type { NextPageWithLayout } from "~/pages/_app";
import { TrpcAuthedFetchingIstance } from "~/server/utils/ssgHelper";
import { api } from "~/utils/api";

const Incroci: NextPageWithLayout = () => {
	const { data, isLoading } = api.incroci.getAll.useQuery();

	if (isLoading) return <LoadingPage />;
	if (!data) return <Status500 />;

	return (
		<>
			<Head>
				<title>Incorici - Infoalloggi.it</title>
			</Head>

			<div className="mx-3 flex flex-1 flex-col gap-4 overflow-auto pt-5">
				<div className="items-start justify-between md:flex">
					<div className="mx-1 flex items-center">
						<h3 className="font-bold text-2xl">Incroci</h3>
					</div>
				</div>
				<div className="space-y-4">
					{data.map((incrocio) => (
						<div className="rounded-md border p-4" key={incrocio.id}>
							<div className="flex items-center gap-2 font-bold text-xl">
								<span>Cod:</span>
								<span>{incrocio.codice}</span>
							</div>
							<div className="flex items-center gap-2">
								<span className="font-bold">Titolo:</span>
								<span>{incrocio.titolo_it}</span>
							</div>
							<div className="flex items-center gap-2">
								<span className="font-bold">Richieste:</span>
							</div>
							<ul className="ml-4 space-y-2">
								{incrocio.richieste.map((r) => (
									<li key={r.servizio_id}>
										<div className="flex items-center gap-2">
											<span className="font-bold">Username:</span>
											<span>{r.username}</span>
										</div>
										<div className="flex items-center gap-2">
											<span className="font-bold">Aggiunto il:</span>
											<span>
												{format(new Date(r.created_at), "dd/MM/yyyy")}
											</span>
										</div>
										<div className="flex items-center gap-2">
											<span className="font-bold">Aperto Contatti il:</span>
											<span>
												{r.open_contatti_at
													? format(new Date(r.open_contatti_at), "dd/MM/yyyy")
													: "Non aperto"}
											</span>
										</div>
										<div className="flex items-center gap-2">
											<span className="font-bold">Mandato conferma il:</span>
											<span>
												{r.user_confirmed_at
													? format(new Date(r.user_confirmed_at), "dd/MM/yyyy")
													: "Non confermato"}
											</span>
										</div>
										<div className="flex items-center gap-2">
											<span className="font-bold">Conferma da Admin:</span>
											<span>{r.hasConfermaAdmin ? "Si" : "No"}</span>
										</div>
										<Link
											href={`/area-riservata/admin/user-view/servizio/${r.userId}/${r.servizio_id}`}
											target="_blank"
										>
											<Button size="sm">Apri Servizio</Button>
										</Link>
										<Separator className="mt-2" />
									</li>
								))}
							</ul>
						</div>
					))}
				</div>
			</div>
		</>
	);
};

export default Incroci;

export const getServerSideProps = (async (context) => {
	const access_token = context.req.cookies.access_token;

	const helpers = await TrpcAuthedFetchingIstance({ access_token });
	if (helpers) {
		await helpers.trpc.incroci.getAll.prefetch();
		return {
			props: {
				trpcState: helpers.trpc.dehydrate(),
			},
		};
	}
	return {
		props: {},
	};
}) satisfies GetServerSideProps;

Incroci.getLayout = function getLayout(page) {
	return <AreaRiservataLayout>{page}</AreaRiservataLayout>;
};
