import { NavLink } from 'react-router-dom';
import { LayoutDashboard, Settings, FileText, Activity } from 'lucide-react';
import clsx from 'clsx';

export const Sidebar = () => {
  const navItems = [
    { to: '/dashboard', icon: Activity, label: 'Live Dashboard' },
    { to: '/configurator', icon: Settings, label: 'Configurator' },
    { to: '/results', icon: FileText, label: 'Results Viewer' },
  ];

  return (
    <aside className="w-64 bg-dark-800 border-r border-dark-600 flex flex-col h-screen fixed left-0 top-0">
      <div className="p-6 border-b border-dark-600">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
            <LayoutDashboard className="w-5 h-5 text-white" />
          </div>
          <h1 className="text-xl font-bold text-white tracking-tight">Atomizer</h1>
        </div>
        <p className="text-xs text-dark-300 mt-1 ml-11">Optimization Platform</p>
      </div>

      <nav className="flex-1 p-4 space-y-1">
        {navItems.map((item) => (
          <NavLink
            key={item.to}
            to={item.to}
            className={({ isActive }) =>
              clsx(
                'flex items-center gap-3 px-4 py-3 rounded-lg transition-colors duration-200',
                isActive
                  ? 'bg-primary-900/50 text-primary-100 border border-primary-700/50'
                  : 'text-dark-300 hover:bg-dark-700 hover:text-white'
              )
            }
          >
            <item.icon className="w-5 h-5" />
            <span className="font-medium">{item.label}</span>
          </NavLink>
        ))}
      </nav>

      <div className="p-4 border-t border-dark-600">
        <div className="bg-dark-700 rounded-lg p-4">
          <div className="text-xs font-medium text-dark-400 uppercase mb-2">System Status</div>
          <div className="flex items-center gap-2 text-sm text-green-400">
            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
            Backend Online
          </div>
        </div>
      </div>
    </aside>
  );
};