import { Home, Users, MessageCircle, Settings, Menu, X, Search, Bell } from 'lucide-react'
import React, { memo } from 'react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'

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

export const NavigationMenuBlock = memo<NavigationMenuBlockProps>(function NavigationMenuBlock({
  activeTab,
  onTabChange,
}) {
  return (
    <Card className="glass-card border-white/10">
      <CardHeader>
        <CardTitle className="text-white">Навигационное меню</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Horizontal Navigation */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Горизонтальное меню</h4>
          <div className="glass-card border-white/10 p-4 rounded-lg">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-6">
                <Button variant="ghost" size="sm" className="text-white hover:bg-white/10">
                  <Menu className="h-4 w-4 mr-2" />
                  Меню
                </Button>
                <nav className="hidden md:flex items-center space-x-1">
                  {[
                    { id: 'home', label: 'Главная', icon: Home, badge: '3' },
                    { id: 'users', label: 'Пользователи', icon: Users },
                    { id: 'messages', label: 'Сообщения', icon: MessageCircle, badge: '12' },
                    { id: 'settings', label: 'Настройки', icon: Settings },
                  ].map((item) => (
                    <Button
                      key={item.id}
                      variant={activeTab === item.id ? 'glass' : 'ghost'}
                      size="sm"
                      onClick={() => onTabChange(item.id)}
                      className={`relative ${
                        activeTab === item.id 
                          ? 'text-white bg-white/10' 
                          : 'text-white/70 hover:text-white hover:bg-white/5'
                      }`}
                    >
                      <item.icon className="h-4 w-4 mr-2" />
                      {item.label}
                      {item.badge && (
                        <Badge className="ml-2 bg-primary/30 text-primary-foreground text-xs px-1">
                          {item.badge}
                        </Badge>
                      )}
                    </Button>
                  ))}
                </nav>
              </div>
              <div className="flex items-center space-x-2">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
                  <Input
                    placeholder="Поиск..."
                    className="h-8 w-48 bg-white/5 border-white/20 text-white placeholder:text-white/40 pl-10"
                  />
                </div>
                <Button variant="ghost" size="icon" className="h-8 w-8">
                  <Bell className="h-4 w-4 text-white/70" />
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Mobile Navigation */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Мобильное меню</h4>
          <div className="glass-card border-white/10 p-4 rounded-lg">
            <div className="flex items-center justify-between">
              <h3 className="text-white font-semibold">Мобильное приложение</h3>
              <Button variant="ghost" size="icon" className="h-8 w-8">
                <X className="h-4 w-4 text-white/70" />
              </Button>
            </div>
            <div className="mt-4 space-y-2">
              {[
                { label: 'Главная', icon: Home, active: true },
                { label: 'Пользователи', icon: Users },
                { label: 'Сообщения', icon: MessageCircle },
                { label: 'Настройки', icon: Settings },
              ].map((item, index) => (
                <Button
                  key={index}
                  variant={item.active ? 'glass' : 'ghost'}
                  className={`w-full justify-start h-10 ${
                    item.active ? 'text-white bg-white/10' : 'text-white/70 hover:text-white'
                  }`}
                >
                  <item.icon className="h-4 w-4 mr-3" />
                  {item.label}
                </Button>
              ))}
            </div>
          </div>
        </div>

        <div className="text-center text-white/60 text-sm py-2">
          <p className="text-xs">Адаптивные навигационные меню с поддержкой мобильных устройств</p>
        </div>
      </CardContent>
    </Card>
  )
})

NavigationMenuBlock.displayName = 'NavigationMenuBlock'