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

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Languages, ChevronLeft, LogOut } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Button } from '@/components/ui/button';
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 DashboardSidebar() {
  const pathname = usePathname();
  const { data: user, isLoading } = useUser();
  const { logout } = useLogout();
  const { t } = useI18n();

  const navItems = getNavItems(['pro', 'business', 'enterprise'].includes(user?.tier ?? ''));

  return (
    <aside className="hidden w-64 shrink-0 border-r border-border bg-card lg:flex lg:flex-col">
      {/* Brand */}
      <div className="flex h-14 items-center gap-2.5 px-5">
        <div className="flex size-7 items-center justify-center rounded-md bg-foreground">
          <Languages className="size-3.5 text-background" />
        </div>
        <span className="text-sm font-semibold tracking-tight text-foreground">{t('auth.brandName')}</span>
      </div>

      <Separator />

      {/* Navigation */}
      <nav className="flex-1 overflow-y-auto px-3 py-4">
        <div className="flex flex-col gap-1">
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                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>
            );
          })}
        </div>
      </nav>

      {/* Bottom section: user + actions */}
      <div className="mt-auto border-t border-border">
        {/* User section */}
        {!isLoading && user && (
          <>
            <div className="flex items-center gap-2.5 px-4 py-3">
              <Avatar className="size-8 shrink-0">
                <AvatarFallback className="bg-primary text-primary-foreground text-xs font-semibold">
                  {getInitials(user.name)}
                </AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                <span className="truncate text-sm font-medium leading-none text-foreground">{user.name}</span>
                <span className="truncate text-xs leading-none text-muted-foreground">{user.email}</span>
                <Badge
                  variant="secondary"
                  className={cn(
                    'mt-0.5 w-fit text-xs',
                    user.tier !== 'free' && user.tier && 'border border-primary/20 bg-primary/10 text-primary'
                  )}
                >
                  {translateTier(t, user.tier)}
                </Badge>
              </div>
            </div>
            <Separator />
          </>
        )}

        {/* Actions */}
        <div className="px-3 py-3 space-y-1">
          <div className="flex items-center justify-between px-3 py-1.5">
            <span className="text-xs text-muted-foreground">{t('dashboard.sidebar.theme')}</span>
            <ThemeToggle />
          </div>
          <Button
            variant="ghost"
            size="sm"
            className="w-full justify-start gap-2 text-muted-foreground hover:text-foreground"
            onClick={logout}
          >
            <LogOut className="size-3.5" />
            {t('dashboard.sidebar.signOut')}
          </Button>
          <Button variant="ghost" size="sm" className="w-full justify-start gap-2 text-muted-foreground" asChild>
            <Link href="/">
              <ChevronLeft className="size-3.5" />
              {t('dashboard.sidebar.backHome')}
            </Link>
          </Button>
        </div>
      </div>
    </aside>
  );
}