Scrum4Me/components/solo/batch-enqueue-blocker-dialog.tsx

'use client'

import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

interface BatchEnqueueBlockerDialogProps {
  open: boolean
  onOpenChange: (v: boolean) => void
  prefixCount: number
  blockerReason: 'task-review' | 'pbi-blocked'
  blockerLabel: string
  onConfirm: () => void
  onCancel: () => void
}

const BLOCKER_REASON_LABELS: Record<BatchEnqueueBlockerDialogProps['blockerReason'], string> = {
  'task-review': "Een taak staat op 'review'",
  'pbi-blocked': 'De PBI is geblokkeerd',
}

export function BatchEnqueueBlockerDialog({
  open,
  onOpenChange,
  prefixCount,
  blockerReason,
  blockerLabel,
  onConfirm,
  onCancel,
}: BatchEnqueueBlockerDialogProps) {
  const noTasksBeforeBlocker = prefixCount === 0

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Blokkade gedetecteerd</DialogTitle>
        </DialogHeader>

        <div className="space-y-3 py-2 text-sm text-foreground">
          <p>
            {BLOCKER_REASON_LABELS[blockerReason]}:{' '}
            <span className="font-medium">{blockerLabel}</span>.
          </p>
          {noTasksBeforeBlocker ? (
            <p className="text-muted-foreground">Er zijn geen taken vóór de blokkade om in te plannen.</p>
          ) : (
            <p>
              {prefixCount === 1
                ? `Er is ${prefixCount} taak vóór de blokkade.`
                : `Er zijn ${prefixCount} taken vóór de blokkade.`}
            </p>
          )}
        </div>

        <div className="flex justify-end gap-2 pt-2 border-t border-outline-variant">
          <Button variant="ghost" onClick={onCancel}>
            Annuleer
          </Button>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger
                render={
                  <span>
                    <Button
                      onClick={onConfirm}
                      disabled={noTasksBeforeBlocker}
                    >
                      {prefixCount === 1
                        ? `Stuur ${prefixCount} taak tot aan blokkade`
                        : `Stuur ${prefixCount} taken tot aan blokkade`}
                    </Button>
                  </span>
                }
              />
              {noTasksBeforeBlocker && (
                <TooltipContent side="top" className="text-xs">
                  Geen taken vóór blokkade
                </TooltipContent>
              )}
            </Tooltip>
          </TooltipProvider>
        </div>
      </DialogContent>
    </Dialog>
  )
}