import type { Metadata } from "next"
import type { JSX } from "react"
import { notFound } from "next/navigation"
import { getTranslations } from "next-intl/server"
import Link from "next/link"
import { ArrowLeft, ShieldCheck, Shield } from "lucide-react"

import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"
import { Button } from "@/shared/components/ui/button"
import { Badge } from "@/shared/components/ui/badge"
import { Card, CardContent } from "@/shared/components/ui/card"
import { getRoleById } from "@/modules/rbac/data-access"
import { RolePermissionMatrix } from "@/modules/rbac/components/role-permission-matrix"
import { RoleDetailEditButton } from "@/modules/rbac/components/role-detail-edit-button"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("rbac")
  return {
    title: `${t("roles.detail")} - Next_Edu`,
  }
}

export const dynamic = "force-dynamic"

export default async function AdminRoleDetailPage({
  params,
}: {
  params: Promise<{ id: string }>
}): Promise<JSX.Element> {
  await requirePermission(Permissions.ROLE_READ)

  const { id } = await params
  const role = await getRoleById(id)

  if (!role) notFound()

  const isAdmin = role.name === "admin"

  return (
    <div className="flex h-full flex-col space-y-6 p-8">
      <div className="flex items-center gap-4">
        <Button asChild variant="ghost" size="icon">
          <Link href="/admin/roles">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <h1 className="text-2xl font-bold tracking-tight">{role.name}</h1>
            {role.isSystem ? (
              <Badge variant="secondary">
                <ShieldCheck className="mr-1 h-3 w-3" />
                System
              </Badge>
            ) : (
              <Badge variant="outline">
                <Shield className="mr-1 h-3 w-3" />
                Custom
              </Badge>
            )}
            {role.isEnabled ? (
              <Badge variant="default">Enabled</Badge>
            ) : (
              <Badge variant="destructive">Disabled</Badge>
            )}
          </div>
          {role.description && (
            <p className="text-muted-foreground text-sm mt-1">{role.description}</p>
          )}
        </div>
        {!isAdmin && <RoleDetailEditButton role={role} />}
      </div>

      {isAdmin && (
        <Card className="border-amber-500/50 bg-amber-50 dark:bg-amber-950/20">
          <CardContent className="py-3 text-sm text-amber-700 dark:text-amber-400">
            The <strong>admin</strong> role is fully locked: its name, status, and
            permissions cannot be modified. This prevents accidentally locking
            yourself out of the system.
          </CardContent>
        </Card>
      )}

      <RolePermissionMatrix
        roleId={role.id}
        roleName={role.name}
        currentPermissions={role.permissions}
        isLocked={isAdmin}
        userCount={role.userCount}
      />
    </div>
  )
}
