'use client';

import Link from 'next/link';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { usePathname } from 'next/navigation';
import { Button } from './ui';
import { useEffect, useState, useRef } from 'react';
import { cn } from './ui';
import { useAnalytics } from './analytics/useAnalytics';
import { AnalyticsEvents } from './analytics/analytics-events';

export default function Header() {
  const t = useTranslations('Navigation');
  const pathname = usePathname();
  const { trackEvent } = useAnalytics();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const mobileMenuRef = useRef<HTMLDivElement>(null);

  // Extract locale from pathname
  const currentLocale = pathname.split('/')[1] || 'en';

  // Check if homepage
  const isHomePage = pathname === `/${currentLocale}` || pathname === '/';

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Prevent scroll when mobile menu is open and handle focus trap
  useEffect(() => {
    if (isMobileMenuOpen) {
      document.body.style.overflow = 'hidden';
      // Focus trap logic
      const focusableElements = mobileMenuRef.current?.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
      );

      if (focusableElements && focusableElements.length > 0) {
        const firstElement = focusableElements[0] as HTMLElement;
        const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;

        const handleTabKey = (e: KeyboardEvent) => {
          if (e.key === 'Tab') {
            if (e.shiftKey) {
              if (document.activeElement === firstElement) {
                e.preventDefault();
                lastElement.focus();
              }
            } else {
              if (document.activeElement === lastElement) {
                e.preventDefault();
                firstElement.focus();
              }
            }
          }
        };

        const handleEscapeKey = (e: KeyboardEvent) => {
          if (e.key === 'Escape') {
            setIsMobileMenuOpen(false);
          }
        };

        document.addEventListener('keydown', handleTabKey);
        document.addEventListener('keydown', handleEscapeKey);

        // Focus the first element when menu opens
        setTimeout(() => firstElement.focus(), 100);

        return () => {
          document.removeEventListener('keydown', handleTabKey);
          document.removeEventListener('keydown', handleEscapeKey);
        };
      }
    } else {
      document.body.style.overflow = 'unset';
    }
  }, [isMobileMenuOpen]);

  // Function to get path for a different locale
  const getPathForLocale = (newLocale: string) => {
    const segments = pathname.split('/');
    segments[1] = newLocale;
    return segments.join('/');
  };

  const menuItems = [
    { label: t('home'), href: '/' },
    { label: t('team'), href: '/team' },
    { label: t('products'), href: currentLocale === 'de' ? '/produkte' : '/products' },
    { label: t('blog'), href: '/blog' },
  ];

  const headerClass = cn(
    'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu animate-in fade-in slide-in-from-top-12 fill-mode-both',
    {
      'bg-primary/95 backdrop-blur-md md:bg-transparent py-3 md:py-8 shadow-2xl md:shadow-none':
        isHomePage && !isScrolled && !isMobileMenuOpen,
      'bg-primary py-3 md:py-4 shadow-2xl': !isHomePage || isScrolled || isMobileMenuOpen,
    },
  );

  const textColorClass = 'text-white';
  const logoSrc = '/logo-white.svg';

  return (
    <>
      <header className={headerClass} style={{ animationDuration: '800ms' }}>
        <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
          <div
            className="flex-shrink-0 group touch-target animate-in fade-in zoom-in-90 fill-mode-both"
            style={{ animationDuration: '600ms', animationDelay: '100ms' }}
          >
            <Link
              href={`/${currentLocale}`}
              onClick={() =>
                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
                  target: 'home_logo',
                  location: 'header',
                })
              }
            >
              <Image
                src={logoSrc}
                alt={t('home')}
                width={120}
                height={120}
                className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
                priority
              />
            </Link>
          </div>

          <div className="flex items-center gap-4 md:gap-12">
            <nav className="hidden lg:flex items-center space-x-10">
              {menuItems.map((item, idx) => (
                <div
                  key={item.href}
                  className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
                  style={{ animationDuration: '500ms', animationDelay: `${150 + idx * 80}ms` }}
                >
                  <Link
                    href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
                    onClick={() => {
                      setIsMobileMenuOpen(false);
                      trackEvent(AnalyticsEvents.LINK_CLICK, {
                        label: item.label,
                        href: item.href,
                        location: 'header_nav',
                      });
                    }}
                    className={cn(
                      textColorClass,
                      'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
                    )}
                  >
                    {item.label}
                    <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
                  </Link>
                </div>
              ))}
            </nav>

            <div
              className={cn(
                'hidden lg:flex items-center space-x-8 animate-in fade-in slide-in-from-right-8 fill-mode-both',
                textColorClass,
              )}
              style={{ animationDuration: '600ms', animationDelay: '300ms' }}
            >
              <div
                className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase animate-in fade-in slide-in-from-left-4 fill-mode-both"
                style={{ animationDuration: '500ms', animationDelay: '600ms' }}
              >
                <div>
                  <Link
                    href={getPathForLocale('en')}
                    onClick={() =>
                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
                        type: 'language',
                        from: currentLocale,
                        to: 'en',
                        location: 'header',
                      })
                    }
                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-80'}`}
                  >
                    EN
                  </Link>
                </div>
                <div className="w-px h-4 bg-current opacity-30" />
                <div>
                  <Link
                    href={getPathForLocale('de')}
                    onClick={() =>
                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
                        type: 'language',
                        from: currentLocale,
                        to: 'de',
                        location: 'header',
                      })
                    }
                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-80'}`}
                  >
                    DE
                  </Link>
                </div>
              </div>

              <div
                className="animate-in fade-in zoom-in-95 fill-mode-both"
                style={{ animationDuration: '600ms', animationDelay: '700ms' }}
              >
                <Button
                  href={`/${currentLocale}/contact`}
                  variant="white"
                  size="md"
                  className="px-8 shadow-xl hover:scale-105 transition-transform"
                  onClick={() =>
                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
                      label: t('contact'),
                      location: 'header_cta',
                    })
                  }
                >
                  {t('contact')}
                </Button>
              </div>
            </div>

            {/* Mobile Menu Button */}
            <button
              className={cn(
                'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50 transition-all duration-300',
                textColorClass,
                isMobileMenuOpen ? 'rotate-90 scale-110' : 'rotate-0 scale-100',
              )}
              aria-label={t('toggleMenu')}
              aria-expanded={isMobileMenuOpen}
              aria-controls="mobile-menu"
              onClick={() => {
                const newState = !isMobileMenuOpen;
                setIsMobileMenuOpen(newState);
                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
                  type: 'mobile_menu',
                  action: newState ? 'open' : 'close',
                });
              }}
            >
              <svg
                className="w-7 h-7 transition-transform duration-300"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                {isMobileMenuOpen ? (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                ) : (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                )}
              </svg>
            </button>
          </div>
        </div>

        {/* Mobile Menu Overlay */}
        <div
          className={cn(
            'fixed inset-0 bg-primary z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col',
            isMobileMenuOpen
              ? 'opacity-100 translate-y-0'
              : 'opacity-0 -translate-y-full pointer-events-none',
          )}
          id="mobile-menu"
          role="dialog"
          aria-modal="true"
          aria-label={t('menu')}
          ref={mobileMenuRef}
          inert={isMobileMenuOpen ? undefined : true}
        >
          <nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
            {menuItems.map((item, idx) => (
              <div
                key={item.href}
                className={cn(
                  'transition-all duration-500 transform',
                  isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
                )}
                style={{ transitionDelay: `${isMobileMenuOpen ? 200 + idx * 80 : 0}ms` }}
              >
                <Link
                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
                  onClick={() => {
                    setIsMobileMenuOpen(false);
                    trackEvent(AnalyticsEvents.LINK_CLICK, {
                      label: item.label,
                      href: item.href,
                      location: 'mobile_menu',
                    });
                  }}
                  className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
                >
                  {item.label}
                </Link>
              </div>
            ))}

            <div
              className={cn(
                'pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500',
                isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
              )}
              style={{ transitionDelay: isMobileMenuOpen ? '600ms' : '0ms' }}
            >
              <div className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white">
                <div>
                  <Link
                    href={getPathForLocale('en')}
                    className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-80'}`}
                  >
                    EN
                  </Link>
                </div>
                <div className="w-px h-6 bg-white/30" />
                <div>
                  <Link
                    href={getPathForLocale('de')}
                    className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-80'}`}
                  >
                    DE
                  </Link>
                </div>
              </div>

              <div className="w-full max-w-xs">
                <Button
                  href={`/${currentLocale}/contact`}
                  variant="accent"
                  size="lg"
                  className="w-full py-6 text-lg md:text-xl shadow-2xl hover:scale-105 transition-transform"
                >
                  {t('contact')}
                </Button>
              </div>
            </div>

            {/* Bottom Branding */}
            <div
              className={cn(
                'p-12 flex justify-center transition-all duration-700',
                isMobileMenuOpen ? 'opacity-20 scale-100' : 'opacity-0 scale-75',
              )}
              style={{ transitionDelay: isMobileMenuOpen ? '800ms' : '0ms' }}
            >
              <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
            </div>
          </nav>
        </div>
      </header>
    </>
  );
}
