pansy/web/src/editor/ClearBedModal.tsx

import { Modal } from '@/components/ui/Modal'
import { Button } from '@/components/ui/Button'
import { useClearObject } from '@/lib/objects'

/** Confirm clearing every active plop from a focused bed (soft-remove — the rows
 *  are kept with removed_at, so history survives). */
export function ClearBedModal({
  objectName,
  plops,
  gardenId,
  onClose,
}: {
  objectName: string
  plops: { id: number; version: number }[]
  gardenId: number
  onClose: () => void
}) {
  const clear = useClearObject(gardenId)
  const n = plops.length
  return (
    <Modal title="Clear bed" onClose={onClose} busy={clear.isPending}>
      <div className="flex flex-col gap-4">
        <p className="text-sm text-muted">
          Remove all <span className="font-medium text-fg">{n}</span> {n === 1 ? 'plant' : 'plants'} from{' '}
          <span className="font-medium text-fg">{objectName}</span>? They're marked removed but kept in history.
        </p>
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" onClick={onClose} disabled={clear.isPending}>
            Cancel
          </Button>
          <Button
            type="button"
            variant="danger"
            disabled={clear.isPending || n === 0}
            onClick={() => clear.mutate(plops, { onSuccess: onClose })}
          >
            {clear.isPending ? 'Clearing…' : 'Clear bed'}
          </Button>
        </div>
      </div>
    </Modal>
  )
}