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 { 
  Languages, 
  Menu, 
  X, 
  LogOut
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { useUser } from './useUser';
import { useLogout } from './useLogout';
import { getNavItems } 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 navItems = getNavItems(['pro', 'business', 'enterprise'].includes(user?.tier ?? ''));

  return (
    <>
      <header className="flex h-14 shrink-0 items-center justify-between border-b border-border bg-card px-4 lg:px-6">
        {/* Mobile menu button */}
        <Button
          variant="ghost"
          size="icon"
          className="lg:hidden"
          onClick={() => setMobileOpen(!mobileOpen)}
          aria-label={t('dashboard.header.toggleMenu')}
        >
          {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
        </Button>

        {/* Mobile brand */}
        <div className="flex items-center gap-2 lg:hidden">
          <div className="flex size-6 items-center justify-center rounded-md bg-foreground">
            <Languages className="size-3 text-background" />
          </div>
          <span className="text-sm font-semibold text-foreground">{t('auth.brandName')}</span>
        </div>

        {/* Page title - desktop */}
        <div className="hidden items-center gap-3 lg:flex">
          <h1 className="text-sm font-semibold text-foreground">{t('dashboard.header.title')}</h1>
          <Separator orientation="vertical" className="h-4" />
          <span className="text-sm text-muted-foreground">{t('dashboard.header.subtitle')}</span>
        </div>

        {/* Right side */}
        <div className="flex items-center gap-2">
          <ThemeToggle />
          {!isLoading && user && (
            <>
              <Badge
                variant="secondary"
                className={cn(
                  'border border-accent/20',
                  user.tier === 'free' || !user.tier
                    ? 'bg-muted text-muted-foreground'
                    : 'bg-accent/10 text-accent'
                )}
              >
                {translateTier(t, user.tier)}
              </Badge>
              <Link href="/dashboard/profile" title={t('dashboard.header.profileTitle')}>
                <Avatar className="size-8 cursor-pointer ring-2 ring-transparent hover:ring-accent/40 transition-all">
                  <AvatarFallback className="bg-accent text-accent-foreground text-xs font-semibold">
                    {getInitials(user.name)}
                  </AvatarFallback>
                </Avatar>
              </Link>
            </>
          )}
        </div>
      </header>

      {/* Mobile navigation drawer */}
      {mobileOpen && (
        <div className="border-b border-border bg-card px-4 py-3 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-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
                    isActive
                      ? 'bg-secondary text-foreground'
                      : 'text-muted-foreground hover:bg-secondary/60 hover:text-foreground'
                  )}
                >
                  <item.icon className="size-4 shrink-0" />
                  {t(item.labelKey)}
                </Link>
              );
            })}
            <Separator className="my-2" />
            {!isLoading && user && (
              <Link
                href="/dashboard/profile"
                onClick={() => setMobileOpen(false)}
                className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-secondary/60 transition-colors"
              >
                <Avatar className="size-8">
                  <AvatarFallback className="bg-accent text-accent-foreground text-xs font-semibold">
                    {getInitials(user.name)}
                  </AvatarFallback>
                </Avatar>
                <div className="flex flex-col gap-0.5">
                  <span className="text-sm font-medium text-foreground">{user.name}</span>
                  <Badge
                    variant="secondary"
                    className={cn(
                      'text-xs w-fit',
                      user.tier === 'pro' && 'border border-accent/20 bg-accent/10 text-accent'
                    )}
                  >
                    {translateTier(t, user.tier)}
                  </Badge>
                </div>
              </Link>
            )}
            <button
              onClick={logout}
              className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
            >
              <LogOut className="size-4 shrink-0" />
              {t('dashboard.sidebar.signOut')}
            </button>
          </nav>
        </div>
      )}
    </>
  );
}