import Head from "next/head";
import { AreaRiservataLayout } from "~/components/Layout";
import { LoadingPage } from "~/components/loading";
import { Status500 } from "~/components/status-page";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "~/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
import { UserAvatar } from "~/components/user_avatar";
import { ChangePasswordForm } from "~/forms/FormChangePassword";
import { ProfileFormAccount } from "~/forms/FormProfilo_Account";
import { ProfileFormAnagrafica } from "~/forms/FormProfilo_Anagrafica";
import type { NextPageWithLayout } from "~/pages/_app";
import { useTranslation } from "~/providers/I18nProvider";
import { useEnforcedSession } from "~/providers/SessionProvider";
import { api } from "~/utils/api";

const Dashboard: NextPageWithLayout = () => {
	const { t } = useTranslation();
	const { data: userData, isLoading } = api.users.getClientProfilo.useQuery({
		id: undefined,
	});
	const session = useEnforcedSession();
	if (isLoading) return <LoadingPage />;
	if (!userData) return <Status500 />;

	return (
		<>
			<Head>
				<title>{t.heads.area_riservata_titolo}</title>
				<meta content={t.heads.area_riservata_description} name="description" />
			</Head>

			<div className="mx-auto w-full max-w-5xl grow p-4">
				<div className="flex p-1 py-2">
					<UserAvatar
						userId={session.user.id}
						username={session.user.username}
					/>

					<div className="flex flex-col items-start justify-center pl-4">
						<h1 className="text-primary text-2xl font-bold">Profilo Utente</h1>
						<p className="text-muted-foreground text-sm">
							Gestisci le tue informazioni personali e le preferenze di account.
						</p>
					</div>
				</div>
				<div className="space-y-4 pt-4">
					<div className="flex flex-col-reverse gap-4 sm:flex-row">
						<div className="w-full pb-10">
							<Tabs className="w-full" defaultValue="account">
								<TabsList className="mb-2">
									<TabsTrigger value="account">Account</TabsTrigger>
									<TabsTrigger value="anagrafica">Anagrafica</TabsTrigger>
								</TabsList>
								<TabsContent className="flex flex-col gap-8" value="account">
									<Card>
										<CardHeader>
											<CardTitle>Dati Account</CardTitle>
											<CardDescription className="sr-only">
												Card Description
											</CardDescription>
										</CardHeader>
										<CardContent>
											<ProfileFormAccount
												cognome={userData.cognome}
												email={userData.email}
												id={userData.id}
												nome={userData.nome}
												telefono={userData.telefono}
											/>
										</CardContent>
									</Card>
									<Card>
										<CardHeader>
											<CardTitle>Cambia Password</CardTitle>
											<CardDescription className="sr-only">
												Card Description
											</CardDescription>
										</CardHeader>
										<CardContent>
											<ChangePasswordForm />
										</CardContent>
									</Card>
									<div className="flex flex-col gap-2 p-2">
										<h4 className="font-medium">Ti sei registrato il:</h4>
										<p>{userData.created_at?.toLocaleString()}</p>
									</div>
								</TabsContent>
								<TabsContent className="h-full space-y-6" value="anagrafica">
									<Card>
										<CardHeader>
											<CardTitle>Dati Anagrafici</CardTitle>
											<CardDescription className="sr-only">
												Card Description
											</CardDescription>
										</CardHeader>
										<CardContent>
											<ProfileFormAnagrafica userData={userData} />
										</CardContent>
									</Card>
								</TabsContent>
							</Tabs>
						</div>
					</div>
				</div>
			</div>
		</>
	);
};
export default Dashboard;

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