'use client';

import Link from 'next/link';
import { LogOut } from 'lucide-react';
import { useUser } from './useUser';
import { useLogout } from './useLogout';
import { DashboardNavLinks } from './DashboardNavLinks';
import { getInitials, translateTier } from './utils';
import { ThemeToggle } from '@/components/ui/theme-toggle';
import { useI18n } from '@/lib/i18n';

export function DashboardSidebar() {
  const { data: user, isLoading } = useUser();
  const { logout } = useLogout();
  const { t } = useI18n();


  return (
    <aside className="hidden w-72 shrink-0 border-r border-black/5 dark:border-white/5 bg-white dark:bg-[#141414] lg:flex lg:flex-col">
      {/* Brand */}
      <div className="flex items-center gap-3 px-6 py-6">
        <div className="flex size-9 items-center justify-center rounded-xl bg-brand-dark text-white font-bold text-sm">
          W
        </div>
        <span className="text-sm font-bold tracking-tight text-brand-dark dark:text-white">
          {t('auth.brandName')}
        </span>
      </div>

      {/* Navigation */}
      <nav className="flex-1 overflow-y-auto px-3 py-2">
        <div className="flex flex-col gap-1">
          <DashboardNavLinks />
        </div>
      </nav>

      {/* Upgrade link for free users */}
      {(!user?.tier || user.tier === 'free') && (
        <div className="px-6 py-2">
          <Link
            href="/pricing"
            className="text-[10px] font-black uppercase tracking-widest text-brand-goldink dark:text-brand-accent hover:text-brand-dark dark:hover:text-white transition-colors"
          >
            {t('dashboard.sidebar.upgradeToPro', { defaultValue: 'Passer Pro →' })}
          </Link>
        </div>
      )}

      {/* User section */}
      <div className="border-t border-black/5 dark:border-white/5">
        {!isLoading && user && (
          <div className="px-6 py-4">
            <div className="flex items-center gap-3 mb-3">
              <div className="flex size-10 shrink-0 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 min-w-0 flex-1 flex-col gap-0.5">
                <span className="truncate text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
                  {user.name}
                </span>
                <span className="truncate text-[10px] text-brand-dark/60 dark:text-white/60">
                  {user.email}
                </span>
              </div>
            </div>
            <div className="flex items-center gap-2 mb-3">
              <span className="px-2.5 py-0.5 rounded-full border border-brand-accent/30 text-brand-goldink dark:text-brand-accent text-[10px] font-black uppercase">
                {translateTier(t, user.tier)}
              </span>
            </div>
          </div>
        )}

        <div className="flex items-center gap-2 px-6 py-3">
          <ThemeToggle />
          <button
            className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-brand-dark/40 dark:text-white/40 hover:text-red-500 transition-colors"
            onClick={logout}
          >
            <LogOut size={14} />
            {t('dashboard.sidebar.signOut')}
          </button>
        </div>
      </div>
    </aside>
  );
}