"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Home, ShoppingCart, Users, Settings, Package } from "lucide-react";

// Mock authentication check
const isAuthenticated = () => {
  // In a real app, this would check tokens, sessions, etc.
  // For this exercise, we'll simulate a logged-in state.
  return typeof window !== "undefined" && localStorage.getItem("admin_logged_in") === "true";
};

const logout = () => {
  if (typeof window !== "undefined") {
    localStorage.removeItem("admin_logged_in");
  }
};

const adminNavItems = [
  { name: "Overview", href: "/admin/dashboard/overview", icon: Home },
  { name: "Services", href: "/admin/dashboard/services", icon: Package },
  { name: "Orders", href: "/admin/dashboard/orders", icon: ShoppingCart },
  { name: "Users", href: "/admin/dashboard/users", icon: Users },
  { name: "Settings", href: "/admin/dashboard/settings", icon: Settings },
];

export default function AdminDashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const [isAuth, setIsAuth] = useState(false);

  useEffect(() => {
    if (!isAuthenticated()) {
      router.push("/admin/login");
    } else {
      setIsAuth(true);
    }
  }, [router]);

  const handleLogout = () => {
    logout();
    router.push("/admin/login");
  };

  if (!isAuth) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900">
        <p className="text-gray-700 dark:text-gray-300">Redirecting to login...</p>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen bg-gray-100 dark:bg-gray-900">
      {/* Sidebar */}
      <aside className="w-64 bg-white p-4 shadow-md dark:bg-gray-800">
        <div className="mb-8 text-2xl font-bold text-gray-900 dark:text-white">
          Admin Panel
        </div>
        <nav>
          <ul>
            {adminNavItems.map((item) => {
              const Icon = item.icon;
              const isActive = pathname.startsWith(item.href);
              return (
                <li key={item.name} className="mb-2">
                  <Link
                    href={item.href}
                    className={`flex items-center rounded-md px-4 py-2 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 ${
                      isActive ? "bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300" : ""
                    }`}
                  >
                    <Icon className="mr-3 h-5 w-5" />
                    {item.name}
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
        <div className="mt-auto pt-8">
          <button
            onClick={handleLogout}
            className="flex w-full items-center rounded-md px-4 py-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900"
          >
            Logout
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 p-8">{children}</main>
    </div>
  );
}