"use client";

import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { usePathname } from "next/navigation";

import { Button } from "./ui/button";
import { MobileSidebar } from "./mobile-sidebar";
import { UserButton } from "@/features/auth/components/user-button";
import { NotificationsDropdown } from "./notifications-dropdown";

const pathnameMap = {
  tasks: {
    title: "My Tasks",
    description: "View all of your tasks here",
  },
};

const defaultMap = {
  title: "Home",
  description: "Monitor all of your projects and tasks here",
};

export const Navbar = () => {
  const pathname = usePathname();
  const pathnameParts = pathname.split("/");
  const pathnameKey = pathnameParts[3] as keyof typeof pathnameMap;

  // Check if we're on a board page
  const isBoardPage = pathnameParts[5] === "boards" && pathnameParts[6];
  const workspaceId = pathnameParts[2];
  const projectId = pathnameParts[4];

  let title, description, showBackButton = false, backHref = "";

  if (isBoardPage) {
    title = "Board";
    description = "Manage tasks in this board";
    showBackButton = true;
    backHref = `/workspaces/${workspaceId}/projects/${projectId}`;
  } else {
    const mapped = pathnameMap[pathnameKey] || defaultMap;
    title = mapped.title;
    description = mapped.description;
  }

  return (
    <nav className={`pt-4 px-6 flex items-center justify-between`}>
      <div className={`flex items-center gap-4 ${!showBackButton && "hidden"}`}>
        {showBackButton && (
          <Button variant="ghost" size="sm" asChild>
            <Link href={backHref}>
              <ArrowLeft className="size-4 mr-2" />
              Back to Project
            </Link>
          </Button>
        )}
         {/* : (<div className="flex-col hidden lg:flex">
         <h1 className="text-2xl font-bold">{title}</h1>
           <p className="text-muted-foreground">{description}</p>
        </div>)} */}
      </div>
      <MobileSidebar />
      <div className={`flex items-center gap-2 ${!showBackButton && "ml-auto"}`}>
        <NotificationsDropdown />
        <UserButton />
      </div>
    </nav>
  );
};
