'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useLanguage } from '@/lib/language-context';
import { languages, Language, getTranslation } from '@/lib/translations';
import { useCustomerAuth } from '@/presentation/providers/customer-auth-provider';
import { Globe, LogIn, LogOut, Sparkles, UtensilsCrossed } from 'lucide-react';

export const LANGUAGE_BANNER_HEIGHT = 48;
export const LANGUAGE_BANNER_HEIGHT_LOGGED_IN_DESKTOP = 56;
export const LANGUAGE_BANNER_HEIGHT_LOGGED_IN_MOBILE = 160;
export const LANGUAGE_BANNER_HEIGHT_MENU_MANAGER_MOBILE = 160;
export const NAVBAR_HEIGHT = 68;

export function getLanguageBannerHeight(
  isAuthenticated: boolean,
  isMobile = false,
  isMenuManager = false,
): number {
  if (!isAuthenticated) return LANGUAGE_BANNER_HEIGHT;
  if (isMobile) {
    return isMenuManager
      ? LANGUAGE_BANNER_HEIGHT_MENU_MANAGER_MOBILE
      : LANGUAGE_BANNER_HEIGHT_LOGGED_IN_MOBILE;
  }
  return LANGUAGE_BANNER_HEIGHT_LOGGED_IN_DESKTOP;
}

export function getHeaderTotalHeight(
  isAuthenticated: boolean,
  isMobile = false,
  isMenuManager = false,
): number {
  return getLanguageBannerHeight(isAuthenticated, isMobile, isMenuManager) + NAVBAR_HEIGHT;
}

/** @deprecated Use getHeaderTotalHeight() for dynamic height. */
export const HEADER_TOTAL_HEIGHT = LANGUAGE_BANNER_HEIGHT + NAVBAR_HEIGHT;

