web-campaignpool/components/dashboard/dashboard-navbar.tsx

"use client";

import Image from "next/image";
import { Bell, LogOut } from "lucide-react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import Cookies from "js-cookie";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function DashboardNavbar() {
  const router = useRouter();
  const pathname = usePathname();
  const [role, setRole] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState("Manajemen User");
  const [approverTab, setApproverTab] = useState("Kurasi Konten");

  const segments = pathname.split("/").filter(Boolean);

  useEffect(() => {
    const userRole = Cookies.get("userRole");
    setRole(userRole || null);
  }, []);

  const handleLogout = () => {
    Cookies.remove("userRole");
    router.push("/auth");
  };

  if (!role) return null;

  return (
    <div className="w-full bg-white shadow-sm border-b border-gray-200 px-6 py-3 flex items-center justify-between">
      {/* === Kiri: Logo + Breadcrumb === */}
      <div className="flex items-center gap-4">
        <Link href={"/"}>
          <Image src="/campaign.png" alt="Logo" width={60} height={60} />
        </Link>

        {/* Breadcrumb selalu tampil */}
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/">Home</BreadcrumbLink>
            </BreadcrumbItem>

            {segments.map((segment, index) => {
              const href = "/" + segments.slice(0, index + 1).join("/");
              const isLast = index === segments.length - 1;
              const label =
                segment.charAt(0).toUpperCase() +
                segment.slice(1).replace(/-/g, " ");
              return (
                <div key={href} className="flex items-center">
                  <BreadcrumbSeparator />
                  <BreadcrumbItem>
                    {isLast ? (
                      <BreadcrumbPage>{label}</BreadcrumbPage>
                    ) : (
                      <BreadcrumbLink href={href}>{label}</BreadcrumbLink>
                    )}
                  </BreadcrumbItem>
                </div>
              );
            })}
          </BreadcrumbList>
        </Breadcrumb>
      </div>

      {/* === Tengah: Menu berdasarkan Role === */}
      <div className="flex-1 flex justify-center">
        {/* ADMIN */}
        {role === "admin" && (
          <div className="flex items-center gap-8">
            <button
              onClick={() => {
                setActiveTab("Manajemen User");
                router.push("/dashboard/admin/user-management");
              }}
              className={`flex flex-col items-center text-sm font-medium px-4 py-2 rounded-md transition ${
                activeTab === "Manajemen User"
                  ? "text-black border-b-2 border-[#C4A663]"
                  : "text-gray-500 hover:text-gray-800"
              }`}
            >
              <span className="text-base">🧑‍💼</span>
              <span>Manajemen User</span>
            </button>
          </div>
        )}

        {/* APPROVER */}
        {role === "approver" && (
          <div className="flex items-center gap-12">
            {["Kurasi Konten", "Publish Konten"].map((tab) => (
              <button
                key={tab}
                onClick={() => {
                  setApproverTab(tab);
                  router.push(
                    `/dashboard/approver/${
                      tab === "Kurasi Konten" ? "kurasi" : "publish"
                    }`
                  );
                }}
                className={`flex flex-col items-center text-sm font-medium transition ${
                  approverTab === tab
                    ? "text-black border-b-2 border-[#C4A663]"
                    : "text-gray-500 hover:text-gray-800"
                }`}
              >
                {tab === "Kurasi Konten" ? (
                  <span className="text-xl mb-1">🖼️</span>
                ) : (
                  <span className="text-xl mb-1">🔁</span>
                )}
                <span>{tab}</span>
              </button>
            ))}
          </div>
        )}

        {/* SUPERVISOR */}
        {role === "supervisor" && (
          <div className="text-lg font-semibold text-gray-700">
            Supervisor Dashboard
          </div>
        )}

        {/* USER */}
        {role === "user" && (
          <div className="text-lg font-semibold text-gray-700">
            User Dashboard
          </div>
        )}
      </div>

      {/* === Kanan: Notifikasi + Profil === */}
      <div className="flex items-center gap-4">
        <button className="relative text-gray-600 hover:text-gray-800">
          <Bell className="w-5 h-5" />
          <span className="absolute -top-1 -right-1 bg-blue-500 text-white text-[10px] w-4 h-4 flex items-center justify-center rounded-full">
            6
          </span>
        </button>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className="flex items-center gap-2 hover:bg-gray-100 px-2 py-1 rounded-md">
              <Image
                src="/non-user.png"
                alt="User"
                width={36}
                height={36}
                className="rounded-full border"
              />
              <span className="text-gray-700 text-sm font-medium capitalize">
                {role}
              </span>
            </button>
          </DropdownMenuTrigger>

          <DropdownMenuContent align="end" className="w-40">
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={handleLogout}
              className="cursor-pointer text-red-600"
            >
              <LogOut className="w-4 h-4 mr-2" />
              Logout
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
}