import { CircleHelp } from "lucide-react";
import { AccordionComp } from "~/components/accordionComp";
import { LoadingPage } from "~/components/loading";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "~/components/ui/card";
import { useTranslation } from "~/providers/I18nProvider";
import type { UsersId } from "~/schemas/public/Users";
import { api } from "~/utils/api";
import {
	Credenza,
	CredenzaBody,
	CredenzaContent,
	CredenzaDescription,
	CredenzaHeader,
	CredenzaTitle,
	CredenzaTrigger,
} from "../custom_ui/credenza";
import { ServizioList } from "../servizio/servizio";
import { Button } from "../ui/button";

export const AdminDashboard = () => {
	const { data: stats, isLoading } = api.stats.adminDashStats.useQuery();

	if (isLoading) return <LoadingPage />;
	return (
		<div className="mx-1 flex-1 overflow-auto">
			<div className="mx-auto pt-4 pb-8">
				<div className="mx-3 items-start justify-between pb-3 md:flex">
					<div className="flex max-w-lg items-center gap-3">
						<h3 className="font-bold text-2xl">Admin Dashboard</h3>
					</div>
				</div>
				{!stats ? (
					<div className="text-red-500">Errore caricamento statistiche</div>
				) : (
					<div className="grid grid-cols-1 gap-4 px-2 pt-4 sm:grid-cols-2 sm:px-4">
						<Card>
							<CardHeader>
								<CardTitle>Utenti</CardTitle>
								<CardDescription>
									Numero totale di utenti registrati
								</CardDescription>
							</CardHeader>

							<CardContent className="flex h-full items-center justify-center font-bold text-6xl">
								{stats.userCount}
							</CardContent>
						</Card>
					</div>
				)}
			</div>
		</div>
	);
};

export const UserDashboard = ({ userId }: { userId: UsersId }) => {
	const { data, isLoading } = api.servizio.getAllServizioAnnunci.useQuery({
		userId,
	});

	if (isLoading) return <LoadingPage />;

	return (
		<div className="mt-2 flex w-full flex-1 flex-col items-start justify-center gap-4 overflow-auto p-2 md:gap-6">
			<h3 className="font-bold text-2xl">Le tue ricerche</h3>

			<div className="flex w-full flex-1 grow flex-col space-y-5">
				<ServizioList isAdmin={false} servizi={data || []} userId={userId} />
			</div>
			<div className="mx-auto">
				<UserDashboardFaq />
			</div>
		</div>
	);
};

export const UserDashboardFaq = () => {
	const { t, locale } = useTranslation();
	const title =
		locale === "it" ? "Domande frequenti" : "Frequently Asked Questions";
	return (
		<Credenza>
			<CredenzaTrigger asChild>
				<Button variant="secondary">
					<span>{title}</span>
					<CircleHelp />
				</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh] w-full md:max-w-3xl">
				<CredenzaHeader>
					<CredenzaTitle className="text-center font-semibold text-2xl">
						{title}
					</CredenzaTitle>
					<CredenzaDescription className="sr-only">{title}</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="max-h-[80vh] overflow-auto pb-5">
					<AccordionComp
						className="w-full max-w-full"
						texts={t.area_riservata.dash_accordion_minifaq}
					/>
				</CredenzaBody>
			</CredenzaContent>
		</Credenza>
	);
};