// src/app/(dashboard)/dashboard/employees/permissions/page.tsx
import { Suspense } from 'react';
import { redirect } from 'next/navigation';
import Link from 'next/link';
import { getServerSession } from '@/lib/auth/getServerSession';
import { PERMISSIONS } from '@/lib/permissions/permissions';
import AccessDenied from '@/components/admin/errors/AccessDenied';
import PermissionTable from '@/components/admin/permissions/PermissionsTable';
import { PermissionTableSkeleton } from '@/components/ui/CustomSkeleton';
import { cookies } from 'next/headers';
import { SESSION_COOKIE } from '@/lib/auth/requireAuth';

async function getInitialPermissions(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/permissions?page=1&limit=10`, {
      cache: 'no-store',
      headers: {
        'Authorization': `Bearer ${sessionToken}`
      }
    });
    
    if (!res.ok) {
      throw new Error('Failed to fetch permissions');
    }
    
    const data = await res.json();
    return data.data;
  } catch (error) {
    console.error('Failed to fetch initial permissions:', error);
    return {
      permissions: [],
      pagination: {
        page: 1,
        limit: 10,
        total: 0,
        totalPages: 0,
      },
    };
  }
}

async function getModules(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/permissions/modules`, {
      cache: 'no-store',
      headers: {
        'Authorization': `Bearer ${sessionToken}`
      }
    });
    
    if (!res.ok) {
      throw new Error('Failed to fetch modules');
    }
    
    const data = await res.json();
    return data.data || [];
  } catch (error) {
    console.error('Failed to fetch modules:', error);
    return [];
  }
}

// Separate component for the content to enable Suspense
async function PermissionsContent() {
  const cookieStore = await cookies();
  const sessionId = cookieStore.get(SESSION_COOKIE)?.value;

  console.log(sessionId);

  if (!sessionId) {
    redirect('/admin/login');
  }

  const session = await getServerSession();
  
  if (!session) redirect('/admin/login');
  
  if (!session.permissions.includes(PERMISSIONS.PERMISSIONS_READ)) {
    return <AccessDenied />;
  }
  
  const canCreate = session.permissions.includes(PERMISSIONS.PERMISSIONS_CREATE);
  const canEdit = session.permissions.includes(PERMISSIONS.PERMISSIONS_UPDATE);
  const canDelete = session.permissions.includes(PERMISSIONS.PERMISSIONS_DELETE);
  const canBulkDelete = session.permissions.includes(PERMISSIONS.PERMISSIONS_BULK_DELETE);
  
  // Use Promise.all to fetch both permissions and modules simultaneously
  const [initialData, modules] = await Promise.all([
    getInitialPermissions(sessionId),
    getModules(sessionId)
  ]);
  
  return (
    <>
      <div className="flex flex-wrap justify-between items-center gap-3 mb-6">
        <div>
          <h1 className="text-2xl font-semibold" style={{ color: 'var(--color-text)' }}>
            Permissions
          </h1>
          <p className="text-sm mt-1" style={{ color: 'var(--color-text-secondary)' }}>
            Manage system permissions and access controls
          </p>
        </div>
        
        {canCreate && (
          <Link
            href="/admin/dashboard/employees/permissions/new"
            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all hover:opacity-90"
            style={{ background: 'var(--color-cta)', color: 'white' }}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 5v14m-7-7h14"/>
            </svg>
            Add Permission
          </Link>
        )}
      </div>
      
      <PermissionTable 
        canEdit={canEdit}
        canDelete={canDelete}
        canBulkDelete={canBulkDelete}
        initialPermissions={initialData}
        modules={modules}
      />
    </>
  );
}

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