"use client";

import { useState } from "react";
import Link from "next/link";
import { LanguageSwitcher } from "@/components/sections/lang/language-switcher";
import { ThemeToggle } from "@/components/sections/theme/theme-toggle";
import { Dictionary } from "@/lib/IDict";
import { CyberButton } from "../ui/cyber-button";
import { socialLinks, FlickeringSocialIcon } from "../ui/social-links";
import {
  X,
  Terminal,
  ArrowRight,
  Shield,
  Cpu,
  CreditCard,
  HelpCircle,
  Activity,
  Gauge,
  Gamepad2,
} from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

/**
 * Общий хедер сайта (фиксированная плавающая панель) + полноэкранное меню-оверлей,
 * стилизованное под ретро Windows-окно (заголовок в духе "C:\NETRUNNER\SYSTEM.DIR").
 * Ссылки меню собираются из словаря `dict.nav`, поэтому здесь нет хардкода текста —
 * только структура (иконка + href) для каждого пункта.
 */
export function Header({
  dict,
  lang,
}: {
  dict: Dictionary["nav"];
  lang: string;
}) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const menuLinks = [
    { name: dict.features, href: `/${lang}#features`, icon: Cpu },
    { name: dict.pricing, href: `/${lang}#pricing`, icon: CreditCard },
    { name: dict.faq, href: `/${lang}#faq`, icon: HelpCircle },
    { name: dict.speedtest, href: `/${lang}/speedtest`, icon: Gauge },
    { name: dict.blog, href: `/${lang}/blog`, icon: Activity },
    { name: dict.terminal, href: `/${lang}/terminal`, icon: Terminal },
    { name: dict.profile, href: `/${lang}/auth`, icon: Shield },
    { name: dict.doom, href: `/doom`, icon: Gamepad2 },
  ];

  return (
    <>
      <header className="fixed top-4 md:top-6 left-1/2 -translate-x-1/2 w-[95%] max-w-5xl z-40 bg-card/30 dark:bg-card/20 backdrop-blur-xl border border-border/50 rounded-full shadow-lg transition-all duration-500 hover:bg-card/50 dark:hover:bg-card/40">
        <div className="px-4 md:px-8 h-14 md:h-16 flex items-center justify-between">
          <Link
            href={`/${lang}`}
            className="flex items-center gap-2 md:gap-3 group hover:scale-105 transition-transform duration-300 w-fit relative z-50"
            onClick={() => setIsMenuOpen(false)}
          >
            <div className="text-xl sm:text-2xl md:text-3xl tracking-wide md:tracking-widest flex items-center select-none font-bold uppercase">
              <span
                className="text-transparent animate-neon-flicker transition-all duration-300"
                style={{
                  WebkitTextStroke: "1px #00E5F2",
                  filter: "drop-shadow(0 0 5px rgba(0,229,242,0.6))",
                }}
              >
                Net
              </span>
              <span
                className="text-transparent transition-all duration-300"
                style={{
                  WebkitTextStroke: "1px #00E5F2",
                  filter: "drop-shadow(0 0 5px rgba(0,229,242,0.6))",
                }}
              >
                runner
              </span>
              <span
                className="ml-1.5 md:ml-2 text-transparent opacity-90 group-hover:opacity-100 transition-all duration-300"
                style={{
                  WebkitTextStroke: "1px #8B3DFF",
                  filter: "drop-shadow(0 0 5px rgba(139,61,255,0.6))",
                }}
              >
                VPN
              </span>
            </div>
          </Link>

          <div className="flex items-center gap-2 md:gap-4 relative z-50">
            <div className="flex items-center gap-1 md:gap-2">
              <LanguageSwitcher />
              {/* Применяем кастомный курсор горизонтального ресайза к разделителю */}
              <div className="w-px h-6 bg-border mx-1 cursor-net-resize-h hover:bg-primary transition-colors" />
              <ThemeToggle />
            </div>
            <CyberButton
              href={`/${lang}/download`}
              variant="primary"
              className="hidden sm:block scale-75 md:scale-90 origin-right"
              onClick={() => setIsMenuOpen(false)}
            >
              {dict.cta}
            </CyberButton>
            <button
              onClick={() => setIsMenuOpen(true)}
              className="px-3 py-1.5 md:px-4 md:py-2 rounded-xl bg-background/50 border border-border text-foreground hover:bg-primary/20 hover:text-primary hover:border-primary/50 transition-all duration-300 flex items-center gap-2 font-mono text-sm uppercase tracking-wider shadow-sm"
            >
              <Terminal className="size-4" />
              <span className="hidden md:inline">{dict.menu}</span>
            </button>
          </div>
        </div>
      </header>

      <AnimatePresence>
        {isMenuOpen && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="absolute inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-md"
              onClick={() => setIsMenuOpen(false)}
            />
            <motion.div
              initial={{ opacity: 0, y: -40, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 20, scale: 0.95 }}
              transition={{ type: "spring", stiffness: 400, damping: 30 }}
              className="relative w-full max-w-lg bg-[#E5E5E5] dark:bg-[#1E1E1E] border-2 border-t-white border-l-white border-b-gray-500 border-r-gray-500 dark:border-t-gray-600 dark:border-l-gray-600 dark:border-b-black dark:border-r-black p-1 shadow-[8px_8px_0_0_rgba(0,0,0,0.6)]"
            >
              <div className="bg-blue-800 dark:bg-blue-900 text-white px-2 py-1.5 flex items-center justify-between mb-2 font-mono text-sm font-bold tracking-wider select-none">
                <span className="flex items-center gap-2">
                  <Terminal className="size-4" /> C:\NETRUNNER\SYSTEM.DIR
                </span>
                <button
                  onClick={() => setIsMenuOpen(false)}
                  className="bg-[#c0c0c0] text-black border-2 border-t-white border-l-white border-b-gray-600 border-r-gray-600 w-6 h-6 flex items-center justify-center active:border-t-gray-600 active:border-l-gray-600 active:border-b-white active:border-r-white"
                >
                  <X className="size-4" strokeWidth={3} />
                </button>
              </div>
              <div className="bg-white dark:bg-black border-2 border-inset border-t-gray-500 border-l-gray-500 border-b-white border-r-white dark:border-t-black dark:border-l-black dark:border-b-gray-700 dark:border-r-gray-700 p-2 font-mono flex flex-col gap-1 max-h-[70vh] overflow-y-auto custom-scrollbar-retro">
                {menuLinks.map((link) => (
                  <Link
                    key={link.name}
                    href={link.href}
                    onClick={() => setIsMenuOpen(false)}
                    className="flex items-center gap-3 p-3 hover:bg-blue-800 hover:text-white dark:hover:bg-primary/20 dark:hover:text-primary transition-colors group cursor-pointer text-base text-black dark:text-white shrink-0"
                  >
                    <link.icon className="size-5 text-gray-500 dark:text-gray-400 group-hover:text-white dark:group-hover:text-primary transition-colors" />
                    <span className="flex-1 uppercase font-bold">
                      {link.name}
                    </span>
                    <span className="opacity-0 group-hover:opacity-100">_</span>
                  </Link>
                ))}
                <div className="my-2 border-t border-dashed border-gray-400 dark:border-gray-700 shrink-0" />
                <Link
                  href={`/${lang}/docs`}
                  onClick={() => setIsMenuOpen(false)}
                  className="flex items-center gap-3 p-3 hover:bg-blue-800 hover:text-white dark:hover:bg-primary/20 dark:hover:text-primary transition-colors group cursor-pointer text-sm text-gray-600 dark:text-gray-400 shrink-0"
                >
                  <Shield className="size-4" />
                  <span className="flex-1 uppercase tracking-widest font-bold">
                    {dict.docs}
                  </span>
                </Link>
                <div className="pt-4 pb-2 px-2 shrink-0">
                  <CyberButton
                    href={`/${lang}/download`}
                    variant="primary"
                    className="w-full text-sm py-3"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    <span className="flex items-center justify-center gap-2">
                      {dict.cta} <ArrowRight className="size-4" />
                    </span>
                  </CyberButton>
                </div>
                <div className="flex flex-wrap gap-5 pb-2 px-2 shrink-0">
                  {socialLinks.map((social) => (
                    <FlickeringSocialIcon key={social.name} social={social} />
                  ))}
                </div>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  );
}