
"use client";

import React, { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import {
  LayoutDashboard,
  User,
  Users,
  Calendar,
  FlaskConical,
  Menu,
  X,
} from "lucide-react";

// Custom icon for pharmacy since it's not in lucide-react
const Pharmacy = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
    <path d="M12 8v8" />
    <path d="M8 12h8" />
  </svg>
);

const NavItem = ({ href, icon, title, isActive }) => (
  <Link
    href={href}
    className={cn(
      "flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-all",
      isActive
        ? "bg-blue-400 text-white"
        : "text-gray-600 hover:bg-gray-100"
    )}
  >
    <div className="flex h-5 w-5 items-center">{icon}</div>
    <span>{title}</span>
  </Link>
);

export const Sidebar = () => {
  const [collapsed, setCollapsed] = useState(false);

  const currentPath = usePathname();

  const toggleSidebar = () => setCollapsed(!collapsed);

  const navItems = [
    {
      href: "/dashboard/pharmacy",
      icon: <LayoutDashboard size={20} />,
      title: "Dashboard",
    },
    {
      href: "/dashboard/pharmacy/inventory",
      icon: <User size={20} />,
      title: "Inventory",
    },
    {
      href: "/dashboard/pharmacy/prescriptions",
      icon: <Pharmacy />,
      title: "Prescriptions",
    },
    {
      href: "/dashboard/pharmacy/profile",
      icon: <Users size={20} />,
      title: "Profile",
    },
    // {
    //   href: "/dashboard/admin/patients",
    //   icon: <Users size={20} />,
    //   title: "Patients",
    // },
    // {
    //   href: "/dashboard/admin/labs",
    //   icon: <FlaskConical size={20} />,
    //   title: "Labs",
    // },
    // {
    //   href: "/dashboard/admin/pharmacy",
    //   icon: <Pharmacy />,
    //   title: "Pharmacies",
    // },
    // {
    //   href: "/dashboard/admin/consultations",
    //   icon: <Calendar size={20} />,
    //   title: "Consultations",
    // },
    // {
    //   href: "/dashboard/admin/support",
    //   icon: <Users size={20} />,
    //   title: "Support",
    // },
  ];

  return (
    <div
      className={cn(
        "flex flex-col bg-white border-r border-gray-200 h-screen transition-all duration-300",
        collapsed ? "w-16" : "w-64"
      )}
    >
      <div className="p-4 flex items-center justify-between border-b border-gray-200">
        {!collapsed && (
          <h1 className="text-xl font-bold text-blue-400">Med Bridge Afrik</h1>
        )}
        <button
          onClick={toggleSidebar}
          className="p-1 rounded-md hover:bg-gray-100"
        >
          {collapsed ? (
            <Menu size={20} className="text-gray-600" />
          ) : (
            <X size={20} className="text-gray-600" />
          )}
        </button>
      </div>
      <div className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
        {navItems.map((item) => (
          <div key={item.href} className={collapsed ? "flex justify-center" : ""}>
            {collapsed ? (
              <Link
                href={item.href}
                className={cn(
                  "flex items-center justify-center p-2 rounded-md",
                  currentPath === item.href
                    ? "bg-blue-600 text-white"
                    : "text-gray-600 hover:bg-gray-100"
                )}
                title={item.title}
              >
                <div className="flex h-5 w-5 items-center">{item.icon}</div>
              </Link>
            ) : (
              <NavItem
                href={item.href}
                icon={item.icon}
                title={item.title}
                isActive={currentPath === item.href}
              />
            )}
          </div>
        ))}
      </div>
    </div>
  );
};
