"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useAuth } from "@/hooks/useAuth";
import { cn } from "@/lib/utils";
import {
  LayoutDashboard,
  Calendar,
  FileText,
  Shield,
  Tag,
  Users,
  Radio,
  Settings,
  Wrench,
  LogOut,
  ArrowLeft,
  Inbox,
  ImageIcon,
  HelpCircle,
  MessageSquare,
  Building2,
  KeyRound,
} from "lucide-react";

// Each item is shown when the user holds any of its permissions. Items with no
// permissions are always visible. SuperAdmin sees everything via can().
const navItems: {
  href: string;
  label: string;
  icon: typeof LayoutDashboard;
  permissions?: string[];
}[] = [
  { href: "/admin/overview", label: "Overview", icon: LayoutDashboard },
  { href: "/admin/events", label: "Events", icon: Calendar, permissions: ["events.create", "events.edit", "events.delete"] },
  { href: "/admin/organizers", label: "Organizers", icon: Building2, permissions: ["organizers.manage"] },
  { href: "/admin/gallery", label: "Gallery", icon: ImageIcon, permissions: ["gallery.upload", "gallery.delete"] },
  { href: "/admin/blog", label: "Blog", icon: FileText, permissions: ["blog.draft", "blog.publish", "blog.delete"] },
  { href: "/admin/faq", label: "FAQ", icon: HelpCircle, permissions: ["faq.manage"] },
  { href: "/admin/submissions", label: "Submissions", icon: Inbox, permissions: ["submissions.review"] },
  { href: "/admin/messages", label: "Board", icon: MessageSquare, permissions: ["board.manage"] },
  { href: "/admin/moderation", label: "Moderation", icon: Shield, permissions: ["moderation.act"] },
  { href: "/admin/categories", label: "Categories", icon: Tag, permissions: ["categories.manage"] },
  { href: "/admin/users", label: "Users", icon: Users, permissions: ["users.assign_role", "nip05.assign"] },
  { href: "/admin/roles", label: "Roles", icon: KeyRound, permissions: ["roles.edit_permissions"] },
  { href: "/admin/relays", label: "Relays", icon: Radio, permissions: ["relays.manage"] },
  { href: "/admin/settings", label: "Settings", icon: Settings, permissions: ["settings.edit"] },
  { href: "/admin/nostr", label: "Nostr Tools", icon: Wrench, permissions: ["nostr_tools.use"] },
];

export function AdminSidebar() {
  const pathname = usePathname();
  const { user, logout, can } = useAuth();

  const shortPubkey = user?.pubkey
    ? `${user.pubkey.slice(0, 8)}...${user.pubkey.slice(-8)}`
    : "";

  return (
    <aside className="w-64 bg-surface-container-lowest min-h-screen p-6 flex flex-col shrink-0">
      <div className="mb-8">
        <Link href="/" className="text-primary-container font-bold text-xl">
          BBE Admin
        </Link>
      </div>

      {!user ? (
        <div className="flex-1 flex items-center justify-center">
          <p className="text-on-surface/40 text-sm text-center">
            Please log in to access the dashboard.
          </p>
        </div>
      ) : (
        <>
          <div className="mb-6">
            <p className="text-on-surface/70 text-sm font-mono truncate">{shortPubkey}</p>
            <span
              className={cn(
                "inline-block mt-1 rounded-full px-3 py-1 text-xs font-bold capitalize",
                user.isSuperAdmin || user.role === "admin"
                  ? "bg-primary-container/20 text-primary"
                  : "bg-secondary-container text-on-secondary-container"
              )}
            >
              {user.isSuperAdmin ? "SuperAdmin" : user.role}
            </span>
          </div>

          <nav className="flex-1 space-y-1">
            {navItems
              .filter(
                (item) =>
                  !item.permissions || item.permissions.some((p) => can(p))
              )
              .map((item) => {
                const Icon = item.icon;
                const active = pathname === item.href;
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={cn(
                      "flex items-center gap-3 px-4 py-3 rounded-lg transition-colors",
                      active
                        ? "bg-surface-container-high text-primary"
                        : "text-on-surface/70 hover:text-on-surface hover:bg-surface-container"
                    )}
                  >
                    <Icon size={20} />
                    <span>{item.label}</span>
                  </Link>
                );
              })}
          </nav>

          <div className="mt-auto space-y-2 pt-6">
            <button
              onClick={logout}
              className="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface/70 hover:text-on-surface hover:bg-surface-container w-full"
            >
              <LogOut size={20} />
              <span>Logout</span>
            </button>
            <Link
              href="/"
              className="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface/70 hover:text-on-surface hover:bg-surface-container"
            >
              <ArrowLeft size={20} />
              <span>Back to site</span>
            </Link>
          </div>
        </>
      )}
    </aside>
  );
}