import Head from "next/head";
import toast from "react-hot-toast";
import { AreaRiservataLayout } from "~/components/Layout";
import { LoadingPage } from "~/components/loading";
import { Button } from "~/components/ui/button";
import type { NextPageWithLayout } from "~/pages/_app";
import { api } from "~/utils/api";

/**
 * Pagina di impostazioni per admin: /area-riservata/admin/impostazioni
 */
const Impostazioni: NextPageWithLayout = () => {
	return (
		<>
			<Head>
				<title>Impostazioni - 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">Impostazioni</h3>
					</div>
				</div>
				<StripeSection />
				<RedisCacheSection />
			</div>
		</>
	);
};
export default Impostazioni;

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

const StripeSection = () => {
	const { data, isLoading } = api.stripe.health.useQuery();
	if (isLoading) {
		return <div>Loading...</div>;
	}

	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>Keys:</p>
			<p>
				Secret Key: <span className="wrap-anywhere">{data?.secretKey}</span>
			</p>
			<p>
				Public Key: <span className="wrap-anywhere">{data?.publicKey}</span>
			</p>
			<hr />
			<p>Endpoint Webhook:</p>
			{data?.endpoints?.data.map((endpoint) => (
				<div className="mb-2" key={endpoint.id}>
					<p>ID: {endpoint.id}</p>
					<p>URL: {endpoint.url}</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: {endpoint.status}</p>

					<hr className="my-2" />
				</div>
			))}
		</div>
	);
};

const RedisCacheSection = () => {
	const { data, isLoading } = api.revalidation.getRedisStats.useQuery();
	const utils = api.useUtils();
	const { mutate } = api.revalidation.invalidateRedisCache.useMutation({
		onMutate() {
			toast.loading("Invalidating cache...", {
				id: "invalidate-cache",
			});
		},
		onSuccess: async () => {
			toast.success("Cache invalidated successfully!", {
				id: "invalidate-cache",
			});
			await utils.revalidation.getRedisStats.invalidate();
		},
		onError() {
			toast.error("Failed to invalidate cache.", {
				id: "invalidate-cache",
			});
		},
	});
	if (isLoading) {
		return <LoadingPage />;
	}
	return (
		<div className="space-y-4 rounded-lg border p-4">
			<h4 className="font-semibold text-lg">Invalidate Redis Cache</h4>
			<p>Current Cache Stats:</p>
			{data?.success ? (
				<ul className="list-inside list-disc">
					<li>Pdf Schede Annuncio: {data?.schedaCount}</li>
					<li>Pdf Condizioni: {data?.condizioniCount}</li>
				</ul>
			) : (
				<div className="text-red-500">Error fetching cache stats</div>
			)}

			<Button onClick={() => mutate()}>Invalidate Cache</Button>
		</div>
	);
};
