frontend/src/components/Sidebar.tsx

import { Link, useLocation } from 'react-router-dom'
import { cn } from '@/lib/utils'
import { 
  Home, 
  BookOpen, 
  MessageSquare, 
  Bot, 
  Zap,
  Settings,
  Brain
} from 'lucide-react'

const navigation = [
  {
    name: 'Home',
    href: '/',
    icon: Home,
    description: 'Overview and getting started'
  },
  {
    name: 'Chat Playground',
    href: '/playground',
    icon: MessageSquare,
    description: 'AI chatbot with conversation history'
  },
  {
    name: 'Model Catalog',
    href: '/models',
    icon: BookOpen,
    description: 'Browse and manage models'
  },
  {
    name: 'Assistants',
    href: '/assistants',
    icon: Bot,
    description: 'Custom AI assistants',
    badge: 'Preview'
  }
]

const tools = [
  {
    name: 'Completions',
    href: '/completions',
    icon: Zap,
    description: 'Text completion endpoint'
  },
  {
    name: 'Fine-tuning',
    href: '/fine-tuning',
    icon: Brain,
    description: 'Train custom models'
  },
  {
    name: 'Settings',
    href: '/settings',
    icon: Settings,
    description: 'Application settings'
  }
]

export function Sidebar() {
  const location = useLocation()

  return (
    <div className="flex h-full flex-col bg-background border-r">
      {/* Header */}
      <div className="p-6 border-b">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
            <Brain className="h-5 w-5 text-primary-foreground" />
          </div>
          <div>
            <h1 className="font-semibold text-lg">Edge LLM</h1>
            <p className="text-xs text-muted-foreground">Local AI Platform</p>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <div className="flex-1 px-3 py-4 space-y-8">
        <div>
          <h2 className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Get started
          </h2>
          <nav className="space-y-1">
            {navigation.map((item) => {
              const isActive = location.pathname === item.href
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={cn(
                    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all hover:bg-accent',
                    isActive 
                      ? 'bg-accent text-accent-foreground font-medium' 
                      : 'text-muted-foreground hover:text-foreground'
                  )}
                >
                  <item.icon className="h-4 w-4" />
                  <div className="flex-1">
                    <div className="flex items-center gap-2">
                      {item.name}
                      {item.badge && (
                        <span className="px-1.5 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
                          {item.badge}
                        </span>
                      )}
                    </div>
                  </div>
                </Link>
              )
            })}
          </nav>
        </div>

        <div className="px-3">
          <h2 className="mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Advanced
          </h2>
          <nav className="space-y-1">
            {tools.map((item) => {
              const isActive = location.pathname === item.href
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={cn(
                    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all hover:bg-accent',
                    isActive 
                      ? 'bg-accent text-accent-foreground font-medium' 
                      : 'text-muted-foreground hover:text-foreground'
                  )}
                >
                  <item.icon className="h-4 w-4" />
                  {item.name}
                </Link>
              )
            })}
          </nav>
        </div>
      </div>
    </div>
  )
}