'use client';

/**
 * ServicesMegaMenu Component
 *
 * Interactive, accessible desktop mega menu for quick discovery of top beauty categories.
 * Full dark mode support, elevated z-index, safe hover bridge, and grace period
 * so the menu does not abruptly close when moving the mouse to click items.
 *
 * DATA: `categories` prop contains live API data from layout RSC.
 * VISUAL: Icon and color are mapped by slug from ICON_MAP; falls back to Sparkles/default.
 */

import React, { useState, useEffect, useRef, useCallback } from 'react';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import {
  Scissors,
  Sparkles,
  Heart,
  Smile,
  Eye,
  Feather,
  Sparkle,
  Flame,
  ChevronDown,
  ArrowRight,
  ShieldCheck,
} from 'lucide-react';
import type { Category } from '@shinecode/api-client/types';
import { ImageWithFallback } from '@/components/ui/ImageWithFallback';

interface ServicesMegaMenuProps {
  locale: string;
  /** Live API categories from layout RSC — empty array means API unavailable */
  categories?: Category[];
}

/** Map API category slugs → icon + color class. Visual-only, not data. */
const ICON_MAP: Record<string, { icon: React.ComponentType<{ className?: string }>; color: string }> = {
  hair: { icon: Scissors, color: 'text-rose-600 bg-rose-50 dark:bg-rose-950/50 dark:text-rose-400' },
  nails: { icon: Sparkles, color: 'text-amber-600 bg-amber-50 dark:bg-amber-950/50 dark:text-amber-400' },
  makeup: { icon: Heart, color: 'text-pink-600 bg-pink-50 dark:bg-pink-950/50 dark:text-pink-400' },
  facial: { icon: Smile, color: 'text-emerald-600 bg-emerald-50 dark:bg-emerald-950/50 dark:text-emerald-400' },
  facials: { icon: Smile, color: 'text-emerald-600 bg-emerald-50 dark:bg-emerald-950/50 dark:text-emerald-400' },
  massage: { icon: Feather, color: 'text-indigo-600 bg-indigo-50 dark:bg-indigo-950/50 dark:text-indigo-400' },
  spa: { icon: Feather, color: 'text-indigo-600 bg-indigo-50 dark:bg-indigo-950/50 dark:text-indigo-400' },
  eyebrows: { icon: Eye, color: 'text-teal-600 bg-teal-50 dark:bg-teal-950/50 dark:text-teal-400' },
  skincare: { icon: Sparkle, color: 'text-purple-600 bg-purple-50 dark:bg-purple-950/50 dark:text-purple-400' },
  treatment: { icon: Sparkle, color: 'text-purple-600 bg-purple-50 dark:bg-purple-950/50 dark:text-purple-400' },
  'hair-removal': { icon: Flame, color: 'text-orange-600 bg-orange-50 dark:bg-orange-950/50 dark:text-orange-400' },
  men: { icon: Scissors, color: 'text-blue-600 bg-blue-50 dark:bg-blue-950/50 dark:text-blue-400' },
  'mens-grooming': { icon: Scissors, color: 'text-blue-600 bg-blue-50 dark:bg-blue-950/50 dark:text-blue-400' },
};

const DEFAULT_ICON = { icon: Sparkles, color: 'text-zinc-600 bg-zinc-100 dark:bg-zinc-800 dark:text-zinc-300' };

/** Find icon/color for a category by exact slug match, then partial match */
function getIconForCategory(slug: string) {
  if (ICON_MAP[slug]) return ICON_MAP[slug];
  const partialKey = Object.keys(ICON_MAP).find((k) => slug.includes(k) || k.includes(slug.split('-')[0]));
  return partialKey ? ICON_MAP[partialKey] : DEFAULT_ICON;
}

