// components/modals/ui/Sidebar.tsx
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { FileCheck,LayoutDashboard, ClipboardPlus, Settings, Sparkles } from "lucide-react";

export const BRAND = "#d4537e";
export const BRAND_LIGHT = "#fceef3";

export const Icon = {
    Prescription: () => <FileCheck size={20} />
};

const NAV_LINKS = [
  { label: "Dashboard",        href: "/dashboard",          icon: LayoutDashboard },
  { label: "New Prescription", href: "/prescription",       icon: ClipboardPlus   },
  { label: "Settings",         href: "/dashboard/settings", icon: Settings        },
  { label: "Subscription",     href: "/dashboard/settings/subscription",  icon: Sparkles },
];
export default function Sidebar({ user, onClose }: { user: any; onClose?: () => void }) {
  const pathname = usePathname();

  return (
    <div className="flex flex-col h-full py-6">
      <div className="px-5 pb-5 border-b border-gray-100 mb-3">
        <div className="flex items-center gap-2.5">
          <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: BRAND_LIGHT, color: BRAND }}>
            <Icon.Prescription />
          </div>
          <span className="text-lg font-extrabold text-gray-900 tracking-tight">RxH</span>
        </div>
      </div>

      <div className="px-4 pb-4">
        <div className="flex items-center gap-2.5 rounded-xl px-3 py-2.5" style={{ background: BRAND_LIGHT }}>
          <div className="w-9 h-9 rounded-full text-white flex items-center justify-center font-bold text-base" style={{ background: BRAND }}>
            {(user?.fullname ?? "D").charAt(0)}
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-sm font-bold text-gray-900 truncate">{user?.fullname}</div>
            <span className="text-[10px] font-semibold text-sky-600 bg-sky-100 px-2 py-0.5 rounded-full">Free Plan</span>
          </div>
        </div>
      </div>

      <nav className="px-2">
        {NAV_LINKS.map((link) => {
          const isActive = pathname === link.href;
          const isSub = link.href === "/dashboard/settings/subscription";
          return (
            <Link
              key={link.label}
              href={link.href}
              onClick={onClose}
              className={`flex items-center gap-2.5 rounded-xl text-sm font-medium mb-0.5 transition-colors ${
                isSub ? "px-3 py-2.5" : "px-3 py-2.5"
              }`}
              style={
                isActive
                  ? { background: BRAND_LIGHT, color: BRAND }
                  : isSub
                    ? { color: "#111827" }
                    : undefined
              }
            >
              <link.icon size={isSub ? 16 : 18} strokeWidth={1.8} />
              {link.label}
            </Link>
          );
        })}
      </nav>
    </div>
  );
}