"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronDownIcon, CloseIcon, MenuIcon, SettingsIcon } from "@/components/ui/Icons";
import { cn } from "@/lib/cn";
import { ROUTES } from "@/lib/routes";

const NAV_LINKS = [
  { label: "LIVE", href: ROUTES.newsroom },
  { label: "NEWSFEED", href: ROUTES.newsfeed },
  { label: "PARTNERSHIP DIRECTORY", href: ROUTES.partnershipDirectory },
  { label: "FAQS", href: ROUTES.faq },
] as const;

const REGIONS = [
  "FRANCE",
  "AFRICA",
  "MIDDLE EAST",
  "AMERICAS",
  "EUROPE",
  "ASIA-PACIFIC",
] as const;

export function NewsroomHeader() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const pathname = usePathname();

  // Close mobile drawer on Escape key
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") setMobileMenuOpen(false);
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  // Close mobile menu upon navigation
  useEffect(() => {
    setMobileMenuOpen(false);
  }, [pathname]);

  return (
    <header className="w-full bg-white">
      {/* Top Bar: Logo + Primary Links (Left) and EN / Settings (Right) */}
      <div className="mx-auto w-full max-w-[1440px] px-5 sm:px-8 md:px-[60px]">
        <div className="flex h-[72px] sm:h-[80px] w-full items-center justify-between">
          {/* Left section: Blue Box Logo + Nav Links */}
          <div className="flex items-center gap-6 sm:gap-8 lg:gap-11">
            {/* Sterling Protection Logo */}
            <Link
              href={ROUTES.home}
              className="flex shrink-0 items-center transition-opacity hover:opacity-90 active:scale-[0.98]"
              title="Sterling Protection"
              aria-label="Sterling Protection - Return to Homepage"
            >
              <Image
                src="/images/newsroom/newsroom-logo.jpg"
                alt="Sterling Protection"
                width={58}
                height={58}
                priority
                className="h-[52px] w-[52px] sm:h-[58px] sm:w-[58px] rounded-[3px] object-cover shadow-sm"
              />
            </Link>

            {/* Desktop Navigation Links */}
            <nav
              aria-label="Newsroom Header Navigation"
              className="hidden min-[920px]:flex items-center gap-6 lg:gap-8 xl:gap-9"
            >
              {NAV_LINKS.map((link) => {
                const isActive =
                  link.label === "LIVE"
                    ? pathname.startsWith("/newsroom")
                    : link.label === "NEWSFEED"
                    ? pathname.startsWith("/newsfeed")
                    : pathname === link.href;

                return (
                  <Link
                    key={link.label}
                    href={link.href}
                    className={cn(
                      "text-[12px] sm:text-[13px] font-medium tracking-[0.5px] uppercase transition-colors duration-200",
                      isActive
                        ? "text-[#1d4f91] font-semibold"
                        : "text-[#555e6d] hover:text-[#111827]",
                    )}
                  >
                    {link.label}
                  </Link>
                );
              })}
            </nav>
          </div>

          {/* Right section: Language & Settings Controls (Desktop) */}
          <div className="hidden min-[920px]:flex items-center gap-6 sm:gap-8">
            {/* Language Selector Dropdown */}
            <button
              type="button"
              className="group flex items-center gap-1.5 text-[12px] sm:text-[13px] font-medium tracking-wider text-[#555e6d] hover:text-[#111827] uppercase transition-colors"
              aria-label="Language selection: English (EN)"
            >
              <span>EN</span>
              <ChevronDownIcon className="size-3 text-[#64748b] transition-transform duration-200 group-hover:translate-y-0.5" />
            </button>

            {/* Settings Trigger */}
            <button
              type="button"
              className="group flex items-center gap-1.5 text-[12px] sm:text-[13px] font-medium tracking-wider text-[#555e6d] hover:text-[#111827] uppercase transition-colors"
              aria-label="Open settings"
            >
              <SettingsIcon className="size-4 text-[#64748b] transition-transform duration-300 group-hover:rotate-45" />
              <span>SETTINGS</span>
              <ChevronDownIcon className="size-3 text-[#64748b] transition-transform duration-200 group-hover:translate-y-0.5" />
            </button>
          </div>

          {/* Mobile Hamburger Toggle (< 920px) */}
          <div className="flex items-center min-[920px]:hidden">
            <button
              type="button"
              onClick={() => setMobileMenuOpen(true)}
              className="flex size-10 items-center justify-center rounded-md text-[#161825] transition-colors hover:bg-slate-100 active:scale-95"
              aria-label="Open menu"
              aria-expanded={mobileMenuOpen}
            >
              <MenuIcon className="size-6 text-[#161825]" />
            </button>
          </div>
        </div>
      </div>

      {/* Horizontal Divider Line */}
      <div className="w-full border-b border-[#e5e7eb]" />

      {/* Region Sub-Nav Row */}
      <div className="mx-auto w-full max-w-[1280px] px-[60px] max-[769px]:px-5">
        <div
          className="flex w-full items-center gap-7 sm:gap-9 py-3 sm:py-3.5 whitespace-nowrap overflow-x-auto scroll-smooth [&::-webkit-scrollbar]:hidden"
          style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
        >
          {REGIONS.map((region) => (
            <div
              key={region}
              className="flex shrink-0 items-center gap-2 text-[12px] sm:text-[13px] font-semibold tracking-wider text-[#222938] uppercase cursor-default select-none"
            >
              <span
                className="inline-block size-[7px] sm:size-2 shrink-0 bg-[#0284c7]"
                aria-hidden="true"
              />
              <span>{region}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="w-full border-b border-[#e5e7eb]" />
      {/* Mobile Shutter Drawer */}
      {mobileMenuOpen && (
        <>
          {/* Backdrop overlay */}
          <div
            className="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-[2px] transition-opacity"
            onClick={() => setMobileMenuOpen(false)}
            aria-hidden="true"
          />

          {/* Drawer content */}
          <div
            className="fixed top-0 inset-x-0 z-[9999] flex flex-col bg-white shadow-2xl border-b border-[#e5e7eb] rounded-b-2xl transition-all"
            role="dialog"
            aria-modal="true"
            aria-label="Mobile Navigation"
          >
            <div className="flex items-center justify-between px-5 py-4 border-b border-[#e5e7eb]">
              <Link
                href={ROUTES.home}
                onClick={() => setMobileMenuOpen(false)}
                className="flex shrink-0 items-center"
                title="Sterling Protection"
              >
                <Image
                  src="/images/newsroom/newsroom-logo.jpg"
                  alt="Sterling Protection"
                  width={46}
                  height={46}
                  className="h-[46px] w-[46px] rounded-[3px] object-cover shadow-sm"
                />
              </Link>
              <button
                type="button"
                onClick={() => setMobileMenuOpen(false)}
                className="flex size-10 items-center justify-center rounded-md text-slate-500 hover:bg-slate-100"
                aria-label="Close menu"
              >
                <CloseIcon className="size-6 text-slate-700" />
              </button>
            </div>

            <nav className="flex flex-col px-6 py-6 gap-4">
              {NAV_LINKS.map((link) => (
                <Link
                  key={link.label}
                  href={link.href}
                  onClick={() => setMobileMenuOpen(false)}
                  className="text-base font-semibold tracking-wider text-[#222938] hover:text-[#1d4f91] uppercase transition-colors"
                >
                  {link.label}
                </Link>
              ))}

              <div className="pt-4 mt-2 border-t border-[#e5e7eb] flex items-center justify-between">
                <div className="flex items-center gap-2 text-sm font-semibold tracking-wider text-[#555e6d] uppercase">
                  <span>Language:</span>
                  <span className="text-[#1d4f91]">EN</span>
                </div>
                <div className="flex items-center gap-2 text-sm font-semibold tracking-wider text-[#555e6d] uppercase">
                  <SettingsIcon className="size-4 text-[#64748b]" />
                  <span>SETTINGS</span>
                </div>
              </div>
            </nav>
          </div>
        </>
      )}
    </header>
  );
}