frontend/src/components/Sidebar.tsx

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

const navigation = [
  {
    name: 'Templates',
    href: '/templates',
    icon: Brain,
    description: 'Browse assistant templates and examples'
  },
  {
    name: 'Assistant Studio',
    href: '/playground',
    icon: MessageSquare,
    description: 'Build, test and refine your AI assistants'
  },
  {
    name: 'Model Catalog',
    href: '/models',
    icon: BookOpen,
    description: 'Browse and manage AI 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">
        {/* Back to Home */}
        <div>
          <Link
            to="/"
            className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all hover:bg-accent text-muted-foreground hover:text-foreground"
          >
            <ArrowLeft className="h-4 w-4" />
            <span>Back to Home</span>
          </Link>
        </div>

        <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">
                    {item.name}
                  </div>
                </Link>
              )
            })}
          </nav>
        </div>


      </div>
    </div>
  )
}