import { NavLink, Outlet, useNavigate } from "react-router-dom"
import { BookOpenIcon, ListIcon, LogOutIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import ThemeToggle from "@/components/ThemeToggle"
import { useAuthStore } from "@/store/authStore"
import { usePlatform } from "@/hooks/usePlatform"
import { useIsMobile } from "@/hooks/useIsMobile"

const navItems = [
  { to: "/admin/books", label: "图书管理", icon: BookOpenIcon },
  { to: "/admin/borrows", label: "借阅管理", icon: ListIcon },
]

export default function AdminLayout() {
  const username = useAuthStore((s) => s.username)
  const clearAuth = useAuthStore((s) => s.clearAuth)
  const navigate = useNavigate()
  const platform = usePlatform()
  const isMobile = useIsMobile()
  const hideTitle = platform === "mobile"

  function handleLogout() {
    clearAuth()
    navigate("/books", { replace: true })
  }

  const linkClass = ({ isActive }: { isActive: boolean }) =>
    `flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
      isActive ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
    }`

  if (!isMobile) {
    return (
      <div className="flex min-h-screen">
        <aside className="fixed top-0 left-0 z-50 flex h-full w-56 flex-col border-r bg-background">
          <div className="flex h-12 items-center gap-2 border-b px-4">
            <span className="font-heading text-base font-semibold">管理后台</span>
          </div>
          <nav className="flex-1 space-y-1 p-3">
            {navItems.map(({ to, label, icon: Icon }) => (
              <NavLink key={to} to={to} className={linkClass} end>
                <Icon className="size-4" />
                {label}
              </NavLink>
            ))}
          </nav>
          <div className="flex items-center gap-2 border-t px-4 py-3">
            <span className="min-w-0 flex-1 truncate text-sm text-muted-foreground">{username}</span>
            <Button variant="ghost" size="icon-sm" onClick={handleLogout} {...(!hideTitle && { title: "退出" })}>
              <LogOutIcon className="size-4" />
            </Button>
          </div>
        </aside>
        <main className="ml-56 flex-1 px-6 py-6">
          <div className="mb-4 flex justify-end">
            <ThemeToggle />
          </div>
          <Outlet />
        </main>
      </div>
    )
  }

  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-[var(--safe-top,0px)] z-40 flex h-12 items-center justify-between border-b bg-background px-4">
        <span className="font-heading text-sm font-semibold">管理后台</span>
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">{username}</span>
          <ThemeToggle />
          <Button variant="ghost" size="icon-sm" onClick={handleLogout}>
            <LogOutIcon className="size-4" />
          </Button>
        </div>
      </header>
      <main className="flex-1 px-4 py-4">
        <Outlet />
      </main>
      <nav className="sticky bottom-[var(--safe-bottom,0px)] z-40 flex border-t bg-background">
        {navItems.map(({ to, label, icon: Icon }) => (
          <NavLink key={to} to={to} className={linkClass + " flex-1 justify-center py-3"} end>
            <Icon className="size-4" />
            <span className="text-xs">{label}</span>
          </NavLink>
        ))}
      </nav>
    </div>
  )
}
