import { NavLink } from 'react-router-dom'
import { motion } from 'framer-motion'
import { 
  LayoutDashboard, 
  Tv2, 
  Activity, 
  Settings,
  Globe
} from 'lucide-react'

const navItems = [
  { path: '/', icon: LayoutDashboard, label: 'Dashboard' },
  { path: '/channels', icon: Tv2, label: 'Kanallar' },
  { path: '/monitoring', icon: Activity, label: 'İzleme' },
  { path: '/settings', icon: Settings, label: 'Ayarlar' },
]

export default function Sidebar() {
  return (
    <nav className="w-64 bg-dark-800 border-r border-dark-700 flex flex-col">
      {/* Navigation Items */}
      <div className="flex-1 py-4 px-3 space-y-1">
        {navItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            className={({ isActive }) =>
              `flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group relative ${
                isActive
                  ? 'bg-gradient-to-r from-accent-blue/20 to-accent-purple/10 text-accent-blue'
                  : 'text-dark-300 hover:text-dark-100 hover:bg-dark-700'
              }`
            }
          >
            {({ isActive }) => (
              <>
                {isActive && (
                  <motion.div
                    layoutId="sidebar-active"
                    className="absolute left-0 w-1 h-8 bg-accent-blue rounded-r-full"
                    initial={false}
                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
                  />
                )}
                <item.icon className="w-5 h-5" />
                <span className="font-medium text-sm">{item.label}</span>
              </>
            )}
          </NavLink>
        ))}
      </div>

      {/* Status Footer */}
      <div className="p-4 border-t border-dark-700">
        <div className="flex items-center gap-2 text-xs text-dark-400">
          <Globe className="w-4 h-4" />
          <span>Bağlantı durumu</span>
          <span className="ml-auto flex items-center gap-1">
            <span className="w-2 h-2 rounded-full bg-accent-green status-online" />
            Aktif
          </span>
        </div>
      </div>
    </nav>
  )
}