'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useSession } from 'next-auth/react';

export default function ProfileViewPage() {
  const { data: session, status } = useSession();

  if (status === 'loading') {
    return <div className='p-4 text-sm text-muted-foreground'>Loading profile...</div>;
  }

  return (
    <div className='flex w-full flex-col p-4'>
      <Card className='max-w-2xl'>
        <CardHeader>
          <CardTitle>Profile</CardTitle>
          <CardDescription>
            This app-owned profile summary replaces the old Clerk-hosted profile screen.
          </CardDescription>
        </CardHeader>
        <CardContent className='space-y-4 text-sm'>
          <div className='rounded-lg border p-4'>
            <div className='text-muted-foreground'>Name</div>
            <div className='font-medium'>{session?.user?.name ?? 'Unknown user'}</div>
          </div>
          <div className='rounded-lg border p-4'>
            <div className='text-muted-foreground'>Email</div>
            <div className='font-medium'>{session?.user?.email ?? 'No email available'}</div>
          </div>
          <div className='rounded-lg border p-4'>
            <div className='text-muted-foreground'>Active workspace</div>
            <div className='font-medium'>
              {session?.user?.activeOrganizationName ?? 'No active workspace'}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
