'use client';

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

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

  return (
    <PageContainer
      isLoading={status === 'loading'}
      access={!!activeOrganization}
      accessFallback={
        <div className='flex min-h-[400px] items-center justify-center'>
          <div className='space-y-2 text-center'>
            <h2 className='text-2xl font-semibold'>No Workspace Selected</h2>
            <p className='text-muted-foreground'>
              Please select or create a workspace to view billing placeholders.
            </p>
          </div>
        </div>
      }
      infoContent={billingInfoContent}
      pageTitle='Billing & Plans'
      pageDescription={`Review the current plan state for ${activeOrganization?.name ?? 'your workspace'}`}
    >
      <div className='space-y-6'>
        <Alert>
          <Icons.info className='h-4 w-4' />
          <AlertDescription>
            Clerk Billing has been removed from this route. Plan enforcement now reads app-owned
            workspace data, and payment provider integration can be added later.
          </AlertDescription>
        </Alert>

        <Card>
          <CardHeader>
            <CardTitle>Current plan</CardTitle>
            <CardDescription>
              This page is intentionally lightweight while billing is no longer vendor-managed.
            </CardDescription>
          </CardHeader>
          <CardContent className='space-y-4'>
            <div className='rounded-lg border p-4'>
              <div className='text-muted-foreground text-sm'>Workspace</div>
              <div className='text-lg font-semibold'>{activeOrganization?.name}</div>
            </div>
            <div className='rounded-lg border p-4'>
              <div className='text-muted-foreground text-sm'>Plan</div>
              <div className='text-lg font-semibold capitalize'>
                {activeOrganization?.plan ?? 'free'}
              </div>
            </div>
            <div className='text-muted-foreground rounded-lg border border-dashed p-4 text-sm'>
              Add subscriptions, invoices, and provider sync in a later pass. The `organizations`
              table is already the source of truth for plan gates.
            </div>
          </CardContent>
        </Card>
      </div>
    </PageContainer>
  );
}
