import { hasPermission, type Permission, type PermissionScope, type Role } from "@cms/content/rbac"
import Link from "next/link"
import type { ReactNode } from "react"

import { LogoutButton } from "@/app/logout-button"
import { AdminLocaleSwitcher } from "@/components/admin-locale-switcher"
import { getBuildInfo } from "@/lib/build-info"

type AdminShellProps = {
  role: Role
  activePath: string
  badge: string
  title: string
  description: string
  actions?: ReactNode
  children: ReactNode
}

type NavItem = {
  href: string
  label: string
  permission: Permission
  scope: PermissionScope
}

const navItems: NavItem[] = [
  { href: "/", label: "Dashboard", permission: "dashboard:read", scope: "global" },
  { href: "/pages", label: "Pages", permission: "pages:read", scope: "team" },
  { href: "/navigation", label: "Navigation", permission: "navigation:read", scope: "team" },
  { href: "/media", label: "Media", permission: "media:read", scope: "team" },
  { href: "/portfolio", label: "Portfolio", permission: "media:read", scope: "team" },
  { href: "/users", label: "Users", permission: "users:read", scope: "own" },
  { href: "/commissions", label: "Commissions", permission: "commissions:read", scope: "own" },
  { href: "/settings", label: "Settings", permission: "users:manage_roles", scope: "global" },
  { href: "/todo", label: "Roadmap", permission: "roadmap:read", scope: "global" },
]

function navItemClass(active: boolean): string {
  if (active) {
    return "bg-neutral-900 text-white border-neutral-900"
  }

  return "bg-white text-neutral-700 border-neutral-300 hover:bg-neutral-100"
}

function isActiveRoute(activePath: string, href: string): boolean {
  if (href === "/") {
    return activePath === "/"
  }

  return activePath === href || activePath.startsWith(`${href}/`)
}

export function AdminShell({
  role,
  activePath,
  badge,
  title,
  description,
  actions,
  children,
}: AdminShellProps) {
  const buildInfo = getBuildInfo()

  return (
    <div className="mx-auto flex min-h-screen w-full max-w-7xl gap-8 px-6 py-10">
      <aside className="sticky top-0 hidden h-fit w-64 shrink-0 space-y-4 lg:block">
        <div className="rounded-xl border border-neutral-200 bg-white p-4">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-neutral-500">
            CMS Admin
          </p>
          <p className="mt-2 text-sm text-neutral-600">Role: {role}</p>
        </div>

        <nav className="space-y-2">
          {navItems
            .filter((item) => hasPermission(role, item.permission, item.scope))
            .map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={`block rounded-md border px-3 py-2 text-sm font-medium ${navItemClass(isActiveRoute(activePath, item.href))}`}
              >
                {item.label}
              </Link>
            ))}
        </nav>
      </aside>

      <div className="min-w-0 flex-1 space-y-8">
        <nav className="flex flex-wrap gap-2 lg:hidden">
          {navItems
            .filter((item) => hasPermission(role, item.permission, item.scope))
            .map((item) => (
              <Link
                key={`mobile-${item.href}`}
                href={item.href}
                className={`rounded-md border px-3 py-2 text-sm font-medium ${navItemClass(isActiveRoute(activePath, item.href))}`}
              >
                {item.label}
              </Link>
            ))}
        </nav>

        <header className="space-y-3">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{badge}</p>
            <div className="flex items-center gap-2">
              <AdminLocaleSwitcher />
              <LogoutButton />
            </div>
          </div>
          <h1 className="text-4xl font-semibold tracking-tight">{title}</h1>
          <p className="text-neutral-600">{description}</p>
          {actions ? <div className="flex flex-wrap items-center gap-3 pt-1">{actions}</div> : null}
        </header>

        {children}

        <footer className="border-t border-neutral-200 pt-4 text-xs text-neutral-500">
          Build v{buildInfo.version} +sha.{buildInfo.sha}
        </footer>
      </div>
    </div>
  )
}