'use client';

import { useEffect } from 'react';
import type { LucideIcon } from 'lucide-react';
import {
  X,
  Search,
  Home,
  Grid3X3,
  Package,
  User,
  Heart,
} from 'lucide-react';

interface MobileMenuProps {
  isOpen: boolean;
  onClose: () => void;
}

interface NavLink {
  label: string;
  icon: LucideIcon;
  badge?: string;
}

const NAV_LINKS: NavLink[] = [
  { label: 'Home', icon: Home },
  { label: 'Men', icon: Grid3X3 },
  { label: 'New Arrivals', icon: Package },
  { label: 'Best Sellers', icon: Grid3X3 },
  { label: 'Sale', icon: Grid3X3, badge: 'Hot' },
  { label: 'Contact', icon: Grid3X3 },
];

const UTILITY_LINKS: NavLink[] = [
  { label: 'My Account', icon: User },
  { label: 'Track Order', icon: Package },
  { label: 'Wishlist', icon: Heart },
];

export default function MobileMenu({ isOpen, onClose }: MobileMenuProps) {
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [isOpen]);

  return (
    <>
      {isOpen && (
        <div
          className="fixed inset-0 z-50 bg-black/50 transition-opacity"
          onClick={onClose}
          aria-hidden="true"
        />
      )}

      <div
        className={`fixed top-0 left-0 z-50 flex h-full w-72 flex-col bg-white shadow-2xl transition-transform duration-300 ease-in-out ${
          isOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        <div className="flex items-center justify-between border-b border-gray-100 px-4 py-3">
          <a href="/" className="flex items-baseline">
            <span className="font-heading text-xl font-bold tracking-tight text-brand">X</span>
            <span className="font-heading text-xl font-bold tracking-tight text-gray-900">evon</span>
          </a>
          <button
            onClick={onClose}
            aria-label="Close menu"
            className="rounded-full p-1 transition-colors hover:bg-gray-100"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="border-b border-gray-100 px-4 py-3">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <input
              type="text"
              placeholder="Search products..."
              className="w-full rounded-lg border border-gray-200 bg-gray-50 py-2 pl-9 pr-4 text-sm outline-none transition-colors placeholder:text-gray-400 focus:border-brand focus:bg-white focus:ring-1 focus:ring-brand/20"
            />
          </div>
        </div>

        <nav className="flex-1 overflow-y-auto px-2 py-2">
          <ul className="space-y-1">
            {NAV_LINKS.map((link) => {
              const Icon = link.icon;
              return (
                <li key={link.label}>
                  <a
                    href="#"
                    onClick={onClose}
                    className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-brand"
                  >
                    <Icon className="h-4 w-4" />
                    <span>{link.label}</span>
                    {link.badge && (
                      <span className="ml-auto rounded-full bg-brand px-2 py-0.5 text-[10px] font-bold text-white">
                        {link.badge}
                      </span>
                    )}
                  </a>
                </li>
              );
            })}
          </ul>
        </nav>

        <div className="border-t border-gray-100 px-2 py-3">
          <ul className="space-y-1">
            {UTILITY_LINKS.map((link) => {
              const Icon = link.icon;
              return (
                <li key={link.label}>
                  <a
                    href="#"
                    onClick={onClose}
                    className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-gray-600 transition-colors hover:bg-gray-50 hover:text-brand"
                  >
                    <Icon className="h-4 w-4" />
                    <span>{link.label}</span>
                  </a>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </>
  );
}