'use client'

import { Home, LayoutGrid, Thermometer, Settings } from 'lucide-react'

type Tab = 'home' | 'rooms' | 'sensors' | 'settings'

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

const navItems: { id: Tab; icon: React.ComponentType<{ size?: number; color?: string }> }[] = [
  { id: 'home', icon: Home },
  { id: 'rooms', icon: LayoutGrid },
  { id: 'sensors', icon: Thermometer },
  { id: 'settings', icon: Settings },
]

export default function Sidebar({ active, onChange }: SidebarProps) {
  return (
    <nav
      style={{
        width: 72,
        minWidth: 72,
        height: '100dvh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        paddingTop: 20,
        paddingBottom: 20,
        background: 'rgba(0,0,0,0.5)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        borderRight: '1px solid rgba(255,255,255,0.05)',
        gap: 8,
        flexShrink: 0,
        zIndex: 10,
      }}
    >
      {/* Logo */}
      <div
        style={{
          width: 44,
          height: 44,
          borderRadius: 14,
          background: 'linear-gradient(135deg, #00d4ff22, #00d4ff44)',
          border: '1px solid rgba(0,212,255,0.3)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginBottom: 24,
          flexShrink: 0,
        }}
      >
        <Home size={20} color="#00d4ff" />
      </div>

      {/* Nav items */}
      {navItems.map(({ id, icon: Icon }) => {
        const isActive = active === id
        return (
          <button
            key={id}
            onClick={() => onChange(id)}
            style={{
              width: 48,
              height: 48,
              borderRadius: 14,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              background: isActive ? 'rgba(0,212,255,0.15)' : 'transparent',
              border: isActive ? '1px solid rgba(0,212,255,0.25)' : '1px solid transparent',
              transition: 'all 0.2s ease',
              flexShrink: 0,
            }}
          >
            <Icon size={22} color={isActive ? '#00d4ff' : 'rgba(255,255,255,0.4)'} />
          </button>
        )
      })}
    </nav>
  )
}