// src/app/(dashboard)/dashboard/employees/roles/new/page.tsx
import { Suspense } from 'react';
import { redirect } from 'next/navigation';
import { getServerSession } from '@/lib/auth/getServerSession';
import { PERMISSIONS } from '@/lib/permissions/permissions';
import AccessDenied from '@/components/admin/errors/AccessDenied';
import RoleForm from '@/components/admin/roles/RoleForm';
import { RoleFormSkeleton } from '@/components/ui/FormSkeleton';
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Add New Role',
}

async function NewRoleContent() {
  const session = await getServerSession();
  
  if (!session) redirect('/login');
  
  if (!session.permissions.includes(PERMISSIONS.ROLES_CREATE)) {
    return <AccessDenied />;
  }
  
  return (
    <>
      <div className="mb-6">
        <h1 className="text-2xl font-semibold" style={{ color: 'var(--color-text)' }}>
          Create Role
        </h1>
        <p className="text-sm mt-1" style={{ color: 'var(--color-text-secondary)' }}>
          Add a new role to the system and assign permissions
        </p>
      </div>
      
      <RoleForm mode="create" initialData={null} />
    </>
  );
}

export default async function NewRolePage() {
  return (
    <div className="sm:p-6">
      <Suspense fallback={<RoleFormSkeleton />}>
        <NewRoleContent />
      </Suspense>
    </div>
  );
}