import { ArrowRight } from "lucide-react";
import type { GetServerSideProps } from "next";
import Link from "next/link";
import { AreaRiservataLayout } from "~/components/Layout";
import { Button } from "~/components/ui/button";
import { formatCurrency, redirectTo500 } from "~/lib/utils";
import type { NextPageWithLayout } from "~/pages/_app";
import { TrpcAuthedFetchingIstance } from "~/server/utils/ssgHelper";
import { zOrdineId } from "~/server/utils/zod_types";

type BonificoManualeProps = {
	titolo: string;
	prezzo: number;
	sconto: number;
	descrizione: string;
};

/**
 * /servizio/bonifico-checkout/[ordineId] \
 * Pagina di checkout per il pagamento di un ordine di servizio tramite bonifico
 */
const BonificoManualePage: NextPageWithLayout<BonificoManualeProps> = ({
	titolo,
	prezzo,
	sconto,
	descrizione,
}: BonificoManualeProps) => {
	return (
		<div className="mx-auto my-5 w-full max-w-lg space-y-8">
			<h1 className="font-semibold text-3xl">Pagamento tramite bonifico</h1>
			<div className="space-y-4 rounded border p-4">
				<p className="font-bold text-xl">{titolo}</p>
				<p className="text-lg">{descrizione}</p>
				<p className="font-semibold text-lg">
					Importo: {formatCurrency(prezzo / 100)}{" "}
					{sconto > 0 && (
						<span className="text-green-500">(Sconto: {sconto}%)</span>
					)}
				</p>
				<div className="space-y-2 rounded bg-gray-100 p-4">
					<p className="font-semibold">Istruzioni per il bonifico:</p>
					<ul className="list-disc pl-5">
						<li>
							Intestazione: <b>Arcenia Srl</b>
						</li>
						<li>
							IBAN: <b>IT33F0326860160052727620300</b> BANCA SELLA (Codice
							Swift) SELBIT2BXXX per bonifici esteri
						</li>
						<li>
							Causale: <b>{titolo}</b>
						</li>
					</ul>
				</div>
				<p className="">
					Inoltraci la contabile del bonifico per velocizzare la verifica del
					pagamento.
				</p>
				<span>Grazie!</span>
			</div>
			<Link href="/area-riservata/dashboard">
				<Button className="w-full" variant="outline">
					<span>Torna ai servizi</span>
					<ArrowRight className="size-4" />
				</Button>
			</Link>
		</div>
	);
};

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

export default BonificoManualePage;

export const getServerSideProps = (async (context) => {
	const id = context.params?.ordineId;
	if (typeof id !== "string") {
		console.error("Error: ordineId is not a string");
		return redirectTo500;
	}

	const parsed = zOrdineId.safeParse(id);
	if (!parsed.success) {
		console.error("Error parsing ordineId", parsed.error);
		return redirectTo500;
	}

	const access_token = context.req.cookies.access_token;

	const helper = await TrpcAuthedFetchingIstance({ access_token });
	if (helper) {
		const paymentData =
			await helper.trpc.pagamenti.getPagamentoDataForCheckout.fetch({
				ordineId: parsed.data,
			});

		return {
			props: {
				titolo: paymentData.nome_it,
				prezzo: paymentData.amount_cent,
				sconto: paymentData.sconto,
				descrizione: paymentData.desc_it,
			},
		};
	}
	return redirectTo500;
}) satisfies GetServerSideProps<BonificoManualeProps>;
