"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { Menu, X, ArrowUpRight } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { useLanguage } from "@/components/language-provider";
import { LanguageSwitcher } from "@/components/language-switcher";
import { LogoCrossfade } from "@/components/logo";

export function Navbar() {
  const pathname = usePathname();
  const { t } = useLanguage();
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  const navLinks = [
    { href: "/", label: t.nav.home },
    { href: "/about", label: t.nav.about },
    { href: "/services", label: t.nav.services },
    { href: "/contact", label: t.nav.contact },
  ];

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    setOpen(false);
  }, [pathname]);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <header
      className={cn(
        "fixed inset-x-0 top-0 z-50 transition-all duration-300",
        scrolled
          ? "bg-white/90 backdrop-blur-xl border-b border-steel-100 shadow-[0_1px_0_0_rgba(15,26,42,0.04)]"
          : "bg-white/0 border-b border-transparent"
      )}
    >
      <div className="container-wide flex h-20 items-center justify-between gap-6">
        <Link
          href="/"
          aria-label="Steel-Tech home"
          className="group flex items-center focus-ring rounded-md"
        >
          <LogoCrossfade
            isLight={!scrolled}
            className="h-9 w-auto sm:h-10"
          />
        </Link>

        <nav className="hidden lg:flex items-center gap-1">
          {navLinks.map((link) => {
            const active =
              link.href === "/"
                ? pathname === "/"
                : pathname?.startsWith(link.href);
            return (
              <Link
                key={link.href}
                href={link.href}
                className={cn(
                  "relative px-4 py-2 text-sm font-medium transition-colors focus-ring rounded-md",
                  scrolled
                    ? active
                      ? "text-steel-900"
                      : "text-steel-600 hover:text-steel-900"
                    : active
                      ? "text-white"
                      : "text-white/75 hover:text-white"
                )}
              >
                {link.label}
                {active && (
                  <motion.span
                    layoutId="nav-indicator"
                    className={cn(
                      "absolute inset-x-4 -bottom-0.5 h-px",
                      scrolled ? "bg-steel-900" : "bg-white"
                    )}
                    transition={{ type: "spring", stiffness: 380, damping: 30 }}
                  />
                )}
              </Link>
            );
          })}
        </nav>

        <div className="hidden lg:flex items-center gap-3">
          <LanguageSwitcher variant={scrolled ? "light" : "dark"} />
          <Link href="/contact">
            <Button
              size="sm"
              variant="primary"
              className={cn(
                !scrolled && "bg-white text-steel-900 hover:bg-white/95"
              )}
            >
              {t.nav.cta}
              <ArrowUpRight />
            </Button>
          </Link>
        </div>

        <div className="flex items-center gap-2 lg:hidden">
          <LanguageSwitcher variant={scrolled ? "light" : "dark"} />
          <button
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen((s) => !s)}
            className={cn(
              "inline-flex h-11 w-11 items-center justify-center rounded-full border focus-ring transition-colors",
              scrolled
                ? "border-steel-200 text-steel-900"
                : "border-white/30 text-white"
            )}
          >
            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </div>
      </div>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="lg:hidden absolute inset-x-0 top-20 border-t border-steel-100 bg-white/95 backdrop-blur-xl"
          >
            <nav className="container-wide flex flex-col py-6">
              {navLinks.map((link, i) => {
                const active =
                  link.href === "/"
                    ? pathname === "/"
                    : pathname?.startsWith(link.href);
                return (
                  <motion.div
                    key={link.href}
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: i * 0.05 }}
                  >
                    <Link
                      href={link.href}
                      className={cn(
                        "flex items-center justify-between border-b border-steel-100 py-4 text-lg font-medium",
                        active ? "text-steel-900" : "text-steel-600"
                      )}
                    >
                      {link.label}
                      <ArrowUpRight className="h-5 w-5 opacity-40" />
                    </Link>
                  </motion.div>
                );
              })}
              <Link href="/contact" className="mt-6">
                <Button size="lg" variant="primary" className="w-full">
                  {t.nav.cta}
                  <ArrowUpRight />
                </Button>
              </Link>
            </nav>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  );
}