import PageContainer from '@/components/layout/page-container';
import { auth } from '@/auth';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Icons } from '@/components/icons';
import Link from 'next/link';

export default async function ExclusivePage() {
  const session = await auth();
  const activeOrganizationName = session?.user?.activeOrganizationName;
  const activePlan = session?.user?.activeOrganizationPlan;

  return (
    <PageContainer>
      {activePlan !== 'pro' ? (
        <div className='flex h-full items-center justify-center'>
          <Alert>
            <Icons.lock className='h-5 w-5 text-yellow-600' />
            <AlertDescription>
              <div className='mb-1 text-lg font-semibold'>Pro Plan Required</div>
              <div className='text-muted-foreground'>
                This page is only available to workspaces on the{' '}
                <span className='font-semibold'>Pro</span> plan.
                <br />
                Upgrade your workspace later through the app-owned{' '}
                <Link className='underline' href='/dashboard/billing'>
                  Billing &amp; Plans
                </Link>{' '}
                flow.
              </div>
            </AlertDescription>
          </Alert>
        </div>
      ) : (
        <div className='space-y-6'>
          <div>
            <h1 className='flex items-center gap-2 text-3xl font-bold tracking-tight'>
              <Icons.badgeCheck className='h-7 w-7 text-green-600' />
              Exclusive Area
            </h1>
            <p className='text-muted-foreground'>
              Welcome, <span className='font-semibold'>{activeOrganizationName}</span>! This page
              remains gated by the workspace plan stored in your own database.
            </p>
          </div>
          <Card>
            <CardHeader>
              <CardTitle>Exclusive content enabled</CardTitle>
              <CardDescription>
                Your active workspace currently satisfies the `pro` plan gate.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className='text-lg'>Have a wonderful day!</div>
            </CardContent>
          </Card>
        </div>
      )}
    </PageContainer>
  );
}
