office_translator/frontend/src/app/dashboard/DashboardHeader.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  Menu,
  X,
  LogOut
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useUser } from './useUser';
import { useLogout } from './useLogout';
import { baseNavItems } from './constants';
import { getInitials, translateTier } from './utils';
import { ThemeToggle } from '@/components/ui/theme-toggle';
import { useI18n } from '@/lib/i18n';

export function DashboardHeader() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const pathname = usePathname();
  const { data: user, isLoading } = useUser();
  const { logout } = useLogout();
  const { t } = useI18n();

  const isPro = ['pro', 'business', 'enterprise'].includes(user?.tier ?? '');
  const navItems = isPro ? baseNavItems : baseNavItems.filter(item => !item.proOnly);

  return (
    <>
      <header className="flex h-20 shrink-0 items-center justify-between border-b border-black/5 dark:border-white/5 bg-white/50 dark:bg-[#141414]/50 backdrop-blur-md px-6 lg:px-8">
        {/* Mobile menu button */}
        <button
          className="lg:hidden p-2 text-brand-dark/40 dark:text-white/40 hover:text-brand-dark dark:hover:text-white transition-colors"
          onClick={() => setMobileOpen(!mobileOpen)}
          aria-label={t('dashboard.header.toggleMenu')}
        >
          {mobileOpen ? <X size={20} /> : <Menu size={20} />}
        </button>

        {/* Mobile brand */}
        <div className="flex items-center gap-2 lg:hidden">
          <div className="flex size-7 items-center justify-center rounded-xl bg-brand-dark text-white font-bold text-xs">
            W
          </div>
          <span className="text-sm font-bold text-brand-dark dark:text-white">{t('auth.brandName')}</span>
        </div>

        {/* Left side - desktop */}
        <div className="hidden lg:flex items-center gap-3">
          <span className="text-[10px] font-bold uppercase tracking-[0.4em] text-brand-dark/30 dark:text-white/30">
            {t('dashboard.topbar.interfaceLabel')}
          </span>
        </div>

        {/* Right side */}
        <div className="flex items-center gap-3">
          {/* Theme toggle */}
          <div className="hidden lg:block p-3 bg-brand-muted dark:bg-[#1f1f1f] rounded-xl">
            <ThemeToggle />
          </div>

          <div className="hidden lg:block h-6 w-px bg-black/5 dark:bg-white/5" />

          {/* User info */}
          {!isLoading && user && (
            <div className="hidden lg:flex items-center gap-3">
              <div className="flex flex-col items-end gap-0.5">
                <span className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
                  {user.name}
                </span>
                <span className="text-[9px] font-black uppercase tracking-widest text-brand-accent">
                  {user.tier && user.tier !== 'free'
                    ? t('dashboard.topbar.premiumAccess', { defaultValue: 'Premium Access' })
                    : translateTier(t, user.tier)}
                </span>
              </div>
              <Link href="/dashboard/profile" title={t('dashboard.header.profileTitle')}>
                <div className="flex size-9 items-center justify-center rounded-xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark font-bold text-[11px] cursor-pointer hover:shadow-lg transition-shadow">
                  {getInitials(user.name)}
                </div>
              </Link>
            </div>
          )}

          {/* Mobile theme + avatar */}
          {!isLoading && user && (
            <div className="flex lg:hidden items-center gap-2">
              <ThemeToggle />
              <Link href="/dashboard/profile" title={t('dashboard.header.profileTitle')}>
                <div className="flex size-8 items-center justify-center rounded-xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark font-bold text-[10px]">
                  {getInitials(user.name)}
                </div>
              </Link>
            </div>
          )}
        </div>
      </header>

      {/* Mobile navigation drawer */}
      {mobileOpen && (
        <div className="border-b border-black/5 dark:border-white/5 bg-white dark:bg-[#141414] px-6 py-4 lg:hidden">
          <nav className="flex flex-col gap-1">
            {navItems.map((item) => {
              const isActive = pathname === item.href;
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setMobileOpen(false)}
                  className={cn(
                    'flex items-center gap-4 rounded-2xl px-6 py-4 text-[11px] font-black uppercase tracking-[0.2em] transition-all duration-200',
                    isActive
                      ? 'bg-brand-dark text-white shadow-xl'
                      : 'text-brand-dark/40 dark:text-white/40 hover:bg-brand-muted dark:hover:bg-[#1f1f1f]'
                  )}
                >
                  <item.icon size={18} className="shrink-0" />
                  {t(item.labelKey)}
                </Link>
              );
            })}

            <div className="my-3 h-px bg-black/5 dark:bg-white/5" />

            {!isLoading && user && (
              <div className="flex items-center gap-3 px-4 py-3">
                <div className="flex size-10 items-center justify-center rounded-xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark font-bold text-[11px]">
                  {getInitials(user.name)}
                </div>
                <div className="flex flex-col gap-0.5">
                  <span className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
                    {user.name}
                  </span>
                  <span className="px-1.5 py-0 rounded-full border border-brand-accent/30 text-brand-accent text-[7px] font-black uppercase w-fit">
                    {translateTier(t, user.tier)}
                  </span>
                </div>
              </div>
            )}

            <button
              onClick={logout}
              className="flex items-center gap-3 rounded-2xl px-6 py-4 text-[11px] font-black uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/40 hover:text-red-500 transition-colors"
            >
              <LogOut size={18} className="shrink-0" />
              {t('dashboard.sidebar.signOut')}
            </button>
          </nav>
        </div>
      )}
    </>
  );
}