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

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="text-2xl font-bold">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 className="">
							<CardHeader>
								<CardTitle>Utenti</CardTitle>
								<CardDescription>
									Numero totale di utenti registrati
								</CardDescription>
							</CardHeader>

							<CardContent className="flex h-full items-center justify-center text-6xl font-bold">
								{stats.userCount}
							</CardContent>
						</Card>
						<TimeserieBarChart
							title="Utenti registrati"
							timeserie={stats.userTimeserie}
						/>

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

						<TimeserieBarChart
							title="Contatti generati"
							timeserie={stats.contattiTimeserie}
						/>
					</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="text-2xl font-bold">Le tue ricerche</h3>
					</div>
				</div>

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