import {
  Home,
  Users,
  Settings,
  Building,
  Package,
  BarChart3,
  PanelLeftClose,
  PanelLeftOpen,
  ChevronDown,
  ChevronRight,
} from 'lucide-react'
import React, { memo } from 'react'

import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

import type { SidebarsBlockProps } from '../types'

export const SidebarsBlock = memo<SidebarsBlockProps>(function SidebarsBlock({
  sidebarCollapsed,
  expandedMenus,
  onToggleSidebar,
  onToggleMenu,
}) {
  return (
    <Card className="glass-card border-white/10">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-white">Современные сайдбары</CardTitle>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => onToggleSidebar(!sidebarCollapsed)}
            className="h-8 px-2 text-white/60 hover:text-white"
          >
            {sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
            <span className="ml-2 text-xs">{sidebarCollapsed ? 'Развернуть' : 'Свернуть'}</span>
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Premium Sidebar Demo */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Премиум сайдбар с профилем</h4>
          <div className={`glass-sidebar rounded-xl p-4 space-y-4 transition-all duration-300 ${
            sidebarCollapsed ? 'w-16' : 'w-72'
          }`}>
            {/* Profile Section */}
            {!sidebarCollapsed && (
              <div className="glass-card border-white/10 p-4 rounded-lg">
                <div className="flex items-center space-x-3 mb-3">
                  <Avatar className="h-10 w-10 bg-gradient-to-br from-primary/50 to-purple-500/50 border-2 border-white/20">
                    <AvatarFallback className="bg-transparent text-white font-semibold text-sm">SF</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <p className="text-white font-medium text-sm truncate">Александр Смирнов</p>
                    <p className="text-white/60 text-xs truncate">alex@sferav.com</p>
                  </div>
                  <Button variant="ghost" size="icon" className="h-6 w-6">
                    <Settings className="h-3 w-3 text-white/70" />
                  </Button>
                </div>
                <div className="flex items-center justify-between text-xs">
                  <div className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                    <span className="text-white/70">Онлайн</span>
                  </div>
                  <Badge variant="secondary" className="bg-primary/20 text-primary-foreground text-xs">
                    Pro
                  </Badge>
                </div>
              </div>
            )}

            {/* Navigation Menu */}
            <nav className="space-y-1">
              <Button variant="glass" className={`w-full justify-start h-9 font-medium ${sidebarCollapsed ? 'px-2' : ''}`}>
                <Home className="h-4 w-4 mr-3" />
                {!sidebarCollapsed && (
                  <>
                    Главная
                    <Badge className="ml-auto bg-primary/30 text-primary-foreground text-xs">3</Badge>
                  </>
                )}
              </Button>

              <div className="space-y-1">
                <Button
                  variant="ghost"
                  onClick={() => onToggleMenu('analytics')}
                  className={`w-full justify-start h-9 text-white/70 hover:text-white font-medium ${sidebarCollapsed ? 'px-2' : ''}`}
                >
                  <BarChart3 className="h-4 w-4 mr-3" />
                  {!sidebarCollapsed && (
                    <>
                      Аналитика
                      <div className="ml-auto">
                        {expandedMenus.includes('analytics') ? (
                          <ChevronDown className="h-3 w-3" />
                        ) : (
                          <ChevronRight className="h-3 w-3" />
                        )}
                      </div>
                    </>
                  )}
                </Button>

                {!sidebarCollapsed && expandedMenus.includes('analytics') && (
                  <div className="ml-6 space-y-1">
                    <Button variant="ghost" size="sm" className="w-full justify-start text-white/60 hover:text-white">
                      Отчеты
                    </Button>
                    <Button variant="ghost" size="sm" className="w-full justify-start text-white/60 hover:text-white">
                      Графики
                    </Button>
                  </div>
                )}
              </div>

              <Button variant="ghost" className={`w-full justify-start h-9 text-white/70 hover:text-white font-medium ${sidebarCollapsed ? 'px-2' : ''}`}>
                <Users className="h-4 w-4 mr-3" />
                {!sidebarCollapsed && 'Пользователи'}
              </Button>

              <Button variant="ghost" className={`w-full justify-start h-9 text-white/70 hover:text-white font-medium ${sidebarCollapsed ? 'px-2' : ''}`}>
                <Building className="h-4 w-4 mr-3" />
                {!sidebarCollapsed && 'Организации'}
              </Button>

              <Button variant="ghost" className={`w-full justify-start h-9 text-white/70 hover:text-white font-medium ${sidebarCollapsed ? 'px-2' : ''}`}>
                <Package className="h-4 w-4 mr-3" />
                {!sidebarCollapsed && 'Товары'}
              </Button>
            </nav>
          </div>
        </div>

        {/* Additional Sidebar Examples */}
        <div className="text-center text-white/60 text-sm py-4">
          <p>Дополнительные варианты сайдбаров будут добавлены в блоки...</p>
          <p className="text-xs text-white/40 mt-1">Модульная архитектура позволяет легко расширять функциональность</p>
        </div>
      </CardContent>
    </Card>
  )
})

SidebarsBlock.displayName = 'SidebarsBlock'