'use client';

import Link from 'next/link';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { usePathname } from 'next/navigation';
import { Button } from './ui';
import { useEffect, useState } from 'react';
import { cn } from './ui';

export default function Header() {
  const t = useTranslations('Navigation');
  const pathname = usePathname();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // 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
  useEffect(() => {
    if (isMobileMenuOpen) {
      document.body.style.overflow = 'hidden';
    } 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: '/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',
    {
      'bg-transparent py-4 md:py-8': 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 (
    <>
      <motion.header
        className={headerClass}
        initial={{ y: -100, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.8, ease: 'easeOut' }}
      >
        <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
          <motion.div
            className="flex-shrink-0 group touch-target"
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.1 }}
          >
            <Link href={`/${currentLocale}`}>
              <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>
          </motion.div>

          <motion.div
            className="flex items-center gap-4 md:gap-12"
            initial="hidden"
            animate="visible"
            variants={{
              visible: {
                transition: {
                  staggerChildren: 0.08,
                  delayChildren: 0.3,
                },
              },
            }}
          >
            <motion.nav className="hidden lg:flex items-center space-x-10" variants={navVariants}>
              {menuItems.map((item, _idx) => (
                <motion.div key={item.href} variants={navLinkVariants}>
                  <Link
                    href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
                    onClick={() => setIsMobileMenuOpen(false)}
                    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>
                </motion.div>
              ))}
            </motion.nav>

            <motion.div
              className={cn('hidden lg:flex items-center space-x-8', textColorClass)}
              variants={headerRightVariants}
            >
              <motion.div
                className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase"
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: 0.6 }}
              >
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.4, delay: 0.65 }}
                >
                  <Link
                    href={getPathForLocale('en')}
                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
                  >
                    EN
                  </Link>
                </motion.div>
                <motion.div
                  className="w-px h-4 bg-current opacity-20"
                  initial={{ scaleY: 0 }}
                  animate={{ scaleY: 1 }}
                  transition={{ duration: 0.4, delay: 0.7 }}
                />
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.4, delay: 0.75 }}
                >
                  <Link
                    href={getPathForLocale('de')}
                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
                  >
                    DE
                  </Link>
                </motion.div>
              </motion.div>

              <motion.div
                initial={{ scale: 0.9, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                transition={{ duration: 0.6, type: 'spring', stiffness: 400, delay: 0.7 }}
              >
                <Button
                  href={`/${currentLocale}/contact`}
                  variant="white"
                  size="md"
                  className="px-8 shadow-xl"
                >
                  {t('contact')}
                </Button>
              </motion.div>
            </motion.div>

            {/* Mobile Menu Button */}
            <motion.button
              className={cn(
                'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50',
                textColorClass,
              )}
              aria-label={t('toggleMenu')}
              initial={{ scale: 0.8, opacity: 0, rotate: -180 }}
              animate={{ scale: 1, opacity: 1, rotate: 0 }}
              transition={{
                duration: 0.6,
                type: 'spring',
                stiffness: 300,
                damping: 20,
                delay: 0.5,
              }}
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              <motion.svg
                className="w-7 h-7"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.3, delay: 0.6 }}
              >
                {isMobileMenuOpen ? (
                  <motion.path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                    initial={{ pathLength: 0 }}
                    animate={{ pathLength: 1 }}
                    transition={{ duration: 0.4, delay: 0.7 }}
                  />
                ) : (
                  <motion.path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 6h16M4 12h16M4 18h16"
                    initial={{ pathLength: 0 }}
                    animate={{ pathLength: 1 }}
                    transition={{ duration: 0.4, delay: 0.7 }}
                  />
                )}
              </motion.svg>
            </motion.button>
          </motion.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',
          )}
        >
          <motion.div
            className="flex-grow flex flex-col justify-center items-center p-8 space-y-8"
            initial="closed"
            animate={isMobileMenuOpen ? 'open' : 'closed'}
            variants={{
              open: {
                transition: {
                  staggerChildren: 0.1,
                  delayChildren: 0.2,
                },
              },
            }}
          >
            {menuItems.map((item, idx) => (
              <motion.div
                key={item.href}
                variants={{
                  closed: { opacity: 0, y: 50, scale: 0.9 },
                  open: {
                    opacity: 1,
                    y: 0,
                    scale: 1,
                    transition: {
                      duration: 0.6,
                      ease: 'easeOut',
                      delay: idx * 0.08,
                    },
                  },
                }}
              >
                <Link
                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
                >
                  {item.label}
                </Link>
              </motion.div>
            ))}

            <motion.div
              className="pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8"
              initial={{ opacity: 0, y: 30 }}
              animate={isMobileMenuOpen ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
              transition={{ duration: 0.5, delay: 0.8 }}
            >
              <motion.div
                className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.4, delay: 0.9 }}
              >
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.3, delay: 1.0 }}
                >
                  <Link
                    href={getPathForLocale('en')}
                    className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
                  >
                    EN
                  </Link>
                </motion.div>
                <motion.div
                  className="w-px h-6 bg-white/20"
                  initial={{ scaleX: 0 }}
                  animate={{ scaleX: 1 }}
                  transition={{ duration: 0.4, delay: 1.05 }}
                />
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.3, delay: 1.1 }}
                >
                  <Link
                    href={getPathForLocale('de')}
                    className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
                  >
                    DE
                  </Link>
                </motion.div>
              </motion.div>

              <motion.div
                initial={{ scale: 0.9, opacity: 0, y: 20 }}
                animate={{ scale: 1, opacity: 1, y: 0 }}
                transition={{ type: 'spring', stiffness: 400, damping: 20, delay: 1.2 }}
              >
                <Button
                  href={`/${currentLocale}/contact`}
                  variant="accent"
                  size="lg"
                  className="w-full max-w-xs py-6 text-lg md:text-xl shadow-2xl"
                >
                  {t('contact')}
                </Button>
              </motion.div>
            </motion.div>

            {/* Bottom Branding */}
            <motion.div
              className="p-12 flex justify-center opacity-20"
              initial={{ opacity: 0, scale: 0.8 }}
              animate={isMobileMenuOpen ? { opacity: 0.2, scale: 1 } : { opacity: 0, scale: 0.8 }}
              transition={{ duration: 0.5, delay: 1.4 }}
            >
              <motion.div
                initial={{ scale: 0.5 }}
                animate={{ scale: 1 }}
                transition={{ type: 'spring', stiffness: 300, delay: 1.5 }}
              >
                <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
              </motion.div>
            </motion.div>
          </motion.div>
        </div>
      </motion.header>
    </>
  );
}

const navVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.06,
      delayChildren: 0.1,
    },
  },
} as const;

const navLinkVariants = {
  hidden: { opacity: 0, y: 20, scale: 0.9 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
    transition: {
      duration: 0.5,
      ease: 'easeOut',
    },
  },
} as const;

const headerRightVariants = {
  hidden: { opacity: 0, x: 30 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease: 'easeOut' },
  },
} as const;