'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
LayoutDashboard,
Workflow,
Play,
Clock,
Settings,
LogOut,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { useAuthStore } from '@/stores/auth-store'
import { Button } from '@/components/ui/button'
const navigation = [
{ name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
{ name: 'Workflows', href: '/workflows', icon: Workflow },
{ name: 'Executions', href: '/executions', icon: Play },
{ name: 'Schedules', href: '/schedules', icon: Clock },
{ name: 'Settings', href: '/settings', icon: Settings },
]
export function Sidebar() {
const pathname = usePathname()
const { user, logout } = useAuthStore()
return (
<div className="flex h-full w-64 flex-col border-r bg-card">
{/* Logo */}
<div className="flex h-16 items-center px-6 border-b">
<h1 className="text-xl font-bold">DSL Executor</h1>
</div>
{/* Navigation */}
<nav className="flex-1 space-y-1 px-3 py-4">
{navigation.map((item) => {
const isActive = pathname.startsWith(item.href)
return (
<Link
key={item.name}
href={item.href}
className={cn(
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
isActive
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
)}
>
<item.icon className="h-5 w-5" />
{item.name}
</Link>
)
})}
</nav>
{/* User profile */}
<div className="border-t p-4">
<div className="flex items-center gap-3 mb-3">
<div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-semibold">
{user?.username?.charAt(0).toUpperCase()}
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">{user?.username}</p>
<p className="text-xs text-muted-foreground truncate">
{user?.email}
</p>
</div>
</div>
<Button
variant="outline"
size="sm"
className="w-full"
onClick={logout}
>
<LogOut className="h-4 w-4 mr-2" />
Logout
</Button>
</div>
</div>
)
}