import { notFound } from "next/navigation"

import FormShell from "@/components/app/FormShell"
import PageHeader from "@/components/app/PageHeader"
import PageShell from "@/components/app/PageShell"
import { Button } from "@/components/ui/button"
import RoleForm from "@/features/roles/components/RoleForm"

import { getRoleById } from "@/features/roles/service"

interface EditRolePageProps {
  params: Promise<{ id: string }>
}

export default async function EditRolePage({ params }: EditRolePageProps) {
  const { id } = await params
  const role = await getRoleById(id)

  if (!role) {
    notFound()
  }

  return (
    <PageShell>
      <PageHeader
        title="Edit Role"
        actions={
          <Button asChild variant="secondary">
            <a href="/roles">Back</a>
          </Button>
        }
      />
      <FormShell>
        <RoleForm
          initialData={{
            id: role.id,
            name: role.name,
            permissions: role.permissions.map((p) => ({
              module: p.module,
              actions: p.actions,
            })),
          }}
        />
      </FormShell>
    </PageShell>
  )
}