// components/mobileMenu.tsx
"use client";

import { useState } from "react";
import Link from "next/link";
import { Menu, X, User, LogOut, ShoppingBag, Heart, Home } from "lucide-react";

interface MobileMenuProps {
  categories: { name: string; slug: string }[];
  isLoggedIn: boolean;
  firstName?: string;
}

export default function MobileMenu({ categories, isLoggedIn, firstName }: MobileMenuProps) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => setIsOpen(!isOpen);
  const closeMenu = () => setIsOpen(false);

  return (
    <>
      {/* Menu Button */}
      <button
        onClick={toggleMenu}
        className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
        aria-label="Toggle menu"
      >
        <Menu size={24} />
      </button>

      {/* Overlay */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-50"
          onClick={closeMenu}
        />
      )}

      {/* Slide-out Menu */}
      <div
        className={`fixed top-0 left-0 h-full w-[300px] max-w-[80vw] bg-white z-50 shadow-xl transform transition-transform duration-300 ease-in-out ${
          isOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        {/* Menu Header */}
        <div className="flex items-center justify-between p-4 border-b border-gray-200">
          <span className="font-bold text-lg text-gray-800">Menu</span>
          <button
            onClick={closeMenu}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
            aria-label="Close menu"
          >
            <X size={24} />
          </button>
        </div>

        {/* User Section */}
        <div className="p-4 border-b border-gray-200">
          {isLoggedIn ? (
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold">
                {firstName?.charAt(0).toUpperCase() || "U"}
              </div>
              <div>
                <p className="font-semibold text-gray-800">Hello, {firstName || "User"}</p>
                <Link
                  href="/account/profile"
                  className="text-sm text-blue-600 hover:underline"
                  onClick={closeMenu}
                >
                  My Account
                </Link>
              </div>
            </div>
          ) : (
            <Link
              href="/account/login"
              className="flex items-center gap-2 w-full justify-center py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              onClick={closeMenu}
            >
              <User size={18} />
              Login / Register
            </Link>
          )}
        </div>

        {/* Navigation Links */}
        <nav className="p-4 overflow-y-auto max-h-[calc(100vh-200px)]">
          <div className="space-y-1">
            <Link
              href="/"
              className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-100 transition-colors"
              onClick={closeMenu}
            >
              <Home size={20} />
              Home
            </Link>

            <Link
              href="/account/profile"
              className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-100 transition-colors"
              onClick={closeMenu}
            >
              <User size={20} />
              My Account
            </Link>

            <Link
              href="/account/orders"
              className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-100 transition-colors"
              onClick={closeMenu}
            >
              <ShoppingBag size={20} />
              Orders
            </Link>

            <Link
              href="/account/wishlist"
              className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-100 transition-colors"
              onClick={closeMenu}
            >
              <Heart size={20} />
              Wishlist
            </Link>
          </div>

          <div className="mt-4 pt-4 border-t border-gray-200">
            <p className="text-xs text-gray-500 font-medium uppercase tracking-wider mb-2">Categories</p>
            <div className="space-y-1">
              {categories.slice(0, 10).map((category) => (
                <Link
                  key={category.slug}
                  href={`/category/${category.slug}`}
                  className="block p-2 rounded-lg hover:bg-gray-100 transition-colors text-sm"
                  onClick={closeMenu}
                >
                  {category.name}
                </Link>
              ))}
              {categories.length > 10 && (
                <Link
                  href="/catalogue"
                  className="block p-2 text-blue-600 hover:bg-gray-100 rounded-lg transition-colors text-sm font-medium"
                  onClick={closeMenu}
                >
                  View All Categories →
                </Link>
              )}
            </div>
          </div>
        </nav>

        {/* Footer */}
        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 bg-gray-50">
          {isLoggedIn ? (
            <form action="/account/logout" method="POST">
              <button
                type="submit"
                className="flex items-center gap-2 w-full justify-center py-2 px-4 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                onClick={closeMenu}
              >
                <LogOut size={18} />
                Logout
              </button>
            </form>
          ) : null}
        </div>
      </div>
    </>
  );
}