import { createClient } from "@/lib/supabase/server";
import { canDo } from "@/lib/auth/permissions";
import { PageHeader } from "@/components/layout/page-header";
import { Card } from "@/components/ui/card";
import { PermissionMatrix } from "./permission-matrix";
import type { Permission, Role } from "@/lib/types";

export default async function PermissionsPage() {
  const supabase = await createClient();
  const [{ data: roles }, { data: perms }, { data: grants }] = await Promise.all([
    supabase.from("roles").select("*").order("is_system", { ascending: false }).order("name"),
    supabase.from("permissions").select("*").order("resource").order("action"),
    supabase.from("role_permissions").select("role_id, permission_id"),
  ]);

  const initialGrants = (grants ?? []).map(
    (g: { role_id: string; permission_id: string }) => `${g.role_id}:${g.permission_id}`,
  );
  const canManage = await canDo("roles", "update");

  return (
    <div>
      <PageHeader
        title="Permissions"
        breadcrumb="Settings / Permissions"
      />
      <Card className="p-4">
        <p className="mb-4 text-sm text-muted-foreground">
          Toggle a permission to grant or revoke it for a role. Super Admin always
          has full access.
        </p>
        <PermissionMatrix
          roles={(roles as Role[]) ?? []}
          permissions={(perms as Permission[]) ?? []}
          initialGrants={initialGrants}
          readOnly={!canManage}
        />
      </Card>
    </div>
  );
}