"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X, Mail } from "lucide-react";
import { SiGithub, SiLinkedin } from "react-icons/si";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { usePathname, useRouter } from "next/navigation";

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const locale = useLocale();
  const pathname = usePathname();
  const router = useRouter();
  const t = useTranslations("nav");

  const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;

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

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

  const navItems = [
    { name: t("home"), href: `/${locale}` },
    { name: t("about"), href: isHome ? "#about" : `/${locale}#about` },
    { name: t("projects"), href: isHome ? "#projects" : `/${locale}/projects` },
    { name: t("contact"), href: isHome ? "#contact" : `/${locale}#contact` },
  ];

  const socialLinks = [
    { icon: SiGithub, href: "https://github.com/Denshooter", label: "GitHub" },
    {
      icon: SiLinkedin,
      href: "https://linkedin.com/in/dkonkol",
      label: "LinkedIn",
    },
    { icon: Mail, href: "mailto:contact@dk0.dev", label: "Email" },
  ];

  const switchLocale = (nextLocale: string) => {
    try {
      const pathWithoutLocale = pathname.replace(new RegExp(`^/${locale}`), "") || "";
      const hash = typeof window !== "undefined" ? window.location.hash : "";
      router.push(`/${nextLocale}${pathWithoutLocale}${hash}`);
      document.cookie = `NEXT_LOCALE=${nextLocale}; path=/`;
    } catch {
      // ignore
    }
  };

  // Always render to prevent flash, but use opacity transition

  return (
    <>
      <motion.header
        initial={false}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.3, ease: "easeOut" }}
        className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none"
      >
        <div
          className={`pointer-events-auto transition-all duration-500 ease-out ${
            scrolled ? "w-full max-w-5xl" : "w-full max-w-7xl"
          }`}
        >
          <motion.div
            initial={false}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className={`
            backdrop-blur-xl transition-all duration-500
            ${
              scrolled
                ? "bg-white/95 border border-stone-200/50 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3"
                : "bg-white/85 border border-stone-200/30 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full"
            }
            flex justify-between items-center
          `}
          >
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="flex items-center space-x-2"
            >
              <Link
                href={`/${locale}`}
                className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
              >
                dk<span className="text-red-500">0</span>
              </Link>
            </motion.div>

            <nav className="hidden md:flex items-center space-x-8">
              {navItems.map((item) => (
                <motion.div
                  key={item.name}
                  whileHover={{ y: -2 }}
                  whileTap={{ scale: 0.95 }}
                >
                  <Link
                    href={item.href}
                    className="text-stone-600 hover:text-stone-900 transition-colors duration-200 font-medium relative group px-2 py-1 liquid-hover"
                    onClick={(e) => {
                      if (item.href.startsWith("#")) {
                        e.preventDefault();
                        const element = document.querySelector(item.href);
                        if (element) {
                          element.scrollIntoView({
                            behavior: "smooth",
                            block: "start",
                          });
                        }
                      }
                    }}
                  >
                    {item.name}
                    <motion.span 
                      className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-liquid-mint to-liquid-lavender rounded-full"
                      initial={{ scaleX: 0, opacity: 0 }}
                      whileHover={{ scaleX: 1, opacity: 1 }}
                      transition={{ 
                        duration: 0.4, 
                        ease: [0.25, 0.1, 0.25, 1],
                      }}
                      style={{ transformOrigin: "left center" }}
                    />
                  </Link>
                </motion.div>
              ))}
            </nav>

            <div className="hidden md:flex items-center space-x-3">
              <div className="flex items-center bg-white/40 border border-white/50 rounded-full overflow-hidden shadow-sm">
                <button
                  type="button"
                  onClick={() => switchLocale("en")}
                  className={`px-3 py-1.5 text-xs font-semibold transition-colors ${
                    locale === "en"
                      ? "bg-stone-900 text-stone-50"
                      : "text-stone-700 hover:bg-white/60"
                  }`}
                  aria-label="Switch language to English"
                >
                  EN
                </button>
                <button
                  type="button"
                  onClick={() => switchLocale("de")}
                  className={`px-3 py-1.5 text-xs font-semibold transition-colors ${
                    locale === "de"
                      ? "bg-stone-900 text-stone-50"
                      : "text-stone-700 hover:bg-white/60"
                  }`}
                  aria-label="Sprache auf Deutsch umstellen"
                >
                  DE
                </button>
              </div>
              {socialLinks.map((social) => (
                <motion.a
                  key={social.label}
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  whileHover={{ scale: 1.1, rotate: 5 }}
                  whileTap={{ scale: 0.95 }}
                  className="p-2 rounded-full bg-white/40 hover:bg-white/80 border border-white/50 text-stone-600 hover:text-stone-900 transition-all shadow-sm liquid-hover"
                >
                  <social.icon size={18} />
                </motion.a>
              ))}
            </div>

            <motion.button
              whileTap={{ scale: 0.95 }}
              onClick={() => setIsOpen(!isOpen)}
              className="md:hidden p-2 rounded-full bg-white/40 hover:bg-white/60 text-stone-800 transition-colors liquid-hover"
              aria-label={isOpen ? "Close menu" : "Open menu"}
            >
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </motion.button>
          </motion.div>
        </div>

        <AnimatePresence>
          {isOpen && (
            <>
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.2 }}
                className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm z-40 md:hidden pointer-events-auto"
                onClick={() => setIsOpen(false)}
              />
              <motion.div
                initial={{ opacity: 0, scale: 0.95, y: -20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95, y: -20 }}
                transition={{ duration: 0.3, type: "spring" }}
                className="absolute top-24 left-4 right-4 bg-cream/95 backdrop-blur-xl border border-stone-200 shadow-xl rounded-3xl z-50 p-6 pointer-events-auto"
              >
                <div className="space-y-2">
                  {navItems.map((item, index) => (
                    <motion.div
                      key={item.name}
                      initial={{ x: -20, opacity: 0 }}
                      animate={{ x: 0, opacity: 1 }}
                      exit={{ x: -20, opacity: 0 }}
                      transition={{ delay: index * 0.05 }}
                    >
                      <Link
                        href={item.href}
                        onClick={(e) => {
                          setIsOpen(false);
                          if (item.href.startsWith("#")) {
                            e.preventDefault();
                            setTimeout(() => {
                              const element = document.querySelector(item.href);
                              if (element) {
                                element.scrollIntoView({
                                  behavior: "smooth",
                                  block: "start",
                                });
                              }
                            }, 100);
                          }
                        }}
                        className="block text-stone-600 hover:text-stone-900 hover:bg-white/50 transition-all font-medium py-3 px-4 rounded-xl"
                      >
                        {item.name}
                      </Link>
                    </motion.div>
                  ))}

                  <div className="pt-6 mt-4 border-t border-stone-200">
                    <div className="flex justify-center space-x-4">
                      {socialLinks.map((social, index) => (
                        <motion.a
                          key={social.label}
                          href={social.href}
                          target="_blank"
                          rel="noopener noreferrer"
                          initial={{ scale: 0, opacity: 0 }}
                          animate={{ scale: 1, opacity: 1 }}
                          transition={{
                            delay: (navItems.length + index) * 0.05,
                          }}
                          whileHover={{ scale: 1.1 }}
                          className="p-3 rounded-full bg-white/60 text-stone-600 shadow-sm"
                          aria-label={social.label}
                        >
                          <social.icon size={20} />
                        </motion.a>
                      ))}
                    </div>
                  </div>
                </div>
              </motion.div>
            </>
          )}
        </AnimatePresence>
      </motion.header>
    </>
  );
};

export default Header;