import { useEffect, useState } from 'react';
import appIcon from '../../../assets/appicon.png';

type ActiveTab = 'pricing' | 'how' | 'tips' | null;
type ActiveHowItem = 'companies' | 'jobseekers' | null;
type ActiveTipsItem = 'stories' | 'jobordbogen' | null;

interface SiteNavbarProps {
  activeTab?: ActiveTab;
  activeHowItem?: ActiveHowItem;
  activeTipsItem?: ActiveTipsItem;
}

export function SiteNavbar({
  activeTab = null,
  activeHowItem = null,
  activeTipsItem = null,
}: SiteNavbarProps) {
  const [isNavOpen, setIsNavOpen] = useState(false);

  useEffect(() => {
    if (!isNavOpen) return undefined;
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    function handleEscape(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        setIsNavOpen(false);
      }
    }

    window.addEventListener('keydown', handleEscape);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener('keydown', handleEscape);
    };
  }, [isNavOpen]);

  useEffect(() => {
    function handleResize() {
      if (window.innerWidth > 990) {
        setIsNavOpen(false);
      }
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const topLinkBase = 'text-base font-normal transition-colors outline-none drop-shadow-sm';
  const activeTop = `${topLinkBase} text-gray-900`;
  const inactiveTop = `${topLinkBase} text-gray-600 hover:text-gray-900`;

  return (
    <nav className="fixed top-0 inset-x-0 z-50 h-16 bg-white/20 backdrop-blur-2xl border-b border-white/50 shadow-[0_4px_30px_rgba(0,0,0,0.03)] flex items-center justify-between px-6 lg:px-12 transition-all">
      <a href="/home" className="flex items-center gap-2 group outline-none">
        <img
          src={appIcon}
          alt="Arbejd logo"
          className="w-8 h-8 rounded-lg shadow-[0_4px_15px_rgba(49,103,201,0.2)] group-hover:shadow-[0_6px_20px_rgba(49,103,201,0.3)] transition-all group-hover:scale-105 object-cover"
        />
        <span className="text-xl font-normal tracking-tight text-gray-900">Arbejd.com</span>
      </a>

      <div className="hidden md:flex items-center gap-8">
        <a
          href="/for-jobsogere"
          className={(activeTab === 'how' || activeHowItem === 'jobseekers') ? activeTop : inactiveTop}
        >
          For jobsøgere
        </a>
        <a href="/pricing" className={activeTab === 'pricing' ? activeTop : inactiveTop}>Priser</a>
        <a href="/kontakt" className={inactiveTop}>Kontakt</a>
      </div>

      <div className="hidden md:flex items-center gap-4">
        <a href="https://app.arbejd.com/" className="text-base font-normal text-gray-700 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Log ind</a>
        <a href="https://app.arbejd.com/welcome" className="text-base font-normal text-white bg-gradient-to-r from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700 px-5 py-2.5 rounded-full transition-all shadow-[0_4px_15px_rgba(0,0,0,0.1)] outline-none border border-gray-700">Opret dig</a>
      </div>

      <button
        type="button"
        className="md:hidden w-10 h-10 rounded-full bg-white/60 border border-white/80 flex items-center justify-center"
        aria-expanded={isNavOpen}
        aria-label={isNavOpen ? 'Luk menu' : 'Åbn menu'}
        onClick={() => setIsNavOpen((current) => !current)}
      >
        <iconify-icon icon={isNavOpen ? 'solar:close-circle-linear' : 'solar:hamburger-menu-linear'} className="text-xl text-gray-800" style={{ strokeWidth: 1.8 }} />
      </button>

      {isNavOpen ? (
        <div className="md:hidden absolute top-full right-4 mt-2 w-[min(320px,calc(100vw-2rem))] rounded-2xl border border-white/80 bg-gradient-to-br from-white/92 to-white/70 backdrop-blur-2xl shadow-[0_20px_45px_rgba(0,0,0,0.1)] p-2 flex flex-col gap-1">
          <a href="/for-jobsogere" className="px-3 py-2.5 rounded-xl hover:bg-white text-gray-700">For jobsøgere</a>
          <a href="/pricing" className="px-3 py-2.5 rounded-xl hover:bg-white text-gray-700">Priser</a>
          <a href="/kontakt" className="px-3 py-2.5 rounded-xl hover:bg-white text-gray-700">Kontakt</a>
          <a href="https://app.arbejd.com/" className="px-3 py-2.5 rounded-xl hover:bg-white text-gray-700">Log ind</a>
          <a href="https://app.arbejd.com/welcome" className="px-3 py-2.5 rounded-xl bg-gray-900 text-white">Opret dig</a>
        </div>
      ) : null}
    </nav>
  );
}
