import { CircleHelp } from "lucide-react";
import dynamic from "next/dynamic";
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";

const TimeserieBarChart = dynamic(
	() => import("~/components/timeserieBarChart").then((mod) => mod.default),
	{
		ssr: false,
		loading: () => <div className="h-117 animate-pulse bg-gray-100" />,
	},
);

const TimeserieBarChartStacked = dynamic(
	() =>
		import("~/components/timeserieBarChartStacked").then((mod) => mod.default),
	{
		ssr: false,
		loading: () => <div className="h-117 animate-pulse bg-gray-100" />,
	},
);

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>
						<TimeserieBarChart
							timeserie={stats.userTimeserie}
							title="Utenti registrati"
						/>

						<TimeserieBarChartStacked
							timeserie={stats.serviziTimeserie.data}
							title="Servizi creati"
							valueALabel={stats.serviziTimeserie.valueALabel}
							valueBLabel={stats.serviziTimeserie.valueBLabel}
						/>

						<TimeserieBarChart
							timeserie={stats.contattiTimeserie}
							title="Contatti generati"
						/>
					</div>
				)}
			</div>
		</div>
	);
};

export const UserDashboard = ({ userId }: { userId: UsersId }) => {
	const { t } = useTranslation();
	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">
				<Credenza>
					<CredenzaTrigger asChild>
						<Button variant="secondary">
							<span>Domande frequenti</span>
							<CircleHelp />
						</Button>
					</CredenzaTrigger>
					<CredenzaContent className="max-h-[90vh] w-full md:max-w-3xl">
						<CredenzaHeader>
							<CredenzaTitle className="text-center font-semibold text-2xl">
								Domande frequenti
							</CredenzaTitle>
							<CredenzaDescription className="sr-only">
								Domande frequenti
							</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>
			</div>
		</div>
	);
};