"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { LayoutDashboard, BookOpen, PlusCircle, Calendar, MonitorPlay } from "lucide-react"; // Icon

export default function Sidebar() {
  const pathname = usePathname();

  // Helper untuk mengecek apakah menu sedang aktif
  const isActive = (path: string) => pathname === path;

  return (
    <aside className="hidden lg:flex flex-col w-72 h-screen overflow-y-hidden bg-slate-900 text-white duration-300 ease-linear dark:bg-slate-900 border-r border-slate-800">
      {/* --- LOGO AREA --- */}
      <div className="flex items-center justify-center gap-2 px-6 py-5.5 lg:py-6.5 border-b border-slate-800">
        <div className="text-2xl font-bold text-yellow-500">S-CLASS</div>
        <div className="text-xs text-gray-400 font-medium">Admin Panel</div>
      </div>

      {/* --- MENU LIST --- */}
      <div className="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
        <nav className="mt-5 px-4 py-4 lg:mt-9 lg:px-6">
          
          {/* GROUP: MENU UTAMA */}
          <div>
            <h3 className="mb-4 ml-4 text-sm font-semibold text-gray-400">MENU</h3>
            
            <ul className="mb-6 flex flex-col gap-1.5">
              
              {/* Dashboard */}
              <li>
                <Link
                  href="/dashboard"
                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
                    isActive("/dashboard") ? "bg-slate-700 text-white" : "text-gray-300"
                  }`}
                >
                  <LayoutDashboard size={18} />
                  Dashboard
                </Link>
              </li>

              {/* GROUP: ROOMS */}
              <li className="mt-4 mb-2 ml-4 text-xs font-medium text-gray-500 uppercase">ROOMS</li>
              
              <li>
                <Link
                  href="/dashboard/rooms"
                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
                    isActive("/dashboard/rooms") ? "bg-slate-700 text-white" : "text-gray-300"
                  }`}
                >
                  <MonitorPlay size={18} />
                  View Rooms
                </Link>
              </li>

              {/* GROUP: BOOKING */}
              <li className="mt-4 mb-2 ml-4 text-xs font-medium text-gray-500 uppercase">BOOKINGS</li>

              <li>
                <Link
                  href="/dashboard/bookings"
                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
                    isActive("/dashboard/bookings") ? "bg-slate-700 text-white" : "text-gray-300"
                  }`}
                >
                  <BookOpen size={18} />
                  View Booking
                </Link>
              </li>

              <li>
                <Link
                  href="/dashboard/bookings/add"
                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
                    isActive("/dashboard/bookings/add") ? "bg-slate-700 text-white" : "text-gray-300"
                  }`}
                >
                  <PlusCircle size={18} />
                  Add Booking
                </Link>
              </li>

              <li>
                <Link
                  href="/dashboard/bookings/calendar"
                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
                    isActive("/dashboard/bookings/calendar") ? "bg-slate-700 text-white" : "text-gray-300"
                  }`}
                >
                  <Calendar size={18} />
                  Calendar View
                </Link>
              </li>

            </ul>
          </div>
        </nav>
      </div>
    </aside>
  );
}