'use server';

import {
  AvatarUpload,
  ProfileHeader,
  ResetPasswordForm,
  SignOutForm,
  UserInfoForm,
} from '@/components/layout/auth/profile';
import { preloadQuery } from 'convex/nextjs';

import { api } from '@gib/backend/convex/_generated/api.js';
import { Card, Separator } from '@gib/ui';

const Profile = async () => {
  const preloadedUser = await preloadQuery(api.auth.getUser, {});
  const preloadedUserProvider = await preloadQuery(
    api.auth.getUserProvider,
    {},
  );
  return (
    <main className='container mx-auto px-4 py-12 md:py-16'>
      <div className='mx-auto max-w-3xl'>
        {/* Page Header */}
        <div className='mb-8 text-center'>
          <h1 className='mb-2 text-3xl font-bold tracking-tight sm:text-4xl'>
            Your Profile
          </h1>
          <p className='text-muted-foreground'>
            Manage your personal information and preferences
          </p>
        </div>

        {/* Profile Card */}
        <Card className='border-border/40'>
          <ProfileHeader />
          <AvatarUpload preloadedUser={preloadedUser} />
          <Separator className='my-6' />
          <UserInfoForm
            preloadedUser={preloadedUser}
            preloadedProvider={preloadedUserProvider}
          />
          <ResetPasswordForm preloadedProvider={preloadedUserProvider} />
          <Separator className='my-6' />
          <SignOutForm />
        </Card>
      </div>
    </main>
  );
};
export default Profile;