"use client";

import { useState, useEffect } from "react";
import { useRouter, usePathname } from "next/navigation";
import Link from "next/link";
import { 
  LogOut, 
  LayoutDashboard, 
  CalendarPlus, 
  CalendarDays 
} from "lucide-react";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    const userData = localStorage.getItem("user");
    if (userData) {
      setUser(JSON.parse(userData));
    } else {
      router.push("/login");
    }
  }, []);

  const handleLogout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    router.push("/login");
  };

  return (
    <div className="min-h-screen bg-white flex flex-col font-sans">
      
      {/* HEADER TINGKAT ATAS */}
      <header className="bg-[#e5e7eb] flex items-center justify-between px-6 py-4 shadow-sm z-20 relative">
        {/* Logo Kiri */}
        <div>
          <h2 className="text-blue-600 text-sm font-medium mb-1">Welcome to,</h2>
          <h1 className="text-blue-600 text-3xl font-bold">S-CLASS</h1>
        </div>

        {/* Profil & Logout Kanan */}
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-3">
            <div className="bg-blue-600 text-white rounded-full h-10 w-10 flex items-center justify-center text-lg font-bold shadow-sm">
              {user?.full_name ? user.full_name.charAt(0).toUpperCase() : "V"}
            </div>
            <div className="hidden sm:flex flex-col">
              <span className="font-semibold text-gray-800 text-sm">
                {user?.full_name || "Valentino Heman Budiarto"}
              </span>
              <span className="font-medium text-gray-500 text-xs capitalize">
                {user?.role === 'admin' ? 'Administrator' : 'Mahasiswa'}
              </span>
            </div>
          </div>
          <button 
            onClick={handleLogout}
            className="flex items-center gap-2 text-red-500 font-medium hover:text-red-600 transition-colors"
          >
            Log Out <LogOut size={20} />
          </button>
        </div>
      </header>

      {/* AREA BAWAH (SIDEBAR + KONTEN) */}
      <div className="flex flex-1 overflow-hidden relative">
        
        {/* SIDEBAR KIRI (Kini Permanen/Statis) */}
        <aside className="bg-[#b0c4d9] w-64 flex flex-col py-10 shadow-inner z-10">
          <nav className="flex flex-col gap-6 px-4">
            
            {/* Menu 1: View Rooms */}
            <Link 
              href="/dashboard" 
              className={`flex items-center gap-4 cursor-pointer font-semibold transition-colors group 
                ${pathname === '/dashboard' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}
            >
              <div className={`p-2 rounded-lg transition-colors 
                ${pathname === '/dashboard' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
                <LayoutDashboard size={22} />
              </div>
              <span>View Rooms</span>
            </Link>

            {/* Menu 2: Add Booking */}
            <Link 
              href="/dashboard/bookings/add" 
              className={`flex items-center gap-4 cursor-pointer font-semibold transition-colors group 
                ${pathname === '/dashboard/bookings/add' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}
            >
              <div className={`p-2 rounded-lg transition-colors 
                ${pathname === '/dashboard/bookings/add' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
                <CalendarPlus size={22} />
              </div>
              <span>Add Booking</span>
            </Link>

            {/* Menu 3: Calendar View */}
            <Link 
              href="/dashboard/bookings/calendar" 
              className={`flex items-center gap-4 cursor-pointer font-semibold transition-colors group 
                ${pathname === '/dashboard/bookings/calendar' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}
            >
              <div className={`p-2 rounded-lg transition-colors 
                ${pathname === '/dashboard/bookings/calendar' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
                <CalendarDays size={22} />
              </div>
              <span>Calendar View</span>
            </Link>

          </nav>
        </aside>

        {/* KONTEN UTAMA */}
        <main className="flex-1 overflow-y-auto bg-[#f8fafc] p-8">
          {children}
        </main>

      </div>
    </div>
  );
}