import { BUNDLES_ENABLED } from '@/lib/features';
import React, { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useCart } from '../context/CartContext';
import { useAuth } from '../context/AuthContext';

interface Brand {
  id: number;
  name: string;
  slug: string;
}

interface Category {
  id: number;
  name: string;
  slug: string;
  sort_order: number;
}

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

const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
  const router = useRouter();
  const [expanded, setExpanded] = useState<string | null>(null);
  const { getTotalItems } = useCart();
  const { isAuthenticated, user } = useAuth();
  const [brands, setBrands] = useState<Brand[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [brandsResponse, categoriesResponse] = await Promise.all([
          fetch('/api/brands'),
          fetch('/api/categories'),
        ]);
        const brandsData = brandsResponse.ok ? await brandsResponse.json() : [];
        const categoriesData = categoriesResponse.ok ? await categoriesResponse.json() : [];
        setBrands(Array.isArray(brandsData) ? brandsData : []);
        setCategories(Array.isArray(categoriesData) ? categoriesData : []);
      } catch (error) {
        setBrands([]);
        setCategories([]);
      }
    };

    fetchData();
  }, []);

  useEffect(() => {
    if (!isOpen) {
      setExpanded(null);
      return;
    }

    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    const handleRouteChange = () => onClose();
    router.events.on('routeChangeStart', handleRouteChange);

    return () => {
      document.body.style.overflow = previousOverflow;
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [isOpen, onClose, router.events]);

  const categoryItems = useMemo(
    () => categories.map((category) => ({ label: category.name, href: `/parfemy/${category.slug}` })),
    [categories]
  );

  const brandItems = useMemo(
    () => brands.map((brand) => ({ label: brand.name, href: `/brands/${brand.slug}` })),
    [brands]
  );

  const toggleSection = (label: string) => {
    setExpanded((current) => (current === label ? null : label));
  };

  return (
    <div
      className={`fixed inset-0 z-[60] lg:hidden ${isOpen ? 'pointer-events-auto' : 'pointer-events-none'}`}
      aria-hidden={!isOpen}
    >
      <button
        type="button"
        aria-label="Zavřít menu"
        onClick={onClose}
        className={`absolute inset-0 bg-black/70 transition-opacity duration-300 ${
          isOpen ? 'opacity-100' : 'opacity-0'
        }`}
      />

      <aside
        className={`absolute inset-y-0 right-0 flex h-full w-full flex-col bg-luxury-dark shadow-2xl transition-transform duration-300 ease-out ${
          isOpen ? 'translate-x-0' : 'translate-x-full'
        }`}
        role="dialog"
        aria-modal="true"
        aria-label="Navigace"
      >
        <div className="flex items-center justify-between border-b border-luxury-gold/30 px-5 py-4">
          <Link href="/" onClick={onClose} className="flex items-center gap-3">
            <img src="/images/logo.png" alt="" className="h-9 w-auto" />
            <div>
              <p className="font-aptos text-base font-black leading-none text-luxury-gold">VYSTŘÍKEJ TO</p>
              <p className="mt-1 text-[11px] text-luxury-light/70">Celé parfémy</p>
            </div>
          </Link>
          <button
            type="button"
            onClick={onClose}
            className="flex h-11 w-11 items-center justify-center rounded-full text-luxury-gold hover:bg-luxury-gold/10"
            aria-label="Zavřít menu"
          >
            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <nav className="flex flex-1 flex-col overflow-y-auto px-5 py-8">
          <Accordion
            title="Celé parfémy"
            open={expanded === 'Celé parfémy'}
            onToggle={() => toggleSection('Celé parfémy')}
            items={categoryItems}
            onNavigate={onClose}
          />
          <Accordion
            title="Značky"
            open={expanded === 'Značky'}
            onToggle={() => toggleSection('Značky')}
            items={brandItems}
            leadingHref="/brands"
            leadingLabel="Všechny značky"
            onNavigate={onClose}
            scrollable
          />

          <MenuLink href="/vyprodej" onClick={onClose} tone="sale">
            Výprodej
          </MenuLink>
          {BUNDLES_ENABLED && (
            <MenuLink href="/vyhodne-sady" onClick={onClose}>
              Výhodné sady
            </MenuLink>
          )}
          <MenuLink href="/darkove-poukazy" onClick={onClose}>
            Dárkové poukazy
          </MenuLink>
        </nav>

        <div className="border-t border-luxury-gold/30 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] space-y-2">
          <MenuLink href={isAuthenticated ? '/wishlist' : '/login'} onClick={onClose} compact>
            Oblíbené
          </MenuLink>
          <MenuLink href={isAuthenticated ? '/profile' : '/login'} onClick={onClose} tone="gold" compact>
            {isAuthenticated ? user?.firstName || 'Můj účet' : 'Přihlášení'}
          </MenuLink>
          <Link
            href="/cart"
            onClick={onClose}
            className="flex items-center justify-between rounded-xl bg-luxury-gold px-4 py-3.5 font-aptos text-sm font-black uppercase tracking-wider text-luxury-dark"
          >
            <span>Košík</span>
            <span>{getTotalItems()}</span>
          </Link>
        </div>
      </aside>
    </div>
  );
};

function MenuLink({
  href,
  onClick,
  children,
  tone = 'default',
  compact = false,
}: {
  href: string;
  onClick: () => void;
  children: React.ReactNode;
  tone?: 'default' | 'gold' | 'sale';
  compact?: boolean;
}) {
  const tones = {
    default: 'text-luxury-light hover:bg-luxury-gold/10',
    gold: 'text-luxury-gold hover:bg-luxury-gold/10',
    sale: 'text-[#ff4548] hover:bg-red-500/10 hover:text-[#ff6b6d]',
  };

  return (
    <Link
      href={href}
      onClick={onClick}
      className={`block px-4 font-aptos font-bold uppercase ${
        compact
          ? 'rounded-xl py-3 text-sm tracking-wider'
          : tone === 'sale'
            ? 'py-2 text-[clamp(29px,8.2vw,41px)] font-black leading-[1.08] tracking-[-0.025em]'
            : 'py-2 text-[clamp(27px,7.8vw,38px)] leading-[1.08] tracking-[-0.025em]'
      } ${tones[tone]}`}
    >
      {children}
    </Link>
  );
}

function Accordion({
  title,
  open,
  onToggle,
  items,
  onNavigate,
  leadingHref,
  leadingLabel,
  scrollable = false,
}: {
  title: string;
  open: boolean;
  onToggle: () => void;
  items: { label: string; href: string }[];
  onNavigate: () => void;
  leadingHref?: string;
  leadingLabel?: string;
  scrollable?: boolean;
}) {
  return (
    <div className="border-b border-luxury-gold/15">
      <button
        type="button"
        onClick={onToggle}
        aria-expanded={open}
      className="flex w-full items-center justify-between px-4 py-2 font-aptos text-[clamp(27px,7.8vw,38px)] font-bold uppercase leading-[1.08] tracking-[-0.025em] text-luxury-light"
      >
        {title}
        <svg
          className={`h-4 w-4 text-luxury-gold transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      {open && (
        <div className={`pb-3 ${scrollable ? 'max-h-64 overflow-y-auto' : ''}`}>
          {leadingHref && leadingLabel && (
            <Link
              href={leadingHref}
              onClick={onNavigate}
              className="block px-6 py-2.5 text-sm font-semibold uppercase tracking-wide text-luxury-gold"
            >
              {leadingLabel}
            </Link>
          )}
          {items.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              onClick={onNavigate}
              className="block px-6 py-2.5 text-sm uppercase tracking-wide text-luxury-light/75 hover:text-luxury-gold"
            >
              {item.label}
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}

export default MobileMenu;