export default function LanguageSwitcher() {
  const { language, setLanguage } = useLanguage();
  const t = getTranslation(language);
  const pathname = usePathname();
  const { email, isAuthenticated, isMenuManager, logout } = useCustomerAuth();
  const isLoginActive = !isAuthenticated && pathname === '/login';
  const isAdminActive = pathname === '/admin';

  const emailInitial = email?.charAt(0).toUpperCase() ?? '?';

  const handleSelect = (lang: Language) => {
    setLanguage(lang);
  };

  const handleLogout = async () => {
    await logout();
  };

  const loginButton = (
    <Link
      href="/login"
      aria-current={isLoginActive ? 'page' : undefined}
      className={`group relative inline-flex shrink-0 items-center gap-1.5 overflow-hidden rounded-full px-3.5 py-2 text-[11px] font-bold uppercase tracking-[0.1em] transition-all duration-300 active:scale-[0.96] touch-manipulation min-h-[36px] sm:min-h-[38px] sm:px-4 ${
        isLoginActive
          ? 'bg-white text-[#0f5a4a] shadow-lg shadow-black/25 ring-2 ring-[#f4d47f]/60'
          : 'border border-[#f4d47f]/45 bg-gradient-to-br from-[#c99a2e] via-[#e8c56a] to-[#b8892f] text-[#1a1206] shadow-md shadow-black/30 hover:scale-[1.03] hover:shadow-lg hover:shadow-[#c99a2e]/40'
      }`}
    >
      <span className="relative flex h-5 w-5 items-center justify-center rounded-full bg-[#1a1206]/10">
        <LogIn className="h-3.5 w-3.5" />
        <Sparkles className="absolute -right-0.5 -top-0.5 h-2 w-2 text-[#fff8e7] opacity-80" />
      </span>
      <span className="whitespace-nowrap max-sm:hidden">{t.nav.login}</span>
      <span className="whitespace-nowrap sm:hidden">Login</span>
    </Link>
  );

  const menuManagementLink = (variant: 'desktop' | 'mobile' | 'mobile-full' = 'desktop') => (
    <Link
      href="/admin"
      aria-current={isAdminActive ? 'page' : undefined}
      className={`group relative inline-flex shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-full font-bold transition-all duration-300 active:scale-[0.96] touch-manipulation ${
        variant === 'mobile-full'
          ? 'flex-1 min-h-[44px] border border-[#f4d47f]/60 bg-gradient-to-br from-[#c99a2e] via-[#e8c56a] to-[#b8892f] px-3 py-2.5 text-[11px] text-[#1a1206] shadow-md'
          : variant === 'mobile'
          ? 'min-h-[40px] border border-[#f4d47f]/60 bg-gradient-to-br from-[#c99a2e] to-[#d4a73d] px-3 py-2 text-[10px] text-[#1a1206]'
          : 'min-h-[38px] border border-[#f4d47f]/50 bg-gradient-to-br from-[#c99a2e] via-[#e8c56a] to-[#b8892f] px-3 py-1.5 text-[10px] text-[#1a1206] shadow-md hover:scale-[1.03] sm:px-3.5 sm:text-[11px]'
      } ${isAdminActive ? 'ring-2 ring-white/70' : ''}`}
    >
      <UtensilsCrossed className="h-3.5 w-3.5 shrink-0" />
      <span className="whitespace-nowrap uppercase tracking-[0.06em]">
        {variant === 'mobile' ? 'Menu' : t.auth.customer.menuManagement}
      </span>
    </Link>
  );

  const logoutButton = (variant: 'desktop' | 'mobile' | 'mobile-full' = 'desktop') => (
    <button
      type="button"
      onClick={() => void handleLogout()}
      aria-label={t.auth.customer.logout}
      className={`group relative inline-flex shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-full border border-white/30 bg-white/10 font-bold text-white shadow-md transition-all duration-300 hover:bg-white/20 active:scale-[0.96] touch-manipulation ${
        variant === 'mobile-full'
          ? 'flex-1 min-h-[44px] px-3 py-2.5 text-[11px]'
          : variant === 'mobile'
          ? 'min-h-[40px] min-w-[40px] px-3 py-2'
          : 'min-h-[38px] px-3 py-1.5 text-[10px] sm:px-3.5 sm:text-[11px]'
      }`}
    >
      <LogOut className="h-3.5 w-3.5 shrink-0" />
      {variant !== 'mobile' && (
        <span className="whitespace-nowrap uppercase tracking-[0.06em]">
          {t.auth.customer.logout}
        </span>
      )}
    </button>
  );

  return (
    <div
      className={`lang-banner w-full overflow-visible border-b border-[#c99a2e]/25 bg-gradient-to-r from-[#0a4a3d] via-[#0f5a4a] to-[#0a4a3d] ${
        !isAuthenticated
          ? 'h-12'
          : 'sm:h-14'
      }`}
      role="navigation"
      aria-label="Language selection"
    >
      {/* ── Row 1: languages (+ desktop auth inline) ── */}
      <div
        className={`mx-auto flex max-w-7xl items-center gap-2 px-3 sm:px-6 ${
          isAuthenticated ? 'h-12 sm:h-14' : 'h-12'
        }`}
      >
        <div className="hidden shrink-0 items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-[#d4a73d]/90 lg:flex">
          <Globe className="h-3.5 w-3.5" />
          <span>Language</span>
        </div>

        <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:gap-1.5">
          {languages.map((lang) => {
            const isActive = language === lang.code;
            return (
              <button
                key={lang.code}
                type="button"
                onClick={() => handleSelect(lang.code)}
                aria-pressed={isActive}
                aria-label={`${lang.name} (${lang.native})`}
                className={`flex shrink-0 items-center gap-1 rounded-full px-2.5 py-2 text-[11px] font-semibold transition-all min-h-[34px] touch-manipulation sm:min-h-[36px] sm:gap-1.5 sm:px-3 sm:py-1.5 sm:text-xs ${
                  isActive
                    ? 'bg-gradient-to-r from-[#c99a2e] to-[#e8c56a] text-[#1a1206] shadow-lg shadow-[#c99a2e]/35 ring-1 ring-[#f4d47f]/50'
                    : 'text-white/80 hover:bg-white/12 hover:text-white active:bg-white/20'
                }`}
              >
                <span className="text-sm sm:text-base" aria-hidden="true">
                  {lang.flag}
                </span>
                <span className="whitespace-nowrap max-[400px]:hidden min-[401px]:inline">
                  {lang.native}
                </span>
              </button>
            );
          })}
        </div>

        {/* Desktop: guest login OR logged-in account strip (single row, no clipping) */}
        <div className="hidden shrink-0 sm:flex sm:items-center">
          {!isAuthenticated ? (
            loginButton
          ) : (
            <div className="flex items-center gap-2.5 border-s border-white/15 ps-3">
              <div className="hidden min-w-0 max-w-[150px] md:block">
                <p className="text-[8px] font-medium uppercase tracking-[0.14em] text-[#d4a73d]/90 leading-none">
                  {t.auth.customer.loggedInAs}
                </p>
                <p className="truncate text-[11px] font-semibold text-white leading-tight mt-0.5" title={email ?? ''}>
                  {email}
                </p>
              </div>
              <div className="flex items-center gap-1.5">
                {isMenuManager && menuManagementLink('desktop')}
                {logoutButton('desktop')}
              </div>
            </div>
          )}
        </div>

        {/* Mobile guest: login icon only */}
        {!isAuthenticated && <div className="shrink-0 sm:hidden">{loginButton}</div>}
      </div>

      {/* ── Mobile logged-in: creative account card ── */}
      {isAuthenticated && (
        <div className="px-3 pb-2.5 sm:hidden">
          <div className="rounded-2xl border border-[#f4d47f]/20 bg-gradient-to-br from-white/[0.08] to-white/[0.03] p-2.5 shadow-inner backdrop-blur-sm">
            <div className="mb-2.5 flex items-center gap-2.5">
              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-[#c99a2e] to-[#e8c56a] text-sm font-bold text-[#1a1206] shadow-md ring-2 ring-white/20">
                {emailInitial}
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-[9px] font-semibold uppercase tracking-[0.14em] text-[#d4a73d]/90">
                  {t.auth.customer.loggedInAs}
                </p>
                <p className="truncate text-sm font-semibold text-white" title={email ?? ''}>
                  {email}
                </p>
              </div>
            </div>
            <div className="flex gap-2">
              {isMenuManager && menuManagementLink('mobile-full')}
              {logoutButton('mobile-full')}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}