import dynamic from "next/dynamic";
import { AccordionComp } from "~/components/accordionComp";
import { LoadingPage } from "~/components/loading";
import { TabRicerca } from "~/components/tables/ricerca-table";
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";

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

const TimeserieBarChartStacked = dynamic(
	() =>
		import("~/components/timeserieBarChartStacked").then((mod) => mod.default),
	{
		ssr: false,
		loading: () => <div className="h-[468px] 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 { data: servizi, isLoading: loadingServizi } =
	//   api.servizio.getAllServizioAnnunci.useQuery({ userId });
	const { t } = useTranslation();
	return (
		<div className="mx-1 flex-1 overflow-auto">
			<div className="mx-auto pt-4">
				<div className="mx-3 items-start justify-between md:flex">
					<div className="flex max-w-lg items-center gap-3">
						<h3 className="font-bold text-2xl">Le tue ricerche</h3>
					</div>
				</div>

				<div className="flex flex-col space-y-5 px-2">
					<TabRicerca isAdmin={false} userId={userId} />
					{/* {loadingServizi ? (
            <LoadingPage />
          ) : (
            servizi?.map((servizio, idx) => (
              <ServizioContainer
                key={idx}
                servizio={servizio}
                userId={userId}
                isAdmin={false}
              />
            ))
          )} */}
				</div>
				<AccordionComp
					className="w-full max-w-full px-2 pt-4"
					texts={t.area_riservata.dash_accordion_minifaq}
				/>
			</div>
		</div>
	);
};