'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { 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 DashboardSidebar() {
  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 (
    <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">
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                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>
      </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-accent hover:text-brand-dark dark:hover:text-white transition-colors"
          >
            {t('dashboard.sidebar.upgradeToPro', { defaultValue: 'Passer Pro →' })}
          </Link>
        </div>
      )}

      {/* Momento promo section */}
      <div className="px-6 py-4">
        <div className="bg-brand-muted/50 dark:bg-[#1f1f1f]/50 rounded-3xl p-6 border border-black/5 dark:border-white/5 group cursor-pointer hover:bg-brand-dark dark:hover:bg-brand-accent transition-all duration-500">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-8 h-8 bg-brand-dark group-hover:bg-brand-accent rounded-lg flex items-center justify-center text-white text-xs font-black shadow-sm transition-all group-hover:rotate-12">M</div>
            <span className="text-[10px] font-black uppercase tracking-widest text-brand-dark group-hover:text-white dark:text-white transition-colors">{t('memento.title')}</span>
          </div>
          <p className="text-[9px] text-brand-dark/40 group-hover:text-white/60 font-medium leading-relaxed mb-6">
            {t('memento.slogan').substring(0, 80)}...
          </p>
          <button className="w-full py-2.5 bg-brand-dark group-hover:bg-white text-white group-hover:text-brand-dark dark:bg-[#272727] rounded-xl text-[8px] font-black uppercase tracking-widest shadow-sm transition-all">
            {t('memento.ctaFree')}
          </button>
        </div>
      </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-[9px] text-brand-dark/40 dark:text-white/40">
                  {user.email}
                </span>
              </div>
            </div>
            <div className="flex items-center gap-2 mb-3">
              <span className="px-1.5 py-0 rounded-full border border-brand-accent/30 text-brand-accent text-[7px] 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>
  );
}
