import { redirect } from 'next/navigation';

import { signOutAction } from '@/lib/actions/sign-out';
import { getSupabaseServerClient } from '@/packages/supabase/src/clients/server-client';

import { BackButton } from '@kit/shared/components/back-button';
import { MedReportLogo } from '@kit/shared/components/med-report-logo';
import { pathsConfig } from '@kit/shared/config';
import { Trans } from '@kit/ui/trans';

import { withI18n } from '~/lib/i18n/with-i18n';

import { UpdateAccountForm } from './_components/update-account-form';

async function UpdateAccount() {
  const client = getSupabaseServerClient();

  const {
    data: { user },
  } = await client.auth.getUser();

  if (!user) {
    redirect(pathsConfig.auth.signIn);
  }

  return (
    <div className="border-border flex max-w-5xl flex-row overflow-hidden rounded-3xl border">
      <div className="relative flex min-w-md flex-col px-12 pt-7 pb-22 text-center md:w-1/2">
        <BackButton onBack={signOutAction} />
        <MedReportLogo />
        <h1 className="pt-8">
          <Trans i18nKey={'account:updateAccount:title'} />
        </h1>
        <p className="text-muted-foreground pt-1 text-sm">
          <Trans i18nKey={'account:updateAccount:description'} />
        </p>
        <UpdateAccountForm user={user} />
      </div>
      <div className="hidden w-1/2 min-w-[460px] bg-[url(/assets/med-report-logo-big.png)] bg-cover bg-center bg-no-repeat md:block"></div>
    </div>
  );
}

export default withI18n(UpdateAccount);