"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, LogOut, Box, CreditCard } from "lucide-react";
import { cn } from "@/lib/utils";
import { USER_DASHBOARD_LAYOUT } from "@/lib/strings/user-dashboard";

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: USER_DASHBOARD_LAYOUT.MENU_DASHBOARD,
      icon: LayoutDashboard,
    },
    {
      href: "/user/manage-profile",
      label: USER_DASHBOARD_LAYOUT.MENU_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/payment-methods",
      label: "Payment Methods",
      icon: CreditCard,
    },
    /* {
      href: "/user/spiritual-bookings",
      label: "Spiritual Bookings",
      icon: Sparkles,
    }, */
    /*  {
      href: "/user/custom-packages",
      label: USER_DASHBOARD_LAYOUT.MENU_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>{USER_DASHBOARD_LAYOUT.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>
  );
}