'use client'

import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import {
  entityDialogContentClasses,
  entityDialogFooterClasses,
  entityDialogHeaderClasses,
} from '@/components/shared/entity-dialog-layout'
import { debugProps } from '@/lib/debug'

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 showCloseButton={false} className={entityDialogContentClasses} {...debugProps('batch-enqueue-blocker-dialog', 'BatchEnqueueBlockerDialog', 'components/solo/batch-enqueue-blocker-dialog.tsx')}>
        <div className={entityDialogHeaderClasses}>
          <DialogTitle className="text-xl font-semibold">Blokkade gedetecteerd</DialogTitle>
        </div>

        <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6 text-sm text-foreground" data-debug-id="batch-enqueue-blocker-dialog__content">
          <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={entityDialogFooterClasses}>
          <div className="flex justify-end gap-2">
            <Button variant="ghost" onClick={onCancel} data-debug-id="batch-enqueue-blocker-dialog__cancel">
              Annuleer
            </Button>
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger
                  render={
                    <span>
                      <Button
                        onClick={onConfirm}
                        disabled={noTasksBeforeBlocker}
                        data-debug-id="batch-enqueue-blocker-dialog__confirm"
                      >
                        {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>
        </div>
      </DialogContent>
    </Dialog>
  )
}