'use client'

import { Home, Cpu, CalendarDays, Settings } from 'lucide-react'

type Tab = 'home' | 'devices' | 'calendar' | 'settings'

interface SidebarProps {
  active: Tab
  onChange: (tab: Tab) => void
}

const navItems: { id: Tab; icon: any; label: string }[] = [
  { id: 'home', icon: Home, label: 'Главная' },
  { id: 'devices', icon: Cpu, label: 'Устройства' },
  { id: 'calendar', icon: CalendarDays, label: 'Календарь' },
  { id: 'settings', icon: Settings, label: 'Настройки' },
]

export default function Sidebar({ active, onChange }: SidebarProps) {
  return (
    <nav
      style={{
        width: 78,
        minWidth: 78,
        height: '100dvh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        paddingTop: 24,
        paddingBottom: 24,
        background: 'rgba(12, 12, 24, 0.6)',
        backdropFilter: 'blur(30px)',
        WebkitBackdropFilter: 'blur(30px)',
        borderRight: '1px solid rgba(255,255,255,0.04)',
        gap: 6,
        flexShrink: 0,
        zIndex: 10,
      }}
    >
      {/* Logo */}
      <div
        style={{
          width: 48,
          height: 48,
          borderRadius: 16,
          background: 'linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.25))',
          border: '1px solid rgba(129,140,248,0.3)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginBottom: 28,
          flexShrink: 0,
          boxShadow: '0 0 20px rgba(99,102,241,0.15)',
        }}
      >
        <Home size={22} color="#818cf8" />
      </div>

      {/* Nav items */}
      {navItems.map(({ id, icon: Icon, label }) => {
        const isActive = active === id
        return (
          <button
            key={id}
            onClick={() => onChange(id)}
            title={label}
            style={{
              width: 52,
              height: 52,
              borderRadius: 16,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 4,
              background: isActive
                ? 'linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))'
                : 'transparent',
              border: isActive
                ? '1px solid rgba(129,140,248,0.25)'
                : '1px solid transparent',
              transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
              flexShrink: 0,
              boxShadow: isActive ? '0 0 20px rgba(99,102,241,0.1)' : 'none',
            }}
          >
            <Icon
              size={20}
              color={isActive ? '#a5b4fc' : 'rgba(255,255,255,0.3)'}
              strokeWidth={isActive ? 2.2 : 1.8}
            />
            <span style={{
              fontSize: 9,
              fontWeight: isActive ? 600 : 500,
              color: isActive ? '#a5b4fc' : 'rgba(255,255,255,0.25)',
              letterSpacing: '0.02em',
            }}>
              {label}
            </span>
          </button>
        )
      })}
    </nav>
  )
}