'use client'

import { usePathname } from 'next/navigation'
import { useSession } from 'next-auth/react'
import { performSignOut } from '@/lib/auth-client'
import {
  LayoutDashboard,
  Users,
  Brain,
  Settings,
  StickyNote,
  Shield,
  ArrowLeft,
  User,
  LogOut,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLanguage } from '@/lib/i18n'
import { NotificationPanel } from '@/components/notification-panel'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

const ADMIN_NAV_ITEMS = [
  {
    titleKey: 'admin.sidebar.dashboard',
    href: '/admin',
    icon: LayoutDashboard,
  },
  {
    titleKey: 'admin.sidebar.users',
    href: '/admin/users',
    icon: Users,
  },
  {
    titleKey: 'admin.sidebar.aiManagement',
    href: '/admin/ai',
    icon: Brain,
  },
  {
    titleKey: 'admin.sidebar.settings',
    href: '/admin/settings',
    icon: Settings,
  },
] as const

function navItemIsActive(pathname: string | null, href: string): boolean {
  if (!pathname) return false
  if (href === '/admin') return pathname === '/admin'
  if (href === '/admin/ai') return pathname === '/admin/ai' || pathname.startsWith('/admin/ai')
  return pathname === href || pathname.startsWith(`${href}/`)
}

/**
 * Barre latérale administration — même vocabulaire visuel que {@link Sidebar}
 * (fond bureau, panneau vitré, navigation arrondie). Liens en <a> pour
 * éviter les transitions RSC qui déclenchent React #310 entre groupes de routes.
 */
export function AdminSidebar({ className }: { className?: string }) {
  const pathname = usePathname()
  const { t } = useLanguage()
  const { data: session } = useSession()
  const user = session?.user
  const initial = user?.name
    ? user.name.charAt(0).toUpperCase()
    : user?.email?.[0]?.toUpperCase() ?? '?'

  return (
    <aside
      className={cn(
        'flex h-full min-h-0 w-64 shrink-0 flex-col sm:w-72 lg:w-80',
        'border-e border-border/40 bg-white/30 backdrop-blur-md sidebar-shadow dark:border-border/30 dark:bg-sidebar/90',
        className
      )}
    >
      {/* Marque + retour app */}
      <div className="flex flex-col gap-4 p-6 pb-4">
        <div className="flex items-center justify-between gap-2">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button
                type="button"
                className="shrink-0 rounded-full outline-none ring-offset-background transition-shadow hover:ring-2 hover:ring-primary/30 focus-visible:ring-2 focus-visible:ring-ring"
                aria-label={t('sidebar.accountMenu') || 'Account menu'}
              >
                <div className="flex size-10 items-center justify-center overflow-hidden rounded-full border border-border bg-muted shadow-sm">
                  <Avatar className="size-10 ring-1 ring-border/60">
                    <AvatarImage src={(user as { image?: string } | undefined)?.image} alt="" />
                    <AvatarFallback className="bg-primary/10 font-memento-serif text-lg font-semibold text-primary">
                      {initial}
                    </AvatarFallback>
                  </Avatar>
                </div>
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-52 bg-popover border-border">
              <DropdownMenuItem asChild className="cursor-pointer">
                <a href="/settings/profile" className="flex items-center gap-2">
                  <User className="h-4 w-4" />
                  {t('settings.profile')}
                </a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild className="cursor-pointer">
                <a href="/settings" className="flex items-center gap-2">
                  <Settings className="h-4 w-4" />
                  {t('nav.settings')}
                </a>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                className="cursor-pointer text-destructive focus:text-destructive"
                onClick={() => performSignOut('/login')}
              >
                <LogOut className="mr-2 h-4 w-4" />
                {t('auth.signOut')}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          <a
            href="/home"
            className={cn(
              'flex min-w-0 flex-1 items-center gap-2 rounded-xl px-2 py-1.5 transition-colors',
              'hover:bg-white/40 dark:hover:bg-white/10'
            )}
          >
            <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
              <StickyNote className="size-4" />
            </div>
            <div className="min-w-0 text-left">
              <p className="truncate font-memento-serif text-[13px] font-semibold tracking-tight text-foreground">
                MEMENTO
              </p>
              <p className="truncate text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                {t('admin.adminConsole')}
              </p>
            </div>
          </a>
        </div>

        <a
          href="/home"
          className={cn(
            'flex items-center gap-3 rounded-xl px-4 py-2.5 text-[13px] font-medium transition-all',
            'text-muted-foreground hover:bg-white/40 hover:text-foreground dark:hover:bg-white/10'
          )}
        >
          <div className="flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-white/60 dark:bg-white/10">
            <ArrowLeft className="size-4" />
          </div>
          <span>{t('admin.backToApp')}</span>
        </a>

        <div className="flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1.5 text-xs font-semibold text-primary dark:bg-primary/20">
          <Shield className="size-3.5 shrink-0" />
          <span>{t('admin.title')}</span>
        </div>
      </div>

      {/* Navigation */}
      <div className="flex-1 overflow-y-auto px-4 pb-4 custom-scrollbar">
        <p className="mb-3 px-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
          {t('admin.navSection')}
        </p>
        <nav className="space-y-1">
          {ADMIN_NAV_ITEMS.map((item) => {
            const Icon = item.icon
            const active = navItemIsActive(pathname, item.href)
            return (
              <a
                key={item.href}
                href={item.href}
                className={cn(
                  'flex items-center gap-3 rounded-xl px-4 py-3 transition-all duration-300',
                  active
                    ? 'memento-active-nav text-foreground'
                    : 'text-muted-foreground hover:bg-white/40 hover:text-foreground dark:hover:bg-white/10'
                )}
              >
                <div
                  className={cn(
                    'flex size-8 shrink-0 items-center justify-center rounded-full border transition-colors',
                    active
                      ? 'border-foreground bg-foreground text-background'
                      : 'border-border bg-white/60 dark:bg-white/10'
                  )}
                >
                  <Icon className="size-4" />
                </div>
                <span className="text-[13px] font-medium">{t(item.titleKey)}</span>
              </a>
            )
          })}
        </nav>
      </div>

      {/* Pied */}
      <div className="space-y-1 border-t border-border p-5 pt-4">
        <div className="flex items-center gap-3 px-4 py-2">
          <NotificationPanel />
          <span className="text-[13px] font-medium text-muted-foreground">
            {t('notification.notifications')}
          </span>
        </div>
        <a
          href="/settings"
          className="flex items-center gap-3 rounded-lg px-4 py-2 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-white/30 hover:text-foreground dark:hover:bg-white/10"
        >
          <Settings className="size-4" />
          <span>{t('nav.settings')}</span>
        </a>
      </div>
    </aside>
  )
}