Scrum4Me/components/shared/nav-bar.tsx

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { logoutAction } from '@/actions/auth'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { AppIcon } from '@/components/shared/app-icon'
import { cn } from '@/lib/utils'
import { useProductStore } from '@/stores/product-store'

const ROLE_LABELS: Record<string, string> = {
  PRODUCT_OWNER: 'PO',
  SCRUM_MASTER: 'SM',
  DEVELOPER: 'Dev',
}

interface NavBarProps {
  isDemo: boolean
  roles: string[]
}

export function NavBar({ isDemo, roles }: NavBarProps) {
  const pathname = usePathname()
  const currentProduct = useProductStore(s => s.currentProduct)

  const productMatch = pathname.match(/^\/products\/([^/]+)/)
  const productId = productMatch ? productMatch[1] : null

  const sprintHref = productId ? `/products/${productId}/sprint` : null

  const navLinks = [
    { href: '/dashboard', label: 'Producten', active: pathname.startsWith('/dashboard') || (pathname.startsWith('/products') && !pathname.includes('/solo')) },
    { href: sprintHref, label: 'Sprint', active: pathname.includes('/sprint') },
    { href: '/solo', label: 'Solo', active: pathname.includes('/solo') },
    { href: '/todos', label: "Todo's", active: pathname.startsWith('/todos') },
  ]

  return (
    <header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 gap-4 shrink-0">
      {/* Logo */}
      <Link href="/" className="flex items-center gap-2 font-medium text-foreground">
        <AppIcon size={24} />
        <span className="text-primary font-semibold">Scrum4Me</span>
        {isDemo && (
          <Badge className="bg-warning text-warning-foreground text-xs px-2 py-0">
            Demo
          </Badge>
        )}
      </Link>

      {/* Nav links */}
      <nav className="flex items-center gap-1 ml-2">
        {navLinks.map(link =>
          link.href ? (
            <Link
              key={link.label}
              href={link.href}
              className={cn(
                'px-3 py-1.5 rounded-md text-sm transition-colors',
                link.active
                  ? 'bg-primary-container text-primary-container-foreground font-medium'
                  : 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
              )}
            >
              {link.label}
            </Link>
          ) : (
            <span
              key={link.label}
              className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-default select-none"
            >
              {link.label}
            </span>
          )
        )}
      </nav>

      {/* Rechts: rollen + instellingen + uitloggen */}
      <div className="ml-auto flex items-center gap-2">
        {roles.length > 0 && (
          <span className="text-xs text-muted-foreground px-2">
            {roles.map(r => ROLE_LABELS[r]).filter(Boolean).join(' · ')}
          </span>
        )}
        {currentProduct && (
          <Link
            href={`/products/${currentProduct.id}`}
            className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 truncate max-w-[160px]"
            title={currentProduct.name}
          >
            {currentProduct.name.length > 20
              ? currentProduct.name.slice(0, 20) + '…'
              : currentProduct.name}
          </Link>
        )}
        <Link
          href="/settings"
          className={cn(
            'px-3 py-1.5 rounded-md text-sm transition-colors',
            pathname.startsWith('/settings')
              ? 'bg-primary-container text-primary-container-foreground font-medium'
              : 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
          )}
        >
          Instellingen
        </Link>
        <form action={logoutAction}>
          <Button variant="ghost" size="sm" type="submit" className="text-muted-foreground hover:text-foreground">
            Uitloggen
          </Button>
        </form>
      </div>
    </header>
  )
}