"use client";

import Link from "next/link";
import { useRouter, usePathname } from "next/navigation";

interface Props {
  username: string;
  role: "SUPER_ADMIN" | "ADMIN";
}

export default function AdminSidebar({ username, role }: Props) {
  const router = useRouter();
  const pathname = usePathname();

  const handleLogout = async () => {
    await fetch("/api/admin/logout", { method: "POST" });
    router.push("/admin/login");
  };

  const links = [
    { href: "/admin/dashboard", label: "Контролна табла" },
    ...(role === "SUPER_ADMIN" ? [{ href: "/admin/users", label: "Администратори" }] : []),
    { href: "/admin/codes", label: "Кодови" },
  ];

  return (
    <aside className="flex w-64 flex-col bg-primary text-white">
      <div className="border-b border-white/10 px-6 py-5">
        <h2 className="text-lg font-semibold">СпоменQR</h2>
        <p className="mt-1 text-xs text-white/60">
          {username} {role === "SUPER_ADMIN" ? "(SuperAdmin)" : "(Admin)"}
        </p>
      </div>
      <nav className="flex-1 space-y-1 px-3 py-4">
        {links.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className={`block rounded-md px-3 py-2 text-sm transition-colors ${
              pathname === link.href ? "bg-white/15 text-white" : "text-white/70 hover:bg-white/10 hover:text-white"
            }`}
          >
            {link.label}
          </Link>
        ))}
      </nav>
      <div className="border-t border-white/10 px-3 py-4">
        <button
          onClick={handleLogout}
          className="block w-full rounded-md px-3 py-2 text-left text-sm text-white/70 transition-colors hover:bg-white/10 hover:text-white"
        >
          Одјави се
        </button>
      </div>
    </aside>
  );
}