import Head from "next/head";
import { AreaRiservataLayout } from "~/components/Layout";
import type { NextPageWithLayout } from "~/pages/_app";
import { useTranslation } from "~/providers/I18nProvider";
import { api } from "~/utils/api";

const Impostazioni: NextPageWithLayout = () => {
	const { t } = useTranslation();

	return (
		<>
			<Head>
				<title>{t.heads.area_riservata_titolo}</title>
				<meta content={t.heads.area_riservata_description} name="description" />
			</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">Impostazioni</h3>
					</div>
				</div>
				<StripeSection />
			</div>
		</>
	);
};
export default Impostazioni;

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

// 	const helpers = await TrpcAuthedFetchingIstance({ access_token });
// 	if (helpers) {

// 		return {
// 			props: {
// 				trpcState: helpers.trpc.dehydrate(),
// 			},
// 		};
// 	}
// 	return {
// 		props: {},
// 	};
// }) satisfies GetServerSideProps;

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

const StripeSection = () => {
	const { data, isLoading } = api.stripe.health.useQuery();
	if (isLoading) {
		return <div>Loading...</div>;
	}
	console.log(data);
	return (
		<div className="rounded-lg border p-4">
			<h4 className="mb-2 font-semibold text-lg">
				Stripe Status: {data?.success ? "Sano" : "Non sano"}
			</h4>
			<p>Endpoint Webhook:</p>
			{data?.endpoints?.data.map((endpoint) => (
				<div className="mb-2" key={endpoint.id}>
					<p>
						ID: <code>{endpoint.id}</code>
					</p>
					<p>
						URL: <code>{endpoint.url}</code>
					</p>

					<p>Eventi attivi: </p>
					<ul className="list-inside list-disc">
						{endpoint.enabled_events.map((event) => (
							<li key={event}>{event}</li>
						))}
					</ul>
					<p>Versione Api: {endpoint.api_version}</p>
					<p>
						Stato: <code>{endpoint.status}</code>
					</p>
					<hr className="my-2" />
				</div>
			))}
		</div>
	);
};
