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

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

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

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

          <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 defaultValue="account" className="w-full">
                <TabsList className="mb-2">
                  <TabsTrigger value="account">Account</TabsTrigger>
                  <TabsTrigger value="anagrafica">Anagrafica</TabsTrigger>
                </TabsList>
                <TabsContent value="account" className="flex flex-col gap-8">
                  <Card>
                    <CardHeader>
                      <CardTitle>Dati Account</CardTitle>
                      <CardDescription className="sr-only">
                        Card Description
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <ProfileFormAccount
                        id={userData.id}
                        nome={userData.nome}
                        cognome={userData.cognome}
                        email={userData.email}
                        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 value="anagrafica" className="h-full space-y-6">
                  <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>;
};
