"use client"

import type React from "react"
import { useEffect, useState } from "react"
import { useRouter, usePathname } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { LayoutDashboard, User, Car, Hotel, Sparkles, Package, LogOut, Box } from "lucide-react"
import { cn } from "@/lib/utils"

export default function UserDashboardLayout({ children }: { children: React.ReactNode }) {
  const [session, setSession] = useState<any>(null)
  const router = useRouter()
  const pathname = usePathname()

  useEffect(() => {
    const customerSession = sessionStorage.getItem("customer_session")
    if (!customerSession) {
      router.push("/login")
      return
    }

    try {
      const sessionData = JSON.parse(customerSession)
      setSession(sessionData)
    } catch (error) {
      console.error("Error parsing session:", error)
      router.push("/login")
    }
  }, [router])

  const handleLogout = () => {
    sessionStorage.removeItem("customer_session")
    window.dispatchEvent(new Event("sessionUpdate"))
    router.push("/")
    window.location.reload()
  }

  const menuItems = [
    { href: "/user/dashboard", label: "Dashboard", icon: LayoutDashboard },
    { href: "/user/manage-profile", label: "Manage Profile", icon: User },
    { href: "/user/vehicle-bookings", label: "Vehicle Bookings", icon: Car },
    { href: "/user/hotel-bookings", label: "Hotel Bookings", icon: Hotel },
    { href: "/user/fixed-bookings", label: "Fixed Bookings", icon: Box },
    { href: "/user/spiritual-bookings", label: "Spiritual Bookings", icon: Sparkles },
    { href: "/user/custom-packages", label: "Custom Packages", icon: Package },
  ]

  if (!session) {
    return null
  }

  return (
    <div className="min-h-[calc(100vh-64px)] bg-gradient-to-br from-teal-50/50 via-white to-cyan-50/50">
      <div className="container mx-auto px-4 py-6 lg:py-8">
        <div className="flex gap-6 lg:gap-8">
          {/* Desktop sidebar only */}
          <aside className="hidden lg:block w-72 shrink-0">
            <div className="sticky top-24 bg-white rounded-2xl shadow-lg border border-border/50 overflow-hidden">
              {/* Navigation */}
              <nav className="p-4 space-y-1.5">
                {menuItems.map((item) => {
                  const Icon = item.icon
                  const isActive = pathname === item.href
                  return (
                    <Link key={item.href} href={item.href}>
                      <Button
                        variant={isActive ? "default" : "ghost"}
                        className={cn(
                          "w-full justify-start gap-3 h-12 transition-all duration-200",
                          isActive
                            ? "bg-gradient-to-r from-teal-600 to-cyan-600 text-white shadow-md hover:shadow-lg hover:from-teal-700 hover:to-cyan-700"
                            : "hover:bg-teal-50 text-gray-700 hover:text-teal-700",
                        )}
                      >
                        <Icon className="h-5 w-5 shrink-0" />
                        <span className="font-medium text-sm">{item.label}</span>
                      </Button>
                    </Link>
                  )
                })}
              </nav>

              <div className="p-4 border-t border-border/50">
                <Button
                  variant="outline"
                  className="w-full justify-start gap-3 h-12 hover:bg-red-50 hover:text-red-600 hover:border-red-300 transition-all duration-200 font-medium bg-transparent"
                  onClick={handleLogout}
                >
                  <LogOut className="h-5 w-5" />
                  <span>Logout</span>
                </Button>
              </div>
            </div>
          </aside>

          <main className="flex-1 min-w-0">
            <div className="bg-white rounded-2xl shadow-lg border border-border/50 p-6 lg:p-8">{children}</div>
          </main>
        </div>
      </div>
    </div>
  )
}