"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Users,
  Pill,
  Stethoscope,
  LayoutDashboard,
  Settings,
  LogOut,
} from "lucide-react";
import { signOut, useSession } from "next-auth/react";

const navItems = [
  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { href: "/dashboard/doctor", label: "Doctor Dashboard", icon: Stethoscope },
  { href: "/dashboard/patients", label: "Patients", icon: Users },
  { href: "/dashboard/medications", label: "Medications", icon: Pill },
  { href: "/dashboard/doctors", label: "Doctors", icon: Stethoscope },
  { href: "/dashboard/settings", label: "Settings", icon: Settings },
  { href: "/dashboard/marketplace", label: "Marketplace", icon: Settings },
];

export default function Sidebar() {
  const pathname = usePathname();
  const { data: session } = useSession();
  const role = session?.user?.role;

  const visibleNavItems =
    role === "FAMILY"
      ? navItems
      : navItems.filter((i) => i.href !== "/dashboard/marketplace");

  return (
    <aside className="fixed left-0 top-0 z-40 hidden h-screen w-16 flex-col border-r border-zinc-800 bg-zinc-950 md:flex md:w-64">
      <div className="flex h-16 items-center border-b border-zinc-800 px-4">
        <span className="text-lg font-semibold text-indigo-400">
          RememberMe
        </span>
      </div>
      <nav className="flex-1 space-y-1 p-3">
        {visibleNavItems.map((item) => {
          const Icon = item.icon;
          const isActive = pathname === item.href;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                isActive
                  ? "bg-zinc-900 text-indigo-400"
                  : "text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100"
              }`}
            >
              <Icon className="h-5 w-5" />
              <span className="hidden md:inline">{item.label}</span>
            </Link>
          );
        })}
      </nav>
      <div className="border-t border-zinc-800 p-3">
        <button
          onClick={() => signOut({ callbackUrl: "/login" })}
          className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-zinc-400 transition-colors hover:bg-zinc-900 hover:text-zinc-100"
        >
          <LogOut className="h-5 w-5" />
          <span className="hidden md:inline">Sign Out</span>
        </button>
      </div>
    </aside>
  );
}