export function ServicesMegaMenu({ locale, categories = [] }: ServicesMegaMenuProps) {
  const [isOpen, setIsOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const tNav = useTranslations('navigation');

  const handleMouseEnter = useCallback(() => {
    if (closeTimeoutRef.current) {
      clearTimeout(closeTimeoutRef.current);
      closeTimeoutRef.current = null;
    }
    setIsOpen(true);
  }, []);

  const handleMouseLeave = useCallback(() => {
    if (closeTimeoutRef.current) {
      clearTimeout(closeTimeoutRef.current);
    }
    // 200ms grace period so moving mouse diagonally or across elements doesn't abruptly close the menu
    closeTimeoutRef.current = setTimeout(() => {
      setIsOpen(false);
    }, 200);
  }, []);

  // Close immediately on navigation or Escape
  const closeImmediately = useCallback(() => {
    if (closeTimeoutRef.current) {
      clearTimeout(closeTimeoutRef.current);
      closeTimeoutRef.current = null;
    }
    setIsOpen(false);
  }, []);

  // Close on Escape or click outside
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') closeImmediately();
    };

    const handleClickOutside = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        closeImmediately();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen, closeImmediately]);

  // Clean up timer on unmount
  useEffect(() => {
    return () => {
      if (closeTimeoutRef.current) {
        clearTimeout(closeTimeoutRef.current);
      }
    };
  }, []);

  return (
    <div
      ref={menuRef}
      className="relative inline-block"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <button
        type="button"
        onClick={() => setIsOpen((prev) => !prev)}
        aria-expanded={isOpen}
        aria-haspopup="true"
        className={`inline-flex items-center gap-1.5 py-2 text-sm font-semibold transition-colors cursor-pointer ${
          isOpen ? 'text-brand-500' : 'text-slate-700 dark:text-zinc-300 hover:text-brand-500 dark:hover:text-brand-400'
        }`}
      >
        <span>{tNav('services')}</span>
        <ChevronDown
          className={`w-4 h-4 transition-transform duration-200 ${
            isOpen ? 'rotate-180 text-brand-500' : 'text-slate-400 dark:text-zinc-500'
          }`}
        />
      </button>

      {/* Mega Menu Dropdown with Invisible Safe Hover Tunnel */}
      {isOpen && (
        <div
          className="absolute top-full inset-inline-start-0 pt-2 z-[100] text-start"
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          {/* Invisible hover bridge spanning between button and dropdown */}
          <div className="w-[740px] max-w-[92vw] p-6 bg-white dark:bg-zinc-900 rounded-3xl shadow-2xl border border-slate-200/90 dark:border-zinc-800 animate-in fade-in slide-in-from-top-2 duration-150 relative before:absolute before:-top-3 before:inset-x-0 before:h-3 before:content-['']" role="menu">
            <div className="flex items-center justify-between pb-4 mb-4 border-b border-slate-100 dark:border-zinc-800">
              <span className="text-xs font-extrabold text-slate-400 dark:text-zinc-500 uppercase tracking-wider">
                {tNav('popularCategories')}
              </span>
              <Link
                href={`/${locale}/services`}
                onClick={closeImmediately}
                className="text-xs font-bold text-brand-500 hover:text-brand-600 dark:text-brand-400 dark:hover:text-brand-300 transition-colors flex items-center gap-1.5 group"
              >
                <span>{tNav('viewAllServices')}</span>
                <ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5 rtl:rotate-180" />
              </Link>
            </div>

            {categories.length > 0 && (
              <div className="grid grid-cols-2 gap-3">
                {categories.map((cat) => {
                  const { icon: Icon } = getIconForCategory(cat.slug);
                  return (
                    <Link
                      key={cat.id}
                      href={`/${locale}/categories/${cat.slug}`}
                      onClick={closeImmediately}
                      className="group p-3 rounded-2xl hover:bg-slate-50 dark:hover:bg-zinc-800/70 transition-all duration-150 flex items-start gap-3.5 border border-transparent hover:border-slate-200/60 dark:hover:border-zinc-700/60 cursor-pointer"
                      role="menuitem"
                    >
                      <div className="w-10 h-10 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform overflow-hidden relative rounded-xl">
                        {cat.category_image ? (
                          <ImageWithFallback
                            src={cat.category_image}
                            alt={cat.name}
                            width={40}
                            height={40}
                            className="w-full h-full object-cover rounded-xl"
                          />
                        ) : (
                          <Icon className="w-6 h-6 text-zinc-700 dark:text-zinc-300" />
                        )}
                      </div>
                      <div className="min-w-0 flex-1">
                        <h4 className="text-sm font-bold text-slate-900 dark:text-white group-hover:text-brand-500 dark:group-hover:text-brand-400 transition-colors truncate">
                          {cat.name}
                        </h4>
                        {cat.description && (
                          <p className="text-xs text-slate-500 dark:text-zinc-400 mt-0.5 line-clamp-1">
                            {cat.description}
                          </p>
                        )}
                      </div>
                    </Link>
                  );
                })}
              </div>
            )}

            <div className="mt-5 pt-4 border-t border-slate-100 dark:border-zinc-800 flex items-center justify-between bg-slate-50/80 dark:bg-zinc-950/80 -mx-6 -mb-6 p-4 px-6 rounded-b-3xl">
              <div className="flex items-center gap-2 text-xs font-medium text-slate-600 dark:text-zinc-400">
                <ShieldCheck className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                <span>100% verified salon partners & certified doorstep beauticians</span>
              </div>
              <Link
                href={`/${locale}/partner`}
                onClick={closeImmediately}
                className="text-xs font-bold text-brand-500 hover:text-brand-600 dark:text-brand-400 dark:hover:text-brand-300 transition-colors flex items-center gap-1 cursor-pointer"
              >
                <span>{tNav('becomePartner')}</span>
                <ArrowRight className="w-3.5 h-3.5 rtl:rotate-180" />
              </Link>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default ServicesMegaMenu;