"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { useTranslations } from "next-intl"
import { Calendar, Cannabis, History, LayoutDashboard, LogOut, Megaphone, MessageSquare, User } from "lucide-react"

import { mockPortalUser } from "@/data/mock/portal"

import { cn } from "@/lib/utils"

import { ModeDropdown } from "@/components/layout/mode-dropdown"

const navItems = [
  { href: "/portal/dashboard", icon: LayoutDashboard, labelKey: "dashboard" },
  { href: "/portal/info-board", icon: Megaphone, labelKey: "infoBoard" },
  { href: "/portal/events", icon: Calendar, labelKey: "events" },
  { href: "/portal/forum", icon: MessageSquare, labelKey: "forum" },
  { href: "/portal/history", icon: History, labelKey: "history" },
  { href: "/portal/profile", icon: User, labelKey: "profile" },
] as const

export function PortalNavbar() {
  const t = useTranslations("portal")
  const pathname = usePathname()

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4 sm:px-6 lg:px-8">
        {/* Logo + Club Name */}
        <Link
          href="/portal/dashboard"
          className="flex items-center gap-2 font-semibold"
        >
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
            <Cannabis className="h-4 w-4 text-primary" />
          </div>
          <span className="hidden sm:inline-block text-sm">
            {mockPortalUser.clubName}
          </span>
        </Link>

        {/* Navigation Links */}
        <nav className="flex items-center gap-1">
          {navItems.map((item) => {
            const isActive = pathname === item.href
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors",
                  isActive
                    ? "bg-primary/10 text-primary"
                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                )}
              >
                <item.icon className="h-4 w-4" />
                <span className="hidden sm:inline-block">
                  {t(item.labelKey)}
                </span>
              </Link>
            )
          })}
        </nav>

        {/* Right Side: Theme + Logout */}
        <div className="flex items-center gap-1">
          <ModeDropdown />
          <Link
            href="/portal-login"
            className="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
            aria-label={t("logout")}
          >
            <LogOut className="h-4 w-4" />
            <span className="hidden sm:inline-block">{t("logout")}</span>
          </Link>
        </div>
      </div>
    </header>
  )
}