'use client';

import PageContainer from '@/components/layout/page-container';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { teamInfoContent } from '@/config/infoconfig';
import { useSession } from 'next-auth/react';

export default function TeamPage() {
  const { data: session, status } = useSession();
  const activeOrganization = session?.user?.organizations.find(
    (organization) => organization.id === session?.user?.activeOrganizationId
  );

  return (
    <PageContainer
      pageTitle='Team Management'
      pageDescription='App-owned team and role management is scaffolded here for the Auth.js migration.'
      infoContent={teamInfoContent}
      isLoading={status === 'loading'}
      access={!!activeOrganization}
      accessFallback={
        <div className='text-muted-foreground rounded-lg border border-dashed p-8 text-center'>
          Select a workspace first to manage team settings.
        </div>
      }
    >
      <Card>
        <CardHeader>
          <CardTitle>{activeOrganization?.name}</CardTitle>
          <CardDescription>
            This placeholder keeps the route alive while the full membership CRUD flow is still
            being migrated off Clerk Organizations.
          </CardDescription>
        </CardHeader>
        <CardContent className='space-y-4 text-sm'>
          <div className='rounded-lg border p-4'>
            <div className='font-medium'>Current role</div>
            <div className='text-muted-foreground mt-1'>{session?.user?.role ?? 'member'}</div>
          </div>
          <div className='rounded-lg border border-dashed p-4 text-muted-foreground'>
            Next iteration can add invites, membership edits, and permission management against the
            `memberships` table introduced in this migration.
          </div>
        </CardContent>
      </Card>
    </PageContainer>
  );
}
