'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 { NotificationsBell } from '@/components/shared/notifications-bell'
import { SoloNavStatusIndicators } from '@/components/solo/nav-status-indicators'
import { cn } from '@/lib/utils'
import { setActiveProductAction } from '@/actions/active-product'
import { setActiveSprintAction } from '@/actions/active-sprint'
import type { SprintStatusApi } from '@/lib/task-status'

type SprintItem = { id: string; code: string; status: SprintStatusApi }

interface NavBarProps {
  isDemo: boolean
  roles: string[]
  userId: string
  username: string
  email: string | null
  activeProduct: { id: string; name: string } | null
  products: { id: string; name: string }[]
  sprints: SprintItem[]
  activeSprint: SprintItem | null
  buildingSprintIds: string[]
  minQuotaPct: number
}

const SPRINT_STATUS_LABEL: Record<SprintStatusApi, string> = {
  open: 'Open',
  closed: 'Gesloten',
  archived: 'Gearchiveerd',
  failed: 'Mislukt',
}

const SPRINT_STATUS_BADGE: Record<SprintStatusApi, string> = {
  open: 'bg-status-in-progress text-foreground',
  closed: 'bg-status-done text-foreground',
  archived: 'bg-surface-container text-muted-foreground',
  failed: 'bg-status-failed text-foreground',
}

export function NavBar({
  isDemo,
  roles,
  userId,
  username,
  email,
  activeProduct,
  products,
  sprints,
  activeSprint,
  buildingSprintIds,
  minQuotaPct,
}: NavBarProps) {
  const pathname = usePathname()
  const router = useRouter()
  const [isPending, startTransition] = useTransition()
  const buildingSet = new Set(buildingSprintIds)
  const hasActiveSprint = !!activeSprint

  function handleSwitchProduct(productId: string) {
    startTransition(async () => {
      const result = await setActiveProductAction(productId)
      if (result?.error) {
        toast.error(typeof result.error === 'string' ? result.error : 'Wisselen mislukt')
        return
      }
      const next = products.find(p => p.id === productId)
      toast.success(`Actief product: ${next?.name ?? 'gewijzigd'}`)
      router.refresh()
    })
  }

  function handleSwitchSprint(sprintId: string) {
    if (!activeProduct) return
    if (sprintId === activeSprint?.id) return
    startTransition(async () => {
      const result = await setActiveSprintAction(activeProduct.id, sprintId)
      if (result?.error) {
        toast.error(typeof result.error === 'string' ? result.error : 'Wisselen mislukt')
        return
      }
      if (pathname.includes('/sprint')) {
        router.push(`/products/${activeProduct.id}/sprint/${sprintId}`)
      } else {
        router.refresh()
      }
    })
  }

  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 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>
      )
    }
    const href = `/products/${activeId}/sprint/${activeSprint!.id}`
    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('/insights', 'Insights', pathname.startsWith('/insights'))}
          {navLink('/ideas', 'Ideas', pathname.startsWith('/ideas'))}
          {navLink('/jobs', 'Jobs', pathname.startsWith('/jobs'))}
          {navLink('/manual', 'Manual', pathname.startsWith('/manual'))}
          {roles.includes('ADMIN') && navLink('/admin', 'Admin', pathname.startsWith('/admin'))}
        </nav>
      </div>

      {/* Midden: actief product + sprint, gestapeld */}
      <div className="flex flex-col items-center justify-center gap-0.5">
        {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}
                  onClick={() => 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>
        )}

        {activeProduct && (
          sprints.length === 0 ? (
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger
                  className="text-xs text-muted-foreground/50 px-2 cursor-not-allowed select-none"
                  aria-disabled="true"
                >
                  Geen sprints
                </TooltipTrigger>
                <TooltipContent>Maak een sprint aan vanuit de Product Backlog</TooltipContent>
              </Tooltip>
            </TooltipProvider>
          ) : (
            <DropdownMenu>
              <DropdownMenuTrigger
                disabled={isPending}
                className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none"
              >
                <span className="truncate max-w-[160px]">
                  {activeSprint ? activeSprint.code : 'Selecteer sprint'}
                </span>
                {activeSprint && (
                  <Badge
                    className={cn(
                      'text-[10px] px-1.5 py-0',
                      buildingSet.has(activeSprint.id)
                        ? 'bg-warning text-warning-foreground'
                        : SPRINT_STATUS_BADGE[activeSprint.status],
                    )}
                  >
                    {buildingSet.has(activeSprint.id) ? 'BUILDING' : SPRINT_STATUS_LABEL[activeSprint.status]}
                  </Badge>
                )}
                <ChevronDown className="w-3 h-3 shrink-0 text-muted-foreground" />
              </DropdownMenuTrigger>
              <DropdownMenuContent align="center" className="w-64">
                {sprints.map(s => (
                  <DropdownMenuItem
                    key={s.id}
                    onClick={() => handleSwitchSprint(s.id)}
                    className={cn(
                      'flex items-center justify-between gap-2',
                      s.id === activeSprint?.id && 'bg-primary-container text-primary-container-foreground font-medium',
                    )}
                  >
                    <span className="truncate">{s.code}</span>
                    <Badge
                      className={cn(
                        'text-[10px] px-1.5 py-0 shrink-0',
                        buildingSet.has(s.id)
                          ? 'bg-warning text-warning-foreground'
                          : SPRINT_STATUS_BADGE[s.status],
                      )}
                    >
                      {buildingSet.has(s.id) ? 'BUILDING' : SPRINT_STATUS_LABEL[s.status]}
                    </Badge>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          )
        )}
      </div>

      {/* Rechts: solo-status + notifications + account-menu */}
      <div className="flex items-center gap-2 flex-1 justify-end">
        <SoloNavStatusIndicators hasActiveProduct={!!activeProduct} minQuotaPct={minQuotaPct} />
        <NotificationsBell currentUserId={userId} isDemo={isDemo} />
        <UserMenu userId={userId} username={username} email={email} roles={roles} />
      </div>
    </header>
  )
}