import { BarChart3, Users, FileText, Settings } 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 type { TabsBlockProps } from '../types'

export const TabsBlock = memo<TabsBlockProps>(function TabsBlock({
  activeTab,
  onTabChange,
}) {
  const tabs = [
    { id: 'analytics', label: 'Аналитика', icon: BarChart3, badge: '12' },
    { id: 'users', label: 'Пользователи', icon: Users },
    { id: 'reports', label: 'Отчеты', icon: FileText, badge: 'Новое' },
    { id: 'settings', label: 'Настройки', icon: Settings },
  ]

  return (
    <Card className="glass-card border-white/10">
      <CardHeader>
        <CardTitle className="text-white">Табы и вкладки</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Modern Tabs */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Современные табы</h4>
          <div className="glass-card border-white/10 p-1 rounded-lg">
            <div className="flex space-x-1">
              {tabs.map((tab) => (
                <Button
                  key={tab.id}
                  variant={activeTab === tab.id ? 'glass' : 'ghost'}
                  size="sm"
                  onClick={() => onTabChange(tab.id)}
                  className={`flex-1 relative ${
                    activeTab === tab.id
                      ? 'text-white bg-white/10 shadow-sm'
                      : 'text-white/70 hover:text-white hover:bg-white/5'
                  }`}
                >
                  <tab.icon className="h-4 w-4 mr-2" />
                  {tab.label}
                  {tab.badge && (
                    <Badge className="ml-2 bg-primary/30 text-primary-foreground text-xs px-1">
                      {tab.badge}
                    </Badge>
                  )}
                </Button>
              ))}
            </div>
          </div>
        </div>

        {/* Vertical Tabs */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Вертикальные табы</h4>
          <div className="flex gap-4">
            <div className="glass-card border-white/10 p-2 rounded-lg w-48">
              <div className="space-y-1">
                {tabs.map((tab) => (
                  <Button
                    key={`vertical-${tab.id}`}
                    variant={activeTab === tab.id ? 'glass' : 'ghost'}
                    size="sm"
                    onClick={() => onTabChange(tab.id)}
                    className={`w-full justify-start ${
                      activeTab === tab.id
                        ? 'text-white bg-white/10'
                        : 'text-white/70 hover:text-white hover:bg-white/5'
                    }`}
                  >
                    <tab.icon className="h-4 w-4 mr-3" />
                    {tab.label}
                    {tab.badge && (
                      <Badge className="ml-auto bg-primary/30 text-primary-foreground text-xs px-1">
                        {tab.badge}
                      </Badge>
                    )}
                  </Button>
                ))}
              </div>
            </div>
            <div className="glass-card border-white/10 p-4 rounded-lg flex-1">
              <div className="text-center py-8">
                <h3 className="text-white font-semibold mb-2">
                  {tabs.find(tab => tab.id === activeTab)?.label}
                </h3>
                <p className="text-white/60 text-sm">
                  Содержимое вкладки &quot;{tabs.find(tab => tab.id === activeTab)?.label}&quot;
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Minimal Tabs */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Минималистичные табы</h4>
          <div className="border-b border-white/10">
            <div className="flex space-x-6">
              {tabs.map((tab) => (
                <Button
                  key={`minimal-${tab.id}`}
                  variant="ghost"
                  size="sm"
                  onClick={() => onTabChange(tab.id)}
                  className={`relative border-b-2 rounded-none pb-3 ${
                    activeTab === tab.id
                      ? 'text-white border-white'
                      : 'text-white/70 hover:text-white border-transparent'
                  }`}
                >
                  {tab.label}
                  {tab.badge && (
                    <Badge className="ml-2 bg-primary/30 text-primary-foreground text-xs px-1">
                      {tab.badge}
                    </Badge>
                  )}
                </Button>
              ))}
            </div>
          </div>
        </div>

        <div className="text-center text-white/60 text-sm py-2">
          <p className="text-xs">Различные стили табов для разных интерфейсов</p>
        </div>
      </CardContent>
    </Card>
  )
})

TabsBlock.displayName = 'TabsBlock'