import { getServerSession } from "next-auth";
import { authOptions } from "../../lib/auth/options";
import { prisma } from "../../lib/db/prisma";
import { RoleCreateForm } from "./role-create-form";
import { RolePermissionsForm } from "./role-permissions-form";

export default async function RolesPage() {
  const session = await getServerSession(authOptions);
  const where = session?.user.systemRole === "SYSTEM_ADMIN" ? {} : { organizationId: session?.user.organizationId! };
  const [roles, permissions] = await Promise.all([
    prisma.role.findMany({ where, include: { permissions: true, _count: { select: { users: true } } }, orderBy: { name: "asc" } }),
    prisma.permission.findMany({ where, orderBy: { name: "asc" } })
  ]);

  return (
    <div>
      <div className="admin-card p-6">
        <p className="text-sm font-semibold uppercase tracking-wide text-brand-primary">Access control</p>
        <h1 className="mt-1 text-3xl font-semibold">Roles & Permissions</h1>
        <p className="mt-2 text-slate-600">Edit database-backed permissions assigned through roles and remove unused custom roles.</p>
      </div>
      <RoleCreateForm permissions={permissions} />
      <section className="mt-6 grid gap-4 md:grid-cols-2">
        {roles.map((role) => (
          <RolePermissionsForm key={role.id} permissions={permissions} role={role} />
        ))}
      </section>
    </div>
  );
}