// components/modals/ui/Sidebar.tsx
"use client";
import Image from "next/image";
import AppIcon from "@/app/icon.png";
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">
      {/* Logo */}
      <div className="px-5 pb-5 border-b border-gray-100 mb-3">
        <div className="flex items-center justify-center">
          <Image
            src={AppIcon}
            alt="RxH"
            width={100}
            height={100}
            className="rounded-xl"
            priority
          />
        </div>
      </div>

      {/* Profile chip */}
      <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>
  );
}