'use client';

import { Link } from '@/i18n/navigation';
import { useRouter } from 'next/navigation';
import { useState, useRef, useEffect } from 'react';
import { useAuthStore } from '@/store/authStore';
import { useTranslations } from 'next-intl';

export default function Navbar() {
  const router = useRouter();
  const { isAuthenticated, user, logout } = useAuthStore();
  const [showProfileMenu, setShowProfileMenu] = useState(false);
  const [showMobileMenu, setShowMobileMenu] = useState(false);
  const profileRef = useRef<HTMLDivElement>(null);
  const mobileMenuRef = useRef<HTMLDivElement>(null);
  const t = useTranslations('nav');

  function handleLogout() {
    logout();
    setShowProfileMenu(false);
    setShowMobileMenu(false);
    router.push('/');
  }

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (profileRef.current && !profileRef.current.contains(e.target as Node)) {
        setShowProfileMenu(false);
      }
      if (mobileMenuRef.current && !mobileMenuRef.current.contains(e.target as Node)) {
        setShowMobileMenu(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <nav className="fixed top-0 inset-x-0 z-50 flex items-center justify-between px-4 py-3 bg-white bg-[#4C1D95] border-b border-gray-220 sm:px-6">
      <div className='max-w-6xl mx-auto flex items-center justify-between w-full'>

        {/* Logo */}
        <Link href="/">
          <div className='flex flex-row gap-[6px] items-center'>
            <img src="/cahootravel-logo.svg" alt="CahooTravel" className="h-8 w-auto sm:h-10" />
          </div>
        </Link>

        {/* Desktop nav */}
        <div className="hidden md:flex items-center gap-3">
          <Link
            href="/how-it-works"
            className="text-sm text-gray-700 hover:text-gray-900 transition-colors px-3 py-1.5"
          >
            {t('howItWorks')}
          </Link>

          {!isAuthenticated && (
            <Link
              href="/pricing"
              className="text-sm text-gray-700 hover:text-gray-900 transition-colors px-3 py-1.5"
            >
              {t('pricing')}
            </Link>
          )}

          {isAuthenticated && (
            <Link
              href="/support"
              className="text-sm text-gray-700 hover:text-gray-900 transition-colors px-3 py-1.5"
            >
              {t('support')}
            </Link>
          )}

          {isAuthenticated ? (
            <div className="relative" ref={profileRef}>
              <button
                onClick={() => setShowProfileMenu(!showProfileMenu)}
                className="flex items-center justify-center w-9 h-9 rounded-full border border-gray-300 hover:border-gray-400 bg-white transition-colors"
                aria-label={t('profileMenuAriaLabel')}
              >
                <svg className="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
              </button>

              {showProfileMenu && (
                <div className="absolute right-0 mt-2 w-52 bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden">
                  <div className="px-4 py-3 border-b border-gray-100">
                    <p className="text-xs text-gray-400">{t('signedInAs')}</p>
                    <p className="text-sm font-medium text-gray-800 truncate">{user?.email}</p>
                  </div>
                  <Link
                    href="/profile"
                    onClick={() => setShowProfileMenu(false)}
                    className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                  >
                    {t('profile')}
                  </Link>
                  <Link
                    href="/billing"
                    onClick={() => setShowProfileMenu(false)}
                    className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                  >
                    {t('billing')}
                  </Link>
                  <Link
                    href="/searches"
                    onClick={() => setShowProfileMenu(false)}
                    className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                  >
                    {t('mySearches')}
                  </Link>
                  <button
                    onClick={handleLogout}
                    className="w-full text-left px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors border-t border-gray-100"
                  >
                    {t('signOut')}
                  </button>
                </div>
              )}
            </div>
          ) : (
            <Link
              href="/signin"
              className="text-sm text-gray-700 hover:text-gray-900 transition-colors border border-gray-300 rounded-md px-3 py-1.5"
            >
              {t('signIn')}
            </Link>
          )}

          {!isAuthenticated && (
            <Link
              href="/contact"
              className="text-sm text-white bg-brand-purple hover:bg-purple-700 transition-colors rounded-md px-3 py-1.5"
            >
              {t('contactUs')}
            </Link>
          )}
        </div>

        {/* Mobile hamburger */}
        <div className="md:hidden relative" ref={mobileMenuRef}>
          <button
            onClick={() => setShowMobileMenu(!showMobileMenu)}
            className="flex items-center justify-center w-9 h-9 rounded-md border border-gray-200 hover:border-gray-400 bg-white transition-colors"
            aria-label={t('toggleMenuAriaLabel')}
          >
            {showMobileMenu ? (
              <svg className="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            ) : (
              <svg className="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            )}
          </button>

          {showMobileMenu && (
            <div className="absolute right-0 mt-2 w-56 bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden">
              {isAuthenticated && (
                <div className="px-4 py-3 border-b border-gray-100">
                  <p className="text-xs text-gray-400">{t('signedInAs')}</p>
                  <p className="text-sm font-medium text-gray-800 truncate">{user?.email}</p>
                </div>
              )}

              <Link
                href="/how-it-works"
                onClick={() => setShowMobileMenu(false)}
                className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
              >
                {t('howItWorks')}
              </Link>

              {!isAuthenticated && (
                <Link
                  href="/pricing"
                  onClick={() => setShowMobileMenu(false)}
                  className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                >
                  {t('pricing')}
                </Link>
              )}

              {isAuthenticated && (
                <>
                  <Link
                    href="/profile"
                    onClick={() => setShowMobileMenu(false)}
                    className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                  >
                    {t('profile')}
                  </Link>
                  <Link
                    href="/billing"
                    onClick={() => setShowMobileMenu(false)}
                    className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                  >
                    {t('billing')}
                  </Link>
                  <Link
                    href="/searches"
                    onClick={() => setShowMobileMenu(false)}
                    className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                  >
                    {t('mySearches')}
                  </Link>
                  <Link
                    href="/support"
                    onClick={() => setShowMobileMenu(false)}
                    className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                  >
                    {t('support')}
                  </Link>
                </>
              )}

              <div className="border-t border-gray-100">
                {isAuthenticated ? (
                  <button
                    onClick={handleLogout}
                    className="w-full text-left px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                  >
                    {t('signOut')}
                  </button>
                ) : (
                  <>
                    <Link
                      href="/signin"
                      onClick={() => setShowMobileMenu(false)}
                      className="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                    >
                      {t('signIn')}
                    </Link>
                    <Link
                      href="/contact"
                      onClick={() => setShowMobileMenu(false)}
                      className="block px-4 py-2.5 text-sm font-medium text-brand-purple hover:bg-purple-50 transition-colors"
                    >
                      {t('contactUs')}
                    </Link>
                  </>
                )}
              </div>
            </div>
          )}
        </div>

      </div>
    </nav>
  );
}