'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  Home,
  Activity,
  FileText,
  GitBranch,
  BarChart2,
  AlertTriangle,
  Server,
  Settings,
} from 'lucide-react';

const navigation = [
  { name: 'Dashboard', href: '/', icon: Home },
  { name: 'Traces', href: '/traces', icon: Activity },
  { name: 'Logs', href: '/logs', icon: FileText },
  { name: 'Metrics', href: '/metrics', icon: BarChart2 },
  { name: 'Services', href: '/services', icon: GitBranch },
  { name: 'Alerts', href: '/alerts', icon: AlertTriangle },
  { name: 'Agents', href: '/agents', icon: Server },
];

export function Sidebar() {
  const pathname = usePathname();

  return (
    <div className="w-64 bg-gray-900 border-r border-gray-800 flex flex-col">
      {/* Logo */}
      <div className="h-16 flex items-center px-6 border-b border-gray-800">
        <Link href="/" className="flex items-center gap-2">
          <span className="text-2xl">🐍</span>
          <span className="text-xl font-bold text-white">OPHION</span>
        </Link>
      </div>

      {/* Navigation */}
      <nav className="flex-1 px-3 py-4 space-y-1">
        {navigation.map((item) => {
          const isActive = pathname === item.href;
          const Icon = item.icon;
          return (
            <Link
              key={item.name}
              href={item.href}
              className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                isActive
                  ? 'bg-indigo-600 text-white'
                  : 'text-gray-400 hover:bg-gray-800 hover:text-white'
              }`}
            >
              <Icon className="h-5 w-5" />
              {item.name}
            </Link>
          );
        })}
      </nav>

      {/* Footer */}
      <div className="p-4 border-t border-gray-800">
        <Link
          href="/settings"
          className="flex items-center gap-3 px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded-lg transition-colors"
        >
          <Settings className="h-5 w-5" />
          Settings
        </Link>
        <p className="text-xs text-gray-600 mt-4 px-3">v0.2.0</p>
      </div>
    </div>
  );
}
