"use client"

import { useAdminAuth } from '@/hooks/useAdminAuth'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { 
  Settings, 
  LogOut,
  Users,
  Shield,
  Palette,
  Package
} from 'lucide-react'

interface AdminSidebarProps {
  activeSection: string
  onSectionChange: (section: 'users' | 'categories' | 'ui-kit' | 'settings') => void
}

export function AdminSidebar({ activeSection, onSectionChange }: AdminSidebarProps) {
  const { admin, logout } = useAdminAuth()

  const getInitials = () => {
    if (admin?.username) {
      return admin.username.charAt(0).toUpperCase()
    }
    return 'A'
  }

  const handleLogout = () => {
    logout()
  }

  return (
    <div className="fixed left-0 top-0 h-full w-56 glass-sidebar border-r border-white/10 p-4 flex flex-col z-50">
      {/* Профиль администратора */}
      <Card className="glass-card border-white/10 p-4 mb-6">
        <div className="flex items-center space-x-3">
          <Avatar className="h-10 w-10 bg-white/20">
            <AvatarFallback className="bg-white/20 text-white text-sm font-semibold">
              {getInitials()}
            </AvatarFallback>
          </Avatar>
          <div className="flex-1 min-w-0">
            <p className="text-white text-sm font-medium truncate">
              {admin?.username || 'Администратор'}
            </p>
            <p className="text-white/60 text-xs">
              Админ-панель
            </p>
          </div>
        </div>
      </Card>

      {/* Навигация */}
      <nav className="flex-1 space-y-2">
        <Button
          variant={activeSection === 'users' ? "secondary" : "ghost"}
          className={`w-full justify-start text-left transition-all duration-200 h-10 ${
            activeSection === 'users'
              ? 'bg-white/20 text-white hover:bg-white/30' 
              : 'text-white/80 hover:bg-white/10 hover:text-white'
          } cursor-pointer`}
          onClick={() => onSectionChange('users')}
        >
          <Users className="h-4 w-4 mr-3" />
          Пользователи
        </Button>

        <Button
          variant={activeSection === 'categories' ? "secondary" : "ghost"}
          className={`w-full justify-start text-left transition-all duration-200 h-10 ${
            activeSection === 'categories'
              ? 'bg-white/20 text-white hover:bg-white/30' 
              : 'text-white/80 hover:bg-white/10 hover:text-white'
          } cursor-pointer`}
          onClick={() => onSectionChange('categories')}
        >
          <Package className="h-4 w-4 mr-3" />
          Категории
        </Button>

        <Button
          variant={activeSection === 'ui-kit' ? "secondary" : "ghost"}
          className={`w-full justify-start text-left transition-all duration-200 h-10 ${
            activeSection === 'ui-kit'
              ? 'bg-white/20 text-white hover:bg-white/30' 
              : 'text-white/80 hover:bg-white/10 hover:text-white'
          } cursor-pointer`}
          onClick={() => onSectionChange('ui-kit')}
        >
          <Palette className="h-4 w-4 mr-3" />
          UI Kit
        </Button>

        <Button
          variant={activeSection === 'settings' ? "secondary" : "ghost"}
          className={`w-full justify-start text-left transition-all duration-200 h-10 ${
            activeSection === 'settings'
              ? 'bg-white/20 text-white hover:bg-white/30' 
              : 'text-white/80 hover:bg-white/10 hover:text-white'
          } cursor-pointer`}
          onClick={() => onSectionChange('settings')}
        >
          <Settings className="h-4 w-4 mr-3" />
          Настройки
        </Button>
      </nav>

      {/* Управление */}
      <div className="space-y-2 border-t border-white/10 pt-4">
        <Button
          variant="ghost"
          className="w-full justify-start text-left text-white/80 hover:bg-white/10 hover:text-white transition-all duration-200 h-10"
          onClick={handleLogout}
        >
          <LogOut className="h-4 w-4 mr-3" />
          Выйти
        </Button>
      </div>

      {/* Логотип внизу */}
      <div className="flex items-center justify-center mt-4 pt-4 border-t border-white/10">
        <div className="flex items-center space-x-2">
          <Shield className="h-5 w-5 text-white/60" />
          <span className="text-white/60 text-sm font-medium">SferaV Admin</span>
        </div>
      </div>
    </div>
  )
}