Scrum4Me/components/shared/nav-bar.tsx

'use client'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { useTransition } from 'react'
import { ChevronDown } from 'lucide-react'
import { toast } from 'sonner'
import { Badge } from '@/components/ui/badge'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { AppIcon } from '@/components/shared/app-icon'
import { UserMenu } from '@/components/shared/user-menu'
import { cn } from '@/lib/utils'
import { setActiveProductAction } from '@/actions/active-product'

interface NavBarProps {
  isDemo: boolean
  roles: string[]
  userId: string
  username: string
  email: string | null
  activeProduct: { id: string; name: string } | null
  products: { id: string; name: string }[]
  hasActiveSprint: boolean
}

export function NavBar({
  isDemo,
  roles,
  userId,
  username,
  email,
  activeProduct,
  products,
  hasActiveSprint,
}: NavBarProps) {
  const pathname = usePathname()
  const router = useRouter()
  const [isPending, startTransition] = useTransition()

  function handleSwitchProduct(productId: string) {
    startTransition(async () => {
      const result = await setActiveProductAction(productId)
      if (result?.error) {
        toast.error(typeof result.error === 'string' ? result.error : 'Wisselen mislukt')
      } else {
        router.push(`/products/${productId}`)
      }
    })
  }

  const activeId = activeProduct?.id ?? null

  // Nav link helpers
  const disabledSpan = (label: string) => (
    <span
      key={label}
      className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-not-allowed select-none"
    >
      {label}
    </span>
  )

  const navLink = (href: string, label: string, isActive: boolean) => (
    <Link
      key={label}
      href={href}
      className={cn(
        'px-3 py-1.5 rounded-md text-sm transition-colors',
        isActive
          ? 'bg-primary-container text-primary-container-foreground font-medium'
          : 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
      )}
    >
      {label}
    </Link>
  )

  const sprintNode = () => {
    if (!activeId) return disabledSpan('Sprint')
    const href = `/products/${activeId}/sprint`
    const isActive = pathname.includes('/sprint')
    if (!hasActiveSprint) {
      return (
        <TooltipProvider key="sprint">
          <Tooltip>
            <TooltipTrigger
              className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-not-allowed select-none"
              aria-disabled="true"
            >
              Sprint
            </TooltipTrigger>
            <TooltipContent>Geen actieve sprint</TooltipContent>
          </Tooltip>
        </TooltipProvider>
      )
    }
    return navLink(href, 'Sprint', isActive)
  }

  return (
    <header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 shrink-0">
      {/* Links: logo + nav */}
      <div className="flex items-center gap-4 flex-1">
        <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 className="flex items-center gap-1 ml-2">
          {navLink('/dashboard', 'Producten', pathname.startsWith('/dashboard'))}
          {activeId
            ? navLink(
                `/products/${activeId}`,
                'Product Backlog',
                pathname.startsWith(`/products/${activeId}`) && !pathname.includes('/sprint') && !pathname.includes('/solo')
              )
            : disabledSpan('Product Backlog')}
          {sprintNode()}
          {activeId
            ? navLink(
                `/products/${activeId}/solo`,
                'Solo',
                pathname.includes('/solo')
              )
            : disabledSpan('Solo')}
          {navLink('/todos', "Todo's", pathname.startsWith('/todos'))}
        </nav>
      </div>

      {/* Midden: actief product dropdown */}
      <div className="flex items-center justify-center">
        {activeProduct ? (
          <DropdownMenu>
            <DropdownMenuTrigger
              disabled={isPending}
              className="flex items-center gap-1 text-sm font-medium text-foreground hover:text-primary transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none"
            >
              <span className="truncate max-w-[180px]">
                {activeProduct.name.length > 22
                  ? activeProduct.name.slice(0, 22) + '…'
                  : activeProduct.name}
              </span>
              <ChevronDown className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="center" className="w-56">
              {products.map(p => (
                <DropdownMenuItem
                  key={p.id}
                  onSelect={() => p.id !== activeProduct.id && handleSwitchProduct(p.id)}
                  className={cn(
                    p.id === activeProduct.id && 'bg-primary-container text-primary-container-foreground font-medium'
                  )}
                >
                  <span className="truncate">{p.name}</span>
                </DropdownMenuItem>
              ))}
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <Link href="/dashboard" className="w-full">
                  Producten beheren →
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        ) : (
          <span className="text-sm text-muted-foreground/50 select-none">Geen actief product</span>
        )}
      </div>

      {/* Rechts: account-menu */}
      <div className="flex items-center gap-2 flex-1 justify-end">
        <UserMenu userId={userId} username={username} email={email} roles={roles} />
      </div>
    </header>
  )
}