'use client'

import { useSoloStore } from '@/stores/solo-store'
import type { RealtimeStatus } from '@/stores/solo-store'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { cn } from '@/lib/utils'

function RealtimeIndicator({
  status,
  showConnectingIndicator,
}: {
  status: RealtimeStatus
  showConnectingIndicator: boolean
}) {
  let color = 'bg-status-done'
  let label = 'Live'
  if (showConnectingIndicator) {
    if (status === 'disconnected') {
      color = 'bg-priority-critical'
      label = 'Verbroken — opnieuw proberen…'
    } else {
      color = 'bg-muted-foreground'
      label = 'Verbinden…'
    }
  }
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={
            <span
              aria-label={label}
              className={cn('inline-block h-2 w-2 rounded-full shrink-0 transition-colors', color)}
            />
          }
        />
        <TooltipContent>{label}</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

export function SoloNavStatusIndicators({ hasActiveProduct }: { hasActiveProduct: boolean }) {
  const realtimeStatus = useSoloStore((s) => s.realtimeStatus)
  const showConnectingIndicator = useSoloStore((s) => s.showConnectingIndicator)
  const connectedWorkers = useSoloStore((s) => s.connectedWorkers)

  if (!hasActiveProduct) return null

  return (
    <div className="flex items-center gap-3 px-2">
      <RealtimeIndicator
        status={realtimeStatus}
        showConnectingIndicator={showConnectingIndicator}
      />
      <div className="flex items-center gap-1 text-xs text-muted-foreground">
        <span className={cn(
          'size-2 rounded-full',
          connectedWorkers > 0 ? 'bg-status-done' : 'bg-muted-foreground/40'
        )} />
        {connectedWorkers > 0 ? 'Agent verbonden' : 'Geen agent'}
      </div>
    </div>
  )
}